Article directory
1. Introduction to Bootstrap
As the name suggests, the framework is a set of architecture, which will provide users with a relatively complete set of solutions based on its own characteristics. The control right of the framework is in the framework itself, and users should develop according to certain specifications stipulated by the framework. Plug-ins generally exist specifically to solve a certain problem, and their functions are single and relatively small.
Common front-end frameworks include Bootstrap, Vue, Angular, React, etc., which can be used to develop both PC and mobile terminals.
Bootstrap is currently the most popular HTML, CSS and JS framework for developing responsive layouts, mobile-first WEB projects, etc. It is simple and flexible, making Web development faster and easier.
2. Installation and use
Bootstrap Chinese website:www.bootcss.com
① We download the second one, Bootstrap source code
② Create a folder named bootstrap in the project
to put bootstrap related files later.
③ Copy after the download is complete
Copy the css and js in the dist folder, paste them into the bootstrap folder we just created, then copy the fonts under the dist folder, and paste them into the bootstrap//css folder, which is at the same level as bootstrap.min.css .
④ Create a jquery.js file
and put it under our project folder js.
⑤ Find the jquery code on the official website
Official website address:http://jquery.com/
Click to download:
Select the second line and click Open:
we can see the line of code:
⑥ Copy all the above codes
And paste it into the jquery.js file we have created earlier.
⑦ External link import file
bootstrap.min.css is imported normally, but the bootstrap.min.js file is dependent on jquery, so jquery.js must be imported before bootstrap.min.js.
3. Layout container
1. Fixed width
The .container class is a container for fixed width and supports responsive layout, with margins on both sides.
<div class="container">
...
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="css//bootstrap.min.css" rel="stylesheet"/>
<style>
.colors {
background-color: black;
color: aliceblue;
height: 50px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="container colors">
OK!
</div>
</body>
</html>
If you are not satisfied with the original style, we can declare a class for the div to modify some styles!
2. 100% width
The .container-fluid class is for 100% width containers that take up the entire viewport.
<div class="container-fluid">
...
</div>
实际开发中，为了美观我们两侧需要留有一定的空白，所以使用更多的是固定宽度！
4. Grid grid system
Bootstrap provides a set of responsive, mobile device-first fluid grid system. As the screen or viewport size increases, the system is automatically divided into up to 12 columns, and the page layout is created through a series of combinations of rows and columns. Your content can then be placed into these created layouts.
The implementation principle of the grid system is very simple, just by defining the size of the container, dividing it into 12 parts (there are also 24 parts and 32 parts, but 12 parts is the most common), then adjusting the inner and outer margins, and finally combining media queries, This creates a powerful responsive grid system.
注意网格系统必须使用到 CSS！
1. Column combination
A column (.column) can be added to a row (.row) before it can be used as a direct child element of the row container (.row), but the sum of the columns cannot exceed the total number of columns divided equally. If it is greater than 12, it will automatically switch to the next row , xs super small screen, sm small screen, md medium screen, lg large screen, md is generally used the most. The specific content should be placed inside the column container:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link type="text/css" href="css//bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color: black;">4</div>
<div class="col-md-8" style="background-color: red;">8</div>
</div>
</div>
</body>
</html>
栅格网格系统会自动将每一列的 div 都放到一行上去，所以不需要再设置！
2. Column Offset
If we don't want two adjacent columns to be close together, but don't want to use margin or other methods, we can use the column offset (offset) function to achieve this. Using column offset is also very simple, just need Add the class name "col-md-offset-number" to the column element (the number here is the number of columns to be offset, and can also be understood as the number of columns from the adjacent left column), and the column with this class name is It will be offset to the right, and the total number of columns and offset columns must not exceed 12, otherwise the columns will be displayed in a new line.
前面的列偏移的时候，会推动着后面的列也往后走！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link type="text/css" href="css//bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-1" style="background-color: black;">1</div>
<div class="col-md-2 col-md-offset-1" style="background-color: red;">2</div>
<div class="col-md-2 col-md-offset-2" style="background-color: blue;">2</div>
</div>
</div>
</body>
</html>
3. Column sorting
Column sorting is to change the direction of the column, that is, to float left and right, and the distance of the float can be set. By adding the class name, col-md-push-number, col-md-pull-number, the number is the number of columns to float.
左浮动 pull，右浮动 push！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link type="text/css" href="css//bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-1" style="background-color: rgb(211, 228, 21);">1</div>
<div class="col-md-1 col-md-push-1" style="background-color: rgb(255, 89, 0);">2</div>
<div class="col-md-1" style="background-color: blue;">2</div>
<div class="col-md-1" style="background-color: rgb(0, 255, 106);">2</div>
</div>
</div>
</body>
</html>
Here you can see that the orange box is overwritten:
偏移会挤走后面的盒子，而排序则会压住前面的盒子，左浮动压住前面的盒子，右浮动被后面的盒子压住！
4. Column nesting
The grid system of the Bootstrap framework also supports nesting of columns. We can add one or more row containers in a column, and also insert multiple columns in these row containers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link type="text/css" href="css//bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-4" style="background-color: red;">4</div>
<div class="col-md-4" style="background-color: burlywood;">4</div>
<div class="col-md-4" style="background-color: blue;">4</div>
</div>
</div>
<div class="col-md-5 col-md-offset-1">
<div class="row">
<div class="col-md-3" style="background-color: green;">3</div>
<div class="col-md-4" style="background-color: black;">4</div>
<div class="col-md-2" style="background-color: palevioletred;">2</div>
<div class="col-md-3" style="background-color: orange;">3</div>
</div>
</div>
</div>
</div>
</body>
</html>
5. Adaptive according to the resolution
There is another problem here. The boxes we see on the computer screen can be displayed in one line, but when we switch to the mobile phone, we find that only one line can be displayed, and all of them are displayed on a new line. This is because of the resolution of the mobile phone. Smaller and we use the md medium screen to write. If we want it to display all the columns in one row on the computer side, but the number of columns in each row can be customized on the mobile phone side , how to do it?
Very simple, add another class for the ultra-small screen xs. as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link type="text/css" href="css//bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3 col-xs-6" style="background-color: red;">1</div>
<div class="col-md-3 col-xs-6" style="background-color: gray;">2</div>
<div class="col-md-3 col-xs-6" style="background-color: green;">3</div>
<div class="col-md-3 col-xs-6" style="background-color: rgb(57, 57, 239);">4</div>
</div>
</div>
</body>
</html>
想适应更多的屏幕可多添加几个类，xs、sm、md、lg！
Five, commonly used styles
1. Typesetting
① Title
Bootstrap is the same as ordinary HTML pages. It uses tags to define titles <h1> ~ <h6>, but Bootstrap overrides its default style. In order to make non-title elements and titles use the same style, .h1 ~ .h6six Can be followed by a small subtitle <small></small>or .small.
② Paragraph
Paragraph is one of the other important elements in typesetting. Use .leadto highlight the content (the effect is to increase the font size of the text, bold the text, and also deal with the line height and margin accordingly).
③ Emphasis
Defines a set of class names, which are called emphasis class names here. These classes are actually color classes, and different colors are added to the text to express the emphasis effect. The specific instructions are as follows:
① .text-muted, prompt effect, use light gray (#999);
② .text-primary, main effect, use blue (#428bca);
③ .text-success, success effect, use light green (#3c763d) ;
④ .text-info, notification information effect, use light blue (#31708f);
⑤ .text-warning, warning effect, use yellow (#8a6d3b);
⑥ .text-danger, danger effect, use brown (#a94442 ).
④ Alignment effect
Here Bootstrap also provides some related classes for us to achieve various alignment effects of text. We can set text-align in CSS as before, or control the alignment style of text through these four class names in Bootstrap. Left alignment.text-left, right alignment.text-right, center alignment.text-center, both ends alignment.text-justify.
2. List
① Go to the point list
<ul class="list-unstyled">
<li>无序列表一</li>
<li>无序列表二</li>
</ul>
② Inline list
Replace the vertical list with a horizontal list, and remove the dots at the same time. It can also be said that the inline list is born for making a horizontal navigation bar.
<ul class="list-inline">
<li>无序列表一</li>
<li>无序列表二</li>
</ul>
3. Code
Generally, it is more frequently used on personal blogs to display the style of the code.
① Display a single line of code
<code>this is a simple code</code>
② Display multiple lines of code
<pre>
******
******
******
******
</pre>
代码会保留原本的格式，包括空格和换行！
③ shortcut key
使用<kbd>ctrl+s</kbd>保存
④ Display the html code,
replace the less than sign with <and the greater than sign with>
<h2>你好</h2>
⑤ Multi-line code scroll bar
<pre class="pre-scrollable">
******
******
******
******
</pre>
4. Form
In the process of using Bootstrap's form, you only need to add the corresponding class name to get a form with different styles.
Table style:
① .table: Basic table;
② .table-bordered: Table with borders;
③ .table-hover: Table with mouse hover highlight;
④ .table-condensed: Compact table, cells have no inner spacing or inner spacing Other tables have small padding.
tr, th, td styles:
5 categories are provided, and each category controls a different background color of the row.
① .active: Apply the hovering color to the row or cell;
② .success: Indicates a successful operation;
③ .info: Indicates an operation of information change;
④ .warning: Indicates a warning operation;
⑤ .danger: Indicates a dangerous operation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link type="text/css" href="css//bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<table class="table table-bordered table-hover">
<tr class="success">
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
</tr>
<tr class="active">
<td>张三</td>
<td>语文</td>
<td>87</td>
</tr>
<tr class="info">
<td>李四</td>
<td>语文</td>
<td>91</td>
</tr>
<tr class="warning">
<td>王五</td>
<td>语文</td>
<td>96</td>
</tr>
<tr class="danger">
<td>李华</td>
<td>语文</td>
<td>82</td>
</tr>
</table>
</body>
</html>
5. Form
5.1 Form controls
① input box
<div class="row">
<div class="col-sm-3">
<input type="text" class="form-control" /> <br/>
<input type="text" class="form-control input-lg" /> <br/>
<input type="text" class="form-control input-sm" />
</div>
</div>
If you directly write the input tag, an input box will occupy a line by itself, which is obviously inappropriate. We can use the grid grid system to apply for a line, and control the length of the input box by setting the number of columns. As shown in the figure:
② Drop-down list
The drop-down box is the same, use the grid grid system to control the overall width!
Comparing these two drop-down boxes, multiple enables the drop-down box to select multiple rows with the left mouse button.
<div class="row">
<div class="col-sm-3">
<select class="form-control">
<option>请选择城市</option>
<option>上海</option>
<option>北京</option>
</select> <br/>
<select class="form-control" multiple="multiple">
<option>请选择城市</option>
<option>上海</option>
<option>北京</option>
</select>
</div>
</div>
③ text field
The width and height of the text field can be set by row and col, or controlled by the grid system.
<textarea class="form-control"></textarea>
④ check box
.checkbox displays vertically!
<div class="row">
<div class="col-sm-3">
<div class="checkbox">
<label><input type="checkbox" name="hobby"/>唱歌</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="hobby"/>跳舞</label>
</div>
</div>
</div>
.checkbox-inline displays horizontally!
<div class="row">
<div class="col-sm-3">
<label class="checkbox-inline">
<input type="checkbox" name="hobby"/>唱歌
</label>
<label class="checkbox-inline">
<input type="checkbox" name="hobby"/>跳舞
</label>
</div>
</div>
注意垂直显示和水平显示外层容器的写法是不一样的！
⑤ radio button
The radio box is similar to the checkbox, it displays .radio vertically and .radio-inline horizontally, just replace the checkbox above with radio!
⑥ button
(1) Basic style: btn
<button class="btn">按钮</button>
(2) Additional styles: btn-primary, btn-info, btn-success, btn-warning, btn-danger, btn-link, btn-default (that is, the color of the button).
(3) Common tags realize the button effect, such as a tag, span tag and div tag.
<a href="#" class="btn btn-info">a标签按钮</a>
(4) Button size, use .btn-lg, btn-sm, btn-xs to get buttons of different sizes.
<button class="btn btn-xs">超小按钮</button>
(5) There are two ways to disable the button. The old method adds the disabled attribute to the tag, and the Bootstrap method adds the class name disabled to the element tag.
注意第二种方法在 class 中添加 disabled 只是样式上禁用了，其实按钮还能用，所以并不是真正意义上的禁用！
5.2 Form Layout
Steps to create a basic form:
① Add role="form" to the parent element form tag;
② Put each label and control in a div, and add class="form-group", which is to get the best spacing Necessary;
③ Add the class class="form-control" to all text elements input, textarea and select.
(1) Horizontal form , displayed on the same line, add form-horizontal class to match the grid system.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link type="text/css" href="css//bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<form action="#" class="form-horizontal" role="form">
<h2 class="text-center">用户信息表</h2>
<!-- 文本框 -->
<div class="form-group">
<label for="uname" class="control-label col-md-2">姓名</label>
<div class="col-md-8">
<input type="text" id="uname" class="form-control" placeholder="请输入姓名" />
</div>
</div>
<!-- 密码框 -->
<div class="form-group">
<label for="upwd" class="control-label col-md-2">密码</label>
<div class="col-md-8">
<input type="password" id="upwd" class="form-control" placeholder="请输入密码" />
</div>
</div>
<!-- 复选框 -->
<div class="form-group">
<label class="control-label col-md-2">爱好</label>
<div class="col-md-8">
<label class="checkbox-inline">
<input type="checkbox" name="hobby" id="sing" /><label for="sing">唱歌</label>
</label>
<label class="checkbox-inline">
<input type="checkbox" name="hobby" id="dance" /><label for="dance">跳舞</label>
</label>
</div>
</div>
<!-- 下拉列表 -->
<div class="form-group">
<label for="city" class="control-label col-md-2">城市</label>
<div class="col-md-8">
<select id="city" class="form-control">
<option>请选择城市</option>
<option>上海</option>
<option>北京</option>
</select>
</div>
</div>
<!-- 文本域 -->
<div class="form-group">
<label for="remark" class="control-label col-md-2">简介</label>
<div class="col-md-8">
<textarea id="remark" class="form-control"></textarea>
</div>
</div>
<!-- 按钮 -->
<div class="form-group">
<div class="col-md-1 col-md-offset-5">
<button class="btn btn-primary">提交</button>
</div>
</div>
</form>
</body>
</html>
(2) Inline form , which is rarely used, displays the form-inline controls in one line. Note that the label will not be displayed. If there is no input control to set the label tag, the screen reader will not be able to recognize it correctly.
6. Thumbnail
Thumbnails are very common on e-commerce websites, and the most commonly used place is the product list page. The realization of thumbnails is used together with the grid system. At the same time, you can also make the thumbnail match the title, description, button, etc., class="thumbnail".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link type="text/css" href="bootstrap//css//bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="ldh.jpg" style="width: 240px; height: 360px;"/>
<h3>刘德华</h3>
<p>出生于中国香港，演员。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span> 喜欢
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span> 评论
</button>
</div>
</div>
</div>
</div>
</body>
</html>
Here, by the way, let me talk about the introduction of Bootstrap font icons ! Very simple, open Bootstrap official website:
① Click on the component
② Copy the desired icon code
③ Add a class to the span tag, the class name is the icon code copied above
<span class="glyphicon glyphicon-heart"></span>
引入字体图标时，注意提前把 fonts 放到 bootstrap.min.css 同级文件夹下，否则图标无法显示！
7. Panel
All the default .panel component does is set the basic border and padding to contain the content.
① .panel-default: Default style;
② .panel-heading: Panel header;
③ .panel-body: Panel body content;
④ .panel-success: Control the color as before.
<div class="panel panel-warning">
<div class="panel-heading">
666
</div>
<div class="panel-body">
111
</div>
</div>
