Due to the project needs, I plan to learn the bootstrap framework well. I learned a little before. The framework is not difficult overall, but there are still many things involved. If you want to master it proficiently, you still need to practice more.
1. What is bootstrap?
What is bs? That is, the standardized framework tool built by the front-end page has been written in the css.js style, and it only needs to be used.
How to use bs? The main thing is to increase the effect by using different classes, and each class has different corresponding functions.
BS benefits: Increases development efficiency, makes the page design more beautiful, and supports responsive development. Download address: https://github.com/foreverjiangting/bootstrap
Learning documentation: http://v3.bootcss.com/getting-started/
2. CSS style design
1. Based on Html documentation
bootstrap refers to some html elements, so the header needs to be written as the sample column shown below.
<!DOCTYPE html> ---Contains HTML5 document declaration, all browsers turn on standard mode<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- The above 3 meta tags *must* be placed first, and any other content *must* follow them! Ensure responsive layouts are supported --><title>Bootstrap</title>[/code][code]<!-- New Bootstrap core CSS file --><link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"><!-- Optional Bootstrap theme files (usually not required to be introduced) --><link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"><!-- jQuery file. Be sure to introduce --><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!-- The latest Bootstrap core JavaScript file --><script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script></head><body><h1>Hello, world!</h1></body></html>
2. Grid system layout
Layout content by setting rows and columns. bootstrap sets the page to 12 columns. Layout by changing the number of columns, such as setting three equal width columns:
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* be placed first, and any other content *must* follow them! --><title></title><link href="css/bootstrap.css" rel="stylesheet"><link href="css/bootstrap.min.css" rel="stylesheet"><script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script><script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><body><!-- Setting fence layout--><div><!-- or container-fluid--> <div> -- col-xs-4 : refers to a small device less than 768px <div>11</div> -- col-sm-4 : refers to a device >=768px <div>22</div> -- col-md-4 : refers to a device >=992px <div>33</div> -- col-lg-4 : refers to a device less than 1200px</div> <div>11</div> <div>22</div> <div>33</div> </div> <div>33</div> </div> <div> <div>11</div> <div>22</div> <div>33</div> </div> <div>33</div> </div> <div> <div>11</div> <div>22</div> <div>33</div> </div> <div> <div>11</div> <div>22</div> <div>33</div> </div></div></body></html>
There are four ways to write the css network format, which are mainly used in the resolution of different devices.
2: Translate the column
Use offset to pan. That is, the number of columns translated
<div><!-- or container-fluid--> <div> <div>11</div> <div>22</div> <div>33</div>---refers to the right of 33 </div> <div>11</div> <div>22</div> <div>33</div>---refers to the right of 33 </div> <div>11</div> <div>22</div> <div>33</div> </div> <div>11</div> <div>22</div> <div>33</div> </div> </div><!-- Translate column-->
The effects are as follows:
33 Since the two columns were translated, it could not meet its requirement of occupying 4 columns, so it was squeezed into the next row and started occupying 4 columns. Simply put, it is equivalent to moving the entire div block right.
3: Nested columns
That is, nest columns in the grid column. Let's compare.
<div><!-- or container-fluid--> <div> <div> <div>11</div> <div>22</div> <div>33</div> </div> </div> <div> <div>11</div> </div> <div>11</div> </div> <div>11</div> <div>22</div> <div>33</div> </div> </div> </div> </div> </div> <div>11</div> <div>22</div> <div>33</div> </div> </div> </div>
The effects are as follows:
Have you found any problems? Why is there no equal distribution of 8 above?
Reason: Let's take a look at the debug console
.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { min-height: 1px; padding-left: 15px; padding-right: 15px; position: relative;}It was found that padding-left and padding-right are both 15px. This is because padding between columns is worthy of influence, so why does the second div have no influence? Let’s explore the principle of fence grid.
1. "row" must be included in .container (fixed width) or .container-fluid (100% width) to give it the appropriate alignment and padding.
2. Create a gutter between columns by setting the padding property for "column". By setting a negative margin for the .row element, offset padding set for the .container element
Indirectly, the "column" contained in "row" offsets padding .
Note : At this time, row has offset the padding of the column, so there is no padding value.
4: Column sorting
Mainly using col-xs-push-* col-xs-pull-* (* represents a number of 0-11) How to understand these two classes? push means push, pull means pull.
<div> <div>21</div> <div>24</div> </div> <div> <div>21</div> <div>24</div> </div>
The renderings are as follows:
<div>21</div>---recorded as div1 <div>24</div>--recorded as div2
It can be understood that it is to swap the positions of both. You need to push div1 to the right 8 columns, and you need to pull 4 columns to the left.
3. Streaming grid layout
1. Column width uses percentages, not pixels
2. Change the row class to row-fluid
3. Other basic functions are the same as the fixed layout above and support responsiveness.
4. When dividing a certain column in a bisector, since the streaming layout uses percentages, it should be calculated according to 6.
//Note the following situation. When dividing 8 columns bilaterally, it is not set to two 4s, but two 6s, because there are 12 columns of raster distribution in bootstrap. <div> <div> <div>2</div> <div>2</div> </div> </div> </div> </div>
Let’s take a look at the application of streaming layouts and compare them with fixed layouts.
<!-- Streaming layout--><div> <div>333</div> <div>444</div></div><div> ---Declare the container-fluid class, indicating that the content is a streaming layout, function: as a containing block, to contain the streaming content<div> <div>333</div> <div>444</div> </div></div><div> ---Declare the container and container-fluid classes, and this is the width of the screen <div>333</div> <div>444</div></div>
When the screen is less than 768px, the effect is as follows:
When the screen is larger than 992px, the effect is as follows: At this time, one line is exclusive
The row-fluid class (very important) determines whether it is a flow layout. Then the content block code is written in the same way as the grid system, and it still starts from col-md-1 to col-md-12, which correspond to different percentages respectively.
4. Responsive design
Simply put, it supports the resolutions (960PX, 1366PX, 978PX, etc.) of different devices (mobile phones, PCs) for adaptive response.
<div> <div>21</div> <div>24</div> </div>
When the device is less than 768px, the effect is as follows:
When device >=992px. The effects are as follows:
The resolutions of the above two categories are different. col-md-12 means that each column has one row, that is, 12 columns.
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.