Chapter 5: BootStrap Grid System_javascript skills

Bootstrap, from Twitter, is currently the most popular front-end framework. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is simple and flexible, making web development faster.

Learning points:

1. Mobile devices first
2. Layout container
3. Grid system

In this lesson we will mainly learn about Bootstrap’s grid system, which provides a responsive, mobile-first fluid grid system.

1. Mobile first

In the HTML5 project, we made a mobile project. It has a very important meta, which is used to set the same width as the screen and device, whether to run user scaling, and the scaling ratio.

//分别为：屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

2. Layout container

Bootstrap requires a .container container to wrap the page content and grid system. Due to attributes such as padding, these two container classes cannot be nested in each other.

//固定宽度
<div class="container">
...
</div>
//100%宽度
<div class="container-fluid">
...
</div>

In the grid system, the browser will automatically allocate up to 12 columns as the screen size increases or decreases. Create a page layout through a series of rows and columns. Here’s how it works:

1. "Row" must be contained in .container (fixed width) or .container-fluid (100% width) in order to give it appropriate alignment and padding.

2. Create a group of "columns" in the horizontal direction through "rows".

3. Your content should be placed within "column", and only "column" can be a direct child element of row.

4. Predefined classes like .row and .col-xs-4 can be used to quickly create grid layouts.
Mixins defined in the Bootstrap source code can also be used to create semantic layouts.

5. Create a gutter between columns by setting the padding attribute for "column". By setting a negative value for the .row element

margin thus offsets the padding set for the .container element, and indirectly offsets the padding for the "column" contained in the "row".

6. The negative value of margin is why the example below protrudes outward. Contents in grid columns line up.

7. Columns in the grid system represent the range they span by specifying values ​​from 1 to 12. For example, three equal-width columns can be created using three .col-xs-4 s.

8. If a "row" contains more than 12 "columns", the elements of the extra "columns" will be arranged as a whole in another row.

9. The grid class is suitable for devices with a screen width greater than or equal to the dividing point size, and the grid class is overridden for small screen devices. Therefore, applying any .col-md-* raster classes on an element works for devices with screen widths greater than or equal to the breakpoint size, and overrides the raster class for small-screen devices. Therefore, applying any .col-lg-* on the element does not exist and also affects large screen devices.

//创建一个响应式行
<div class="container">
<div class="row">
...
</div>
</div>
//创建最多 12 列的响应式行
<div class="container">
<div class="row">
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">2</div>
<div class="col-md-1 a">3</div>
<div class="col-md-1 a">4</div>
<div class="col-md-1 a">5</div>
<div class="col-md-1 a">6</div>
<div class="col-md-1 a">7</div>
<div class="col-md-1 a">8</div>
<div class="col-md-1 a">9</div>
<div class="col-md-1 a">10</div>
<div class="col-md-1 a">11</div>
<div class="col-md-1 a">12</div>
</div>
</div>
//为了显示明显的 CSS
.a {
height: 100px;
background-color: #eee;
border: 1px solid #ccc;
}
//总列数都是 12，每列分配多列
<div class="container">
<div class="row">
<div class="col-md-4 a">1-4</div>
<div class="col-md-4 a">5-8</div>
<div class="col-md-4 a">9-12</div>
</div>
<div class="row">
<div class="col-md-8 a">1-8</div>
<div class="col-md-4 a">9-12</div>
</div>
</div>

Raster parameter table

As shown in the picture above, the outermost layer of the grid system distinguishes four browser widths: ultra-small screen (<768px), small screen (>=768px), medium screen (>=992px) and Large screen (>=1200px). The adaptive widths of the inner .container container are: automatic, 750px, 970px and 1170px. Automatic means that if you are on a mobile phone screen, it will occupy one line of display.

//四种屏幕分类全部激活
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
</div>
</div>
//有时我们可以设置列偏移，让中间保持空隙
<div class="container">
<div class="row">
<div class="col-md-8 a">8</div>
<div class="col-md-3 col-md-offset-1 a">3</div>
</div>
</div>
//也可以嵌套，嵌满也是 12 列
<div class="container">
<div class="row">
<div class="col-md-9 a">
<div class="col-md-8 a">1-8</div>
<div class="col-md-4 a">9-12</div>
</div>
<div class="col-md-3 a">
11-12
</div>
</div>
</div>
//可以把两个列交换位置，push 向左移动，pull 向右移动
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3 a">9</div>
<div class="col-md-3 col-md-pull-9 a">3</div>
</div>
</div>

The above is the relevant information for the BootStrap grid system. I hope it will be helpful to everyone!