Bootstrap 3 is mobile-first, in this sense, Bootstrap code starts with small screen devices (such as mobile devices, tablets) and then expands to components and grids on large screen devices (such as laptops, desktops).
1. Mobile device priority strategy
1. Content: Deciding what is the most important thing.
2. Layout
Preferential design of smaller widths.
Basic CSS is preferred for mobile devices, and media queries are targeted at tablets and desktop computers.
3. Gradually enhanced
Add elements as the screen size increases.
As the screen or viewport size increases, the system will automatically be divided into up to 12 columns. As shown in the figure below:
2. Working principle of Bootstrap grid system (Grid System)
The grid system creates page layouts through a series of rows and columns containing content. Here is a list of how the Bootstrap mesh system works:
1. The rows must be placed in the .container class to obtain appropriate alignment and padding.
2. Use rows to create horizontal groups of columns.
3. The content should be placed in the column, and only the column can be a direct child element of the row.
4. Predefined grid classes, such as .row and .col-xs-4, can be used to quickly create grid layouts. LESS hybrid classes can be used for more semantic layouts.
5. Columns create gaps between column contents through padding. This inner margin is negative by the margin on .rows, indicating the row offset of the 6th, first column and last column.
7. The grid system is created by specifying the twelve available columns you want to span. For example, to create three equal columns, use three .col-xs-4.
3. Media inquiry
Media queries are very chic "conditional CSS rules". It only applies to some CSS based on certain prescribed conditions. If those conditions are met, the corresponding style is applied.
Media queries in Bootstrap allow you to move, display, and hide content based on viewport size. The following media query is used in the LESS file to create critical breakpoint thresholds in the Bootstrap grid system.
/* Ultra-small device (mobile phone, less than 768px) *//* No media query by default in Bootstrap*/ /* Small device (tablet, starting from 768px) */@media (min-width: @screen-sm-min) { ... } /* Medium device (desktop, starting from 992px) */@media (min-width: @screen-md-min) { ... } /* Large device (large desktop, starting from 1200px) */@media (min-width: @screen-lg-min) { ... }We sometimes include max-width in our media query code, limiting the impact of CSS to a smaller range of screen sizes.
@media (max-width: @screen-xs-max) { ... }@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }@media (min-width: @screen-lg-min) { ... }There are two parts for media query, first a device specification, and then a size rule. In the above case, the following rules are set:
Let's look at the following line of code:
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
For all devices with min-width: @screen-sm-min, some processing will be done if the screen width is smaller than @screen-sm-max.
4. Grid options
The following table summarizes how the Bootstrap mesh system works across multiple devices:
5. Basic grid structure
Here is the basic structure of the Bootstrap grid:
<div> <div> <div></div> <div></div> </div> <div>...</div></div><div>....
Here is a specific code example:
<div> <h1>Hello, world!</h1> <div> <!--Small device mobile phone (<768px) --> <div style="background: #f00">1</div> <div style="background: #b2b0b0">2</div> <div style="background: #ff6a00">3</div> <div style="background: #ffd800">4</div> <div style="background: #4cff00">5</div> <div style="background: #0ff">6</div> <div style="background: #0094ff">7</div> <div style="background: #0094ff">7</div> <div style="background: #b200ff">8</div> <div style="background: #ff00dc">9</div> <div style="background: #ff006e">10</div> <div style="background: #ac5050">11</div> <div style="background: #54bd4f">12</div> </div> <div> <!--Small Device Tablet (≥768px) --> <div style="background: #b2b0b0">1</div> <div style="background: #ffd800">1</div> <div style="background: #ac5050">1</div> </div> <div> <!--Medium-sized desktop computer (≥992px) --> <div style="background: #ac5050">1</div> <div style="background: #54bd4f">1</div> </div> <div> <!--Large-sized desktop computer (≥1200px) --> <div style="background: #ac5050">1</div> <div style="background: #54bd4f">1</div> </div> </div> </div>
6. Offset column
Offset is a useful feature for more professional layouts. They can be used to make more space for the column. For example, the .col-xs=* classes do not support offsets, but they can simply achieve this by using an empty cell.
To use offsets on large screen monitors, use the .col-md-offset-* class. These classes will increase the left margin of a column by * column, where * range is from 1 to 11.
In the example below, we have <div>..</div>, and we will use .col-md-offset-3 class to center this div.
<div> <div> <div style="background-color: #dedef8;"> <p> Test offset column---3 columns are offset to the right here</p> </div> </div> <div> <div style="background: #f00">1</div> <div style="background: #b2b0b0">2</div> <div style="background: #ff6a00">3</div> <div style="background: #ffd800">4</div> <div style="background: #4cff00">5</div> <div style="background: #0ff">6</div> <div style="background: #0094ff">7</div> <div style="background: #b200ff">8</div> <div style="background: #ff00dc">9</div> <div style="background: #ff006e">10</div> <div style="background: #ac5050">11</div> <div style="background: #54bd4f">12</div> </div> </div> </div>
Display effect:
7. Nested columns
To nest the default grid in the content, add a new .row and add a set of .col-md-* columns within an existing .col-md-* column. The nested rows should contain a set of columns, and the number of columns in this set of columns cannot exceed 12 (actually, there is no requirement that you must occupy 12 columns).
In the following example, the layout has two columns, and the second column is divided into two rows and four boxes.
<div> <div> <div style="background: #b2b0b0">First column</div> <div style="background: #dedef8">The second column--there are four DIVs nested in it <div> <div style="background: #0094ff">I am Content One<br /><br /><br /></div> <div style="background: #b200ff">I am Content Two</div> </div> <div> <div style="background: #ff00dc">I am Content Three<br /><br /><br /></div> <div style="background: #ff006e">I am Content Four</div> </div> </div> </div> </div>
Display effect:
8. Column sorting
Another perfect feature of Bootstrap mesh system is that you can easily write columns in one order and then display them in another.
You can easily change the order of built-in grid columns with .col-md-push-* and .col-md-pull-* classes, where * ranges from 1 to 11.
In the example below, we have two column layouts, the left column is narrow, as the sidebar. We will use the .col-md-push-* and .col-md-pull-* classes to interchange the order of the two columns.
<div> <div> <div style="background: #ff00dc">Left</div> <div style="background: #ff006e">Right</div> </div> </div>
Display effect:
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.