In this lesson, we mainly learn about Bootstrap 's grid system, which provides a set of responsive, mobile-first streaming
format grid system.
one. mobile first
In the HTML5 project, we did a mobile project. It has a very important meta , used to set the screen and device width and whether to run user scaling, and scaling issues.
// respectively: the screen width is consistent with the device, the initial zoom ratio, the maximum zoom ratio and the user is prohibited from zooming
<metaname="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1,user-scalable=no">
two. layout container
Bootstrap needs to wrap a .container container for the page content and grid system . due to padding etc.
Because of the properties, these two container classes cannot be nested within each other. // fixed width
<divclass="container">
...
</div>
//100% width
<divclass="container-fluid">
...
</div>
In the grid system, the browser automatically allocates up to 12 columns as the screen size increases or decreases. Create a page layout by combining a series of rows and columns . It works as follows:
1. " row " must be contained in .container (fixed width) or .container -fluid ( 100%
width) to give it proper alignment ( aligment ) and padding . 2. Create a set of " columns " in the horizontal direction through " rows " . 3. Your content should be placed in the " column ( column )" , and only "column ( column )" can be used as
row ( row )" direct child element.
4. Predefined classes like .row and .col-xs-4 can be used to quickly create grid layouts. The mixins defined in the Bootstrap source code can also be used to create semantic layouts.
5. Create a column-to-column gap ( gutter ) by setting the padding property for " column ( column )" .
By setting a negative margin for the .row element to offset the padding set for the .container element ,
It also indirectly offsets the padding for the "column ( column )" contained in the " row ( row )" .
6. Negative margins are the reason why the example below protrudes outwards. The contents of the grid columns line up.
7. Columns in the grid system are represented by specifying a value from 1 to 12 to represent the range that they span. For example, three equal-width columns can be created using three .col-xs-4s .
8. If a " row ( row )" contains a "column ( column )" greater than 12 , the redundant " column ( column )" element 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 demarcation point size, and overrides the grid class for small screen devices. Therefore, applying any .col-md-* grid class on an element works for devices with a screen width greater than or equal to the breakpoint size, and overrides the grid class for small screen devices. Therefore, applying any .col-lg-* on an element does not exist and also affects large screen devices.
// Create a responsive row
<divclass="container">
<divclass="row">
...
</div>
</div>
// Create a responsive row with up to 12 columns
<divclass="container"> <div class="row">
<div class="col-md-1 a">1</div><div class="col-md-1 a">2</div> <divclass="col-md-1 a">3</div> <div class="col-md-1a">4</div> <div class="col-md-1 a">5</div><div class="col-md-1 a">6</div> <divclass="col-md-1 a">7</div> <div class="col-md-1a">8</div> <div class="col-md-1 a">9</div><div class="col-md-1 a">10</div> <divclass="col-md-1 a">11</div> <div class="col-md-1a">12</div>
</div>
</div>
// To display obvious CSS
.a {
height:100px;
background-color: #eee; border:1px solid #ccc;
}
// The total number of columns is 12 , and each column is assigned multiple columns
<divclass="container"> <div class="row">
<div class="col-md-4a">1-4</div> <div class="col-md-4a">5-8</div> <div class="col-md-4a">9-12</div>
</div>
<divclass="row">
<div class="col-md-8a">1-8</div> <div class="col-md-4a">9-12</div>
</div>
</div>
The outermost layer of the grid system distinguishes browsers with four widths: ultra-small screen (<768px) , small screen
(>=768px) , medium screen (>=992px) and large screen (>=1200px) . The adaptive width of the inner .container container is: auto, 750px , 970px and 1170px . Automatic means that if you are a mobile phone screen, it will be displayed on a full line.
// All four screen categories are activated
<divclass="container"> <div class="row">
<divclass="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-12a">4</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12a">4</div> <div class="col-lg-3 col-md-4 col-sm-6col-xs-12 a">4</div> <div class="col-lg-3 col-md-4col-sm-6 col-xs-12 a">4</div> <div class="col-lg-3col-md-4 col-sm-6 col-xs-12 a">4</div> <divclass="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div> <divclass="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-12a">4</div> <div class="col-lg-3 col-md-4 col-sm-6col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4col-sm-6 col-xs-12 a">4</div> <div class="col-lg-3col-md-4 col-sm-6 col-xs-12 a">4</div>
</div>
</div>
// Sometimes we can set the column offset to keep a gap in the middle
<divclass="container"> <div class="row">
<divclass="col-md-8 a">8</div>
<div class="col-md-3col-md-offset-1 a">3</div> </div>
</div>
// It can also be nested, and the embedding is also 12 columns <divclass="container"> <div class="row">
<divclass="col-md-9 a">
<div class="col-md-8a">1-8</div> <div class="col-md-4a">9-12</div>
</div>
<div class="col-md-3a"> 11-12
</div>
</div>
</div>
// You can swap the two columns, push to move left, pull to move right
<divclass="container"> <div class="row">
<div class="col-md-9 col-md-push-3a">9</div> <div class="col-md-3 col-md-pull-9a">3</div>
</div>
</div>