Home > Article > Web Front-end > A brief summary after learning Bootstrap
A brief summary after learning Bootstrap
- PHPzOriginal
- 2018-09-17 11:44:392297browse
This chapter brings you a brief summary after learning Bootstrap, so that you can know the composition of Bootstrap, the advantages and disadvantages of Bootstrap, and how Bootstrap implements responsive layout (example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
【Related video recommendation: Bootstrap tutorial】
Bootstrap4 features: 1. Compatible with IE10 2. Use flexbox layout 3. Abandon Normalize.css 4. Provide layout and reboot version
Bootstrap consists of: 1. Basic style 2. Common components 3. JS plug-in
FAQ:
1. Advantages and disadvantages of Bootstrap
Advantages: The CSS code structure is reasonable, ready-made styles can be used directly
Disadvantages: Customization is cumbersome and large in size
2. How to implement responsive layout with Bootstrap
Principle: Set classes of different resolutions through media query
Usage: Select for different resolutions Different grid classes
3. How to customize your own style based on Bootstrap
1. Use css class override with the same name (used in simple scenarios)
2. Modify the source code and rebuild
3. Reference the scss source file and modify the variables
Knowledge points:
1. Basic usage
Making a simple login page
<!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>Rendering:
2.Bootstrap JS component
Written based on jQuery, many interactive effects can be achieved, so jQuery needs to be introduced, as well as Popper.js (library) and bootstrap.js
How to use: 1. Based on HTML's data-** attribute 2 .Based on JS API
Rendering:
3 .Bootstrap responsive layout
<!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 in total, 12 per row when screen size =screen When size>=576px, 6 per row; when 992px>=screen size>=768px, 4 per row; when screen size>=992px, 3 per row; Rendering ：
The above is the detailed content of A brief summary after learning Bootstrap. For more information, please follow other related articles on the PHP Chinese website!