Bootstrap을 배운 후의 간략한 요약
- PHPz원래의
- 2018-09-17 11:44:392259검색
이 장에서는 Bootstrap을 학습한 후 간단한 요약을 제공하여 Bootstrap의 구성, Bootstrap의 장점과 단점, Bootstrap이 반응형 레이아웃을 구현하는 방법(예제)을 알 수 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
【관련 영상 추천: Bootstrap 튜토리얼】
Bootstrap4 기능: 1. IE10+ 호환 2. Flexbox 레이아웃 사용 3. Normalize.css 포기 4. 레이아웃 제공 및 재부팅 버전
Bootstrap 구성: 1. 기본 스타일 2. 일반적으로 사용되는 컴포넌트 3. JS 플러그인
FAQs:
1. 부트스트랩의 장점과 단점
장점: CSS 코드 구조가 합리적이며 이미 만들어진 스타일을 사용할 수 있습니다.
단점: 커스터마이징이 더 번거롭고, 크기가 크다
2. 부트스트랩으로 반응형 레이아웃을 구현하는 방법
원리: 미디어 쿼리를 통해 다양한 해상도의 클래스 설정
용도: 해상도별로 다양한 그리드 클래스 선택
3. 부트스트랩을 기반으로 사용자 정의하는 방법
1. 동일한 이름의 CSS 클래스를 사용하여 덮어쓰기(간단한 시나리오에서 사용)
2. scss를 참조하세요. 소스 파일을 수정하고 변수를 수정합니다
지식: 1. 기본 사용법
간단한 로그인 페이지 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<title>Bootstrap</title>
<style>
#result{
display: none;
}
.title{
margin-top: 50px;
margin-bottom: 50px;
}
.operate button{
margin: 0 auto;
}
</style>
</head>
<body>
<h2 class="title col-6 offset-3">注册</h1>
<form id="myForm" class="col-6 offset-3">
<div class="form-group row">
<label class="col-2 col-form-label">姓名</label>
<div>
<input name="name" type="text" />
</div>
</div>
<div class="form-group row">
<label class="col-2 col-form-label">密码</label>
<div>
<input name="password" type="password" />
</div>
</div>
<div class="form-group row">
<label class="col-2 col-form-label">电话</label>
<div>
<input name="cellphone" type="text" />
</div>
</div>
<div class="form-group row">
<label class="col-2 col-form-label">地址</label>
<div>
<input name="address" type="text" />
</div>
</div>
<div id="result" class="alert alert-danger">
</div>
<div class="operate form-group row">
<button class="btn btn-primary" type="submit">提交</button>
</div>
</form>
<script>
var form = document.querySelector('#myForm');
var result = document.querySelector('#result');
form.addEventListener('submit', function(e){
if(!document.querySelector('[name=password]').value){
result.style.display = 'block';
result.innerHTML = '密码为空';
}else{
result.style.display = 'none';
}
e.preventDefault();
});
</script>
</body>
</html>렌더링:
가 작성되었습니다. 기반으로 jQuery는 많은 대화형 효과를 완성할 수 있으므로 jQuery를 도입해야 하며 Popper.js(라이브러리) 및 bootstrap.js를 도입해야 합니다
사용 방법: 1. HTML 데이터-** 속성 기반 2. 기반 JS API
렌더링:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<title>Bootstrap</title>
<style>
.content > div{
height: 100px;
line-height: 100px;
text-align: center;
color: #333;
background:#cccccc;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div>
<div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
</div>
</div>
</body>
</html>총 12개, 화면 크기 = 화면 크기>=576px인 경우 행당 6개, 992px인 경우 행당 4개, 화면 크기가 992px인 경우 행당 3개,
렌더링:
방법: 1. 동일한 이름의 CSS 사용 클래스 적용 범위(간단한 시나리오에서 사용) 2. 소스 코드 수정 및 재구축 3. scss 소스 파일 참조 및 변수 수정
위 내용은 Bootstrap을 배운 후의 간략한 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!