_javascript Techniques of CSS12 grid system for bootstrap overall framework

1. Overall architecture

Bootstrap framework Public Six parts: (CSS component and JS plugin is its manifestation, the rest is the foundation support platform)

Forms of Expression
CSS Components
JS Plugin
Foundation Support Platform
CSS12 Grid system
Infrastructure Layout Components
Jquery
Response-Type Design

1.1 CSS12 Grid System

12 Grid system is the core function of bootstrap, and it is also a realization way of the core concept of responsive design.

1.1.1 Realization Principle

Grid Layout principle: Define container size, divide 12 points evenly, adjust inside and outside margin, finally combine with media query, make powerful response type grid system.

1. The outermost border, along with the response-type thinking, distinguishes four types of browsers, pixel demarcation point 768px, 992px, 1200px
2. The border of the second layer, that is, the. Container style container, for four browser widths, values are automatic, 750px, 970px, 1170px

Source code
  . Container {
   padding-right:15px;
   padding-left:15px;
   Margin-right:auto;
   Margin-left:auto;
  }
  @media (min-width:768px) {
   . container {
    width:750px
   }}
  }
  @media (min-width:992px) {
   . container {
    width:970px
   }}
  }
  @media (min-width:1200px) {
   . container {
    width:1170px
   }}
  }

Bar No. 3.1, left inner margin and right inner margin is 15px, is 12 col-lg-1, no row, it will

Source code
, Col-xs-1, Col-sm-1,. Col-md-1, Col-lg-1, Col-xs-2, Col-sm-2,. Col-md-2,. col-lg-2,. col-xs-3. Col-md-3, Col-lg-3, col-xs-4, Col-sm-4, col-md-4,. col-lg-4, Col-xs-5,. col-sm-5, Col-md-5,. Col-sm-6, Col-md-6, col-lg-6, Col-xs-7, col-sm-7,. col-md-7, Col-lg-7,. col-xs-8, Col-sm-8,. Col-xs-9, Col-sm-9, col-md-9, col-lg-9, col-xs-10, col-sm-10, col-md-10,. col-lg-10,. col-xs-11. Col-md-11, col-lg-11,. col-xs-12,. col-sm-12,. col-md-12,. col-lg-12 {
   position:relative;
   min-height:1px;
   padding-right:15px;
   padding-left:15px;
  }

 <! DOCTYPE html>  

Bar No. 4.2, which is the definition of row container, Margin-left and Margin-right are -15px, combining row and column, forming the effect of 3rd bar, that is, the effect of the left and right width full.

Source code 
. Row { 
margin-right: -15px; 
Margin-left: -15px; 
}

There is a row, there will be no margin

 <! DOCTYPE html>  

Basic usage of 1.1.2

1. Column combination

<div class= "Container" style= "border:1px solid black" >
  <div class= "Row" >
    <div class= "Col-lg-8" "Style=" border:1px solid black ">col-lg-8</div> <div class=" col-lg-4 "style=" border:1px solid "
    >col-lg-4</div>
  </div>
  <div class= "Row" >
    <div class= "col-lg-6" style= "border" : 1px solid black ">col-lg-6</div>
    <div class=" col-lg-6 "style=" border:1px solid black ">col-lg-6 </div>
  </div>
</div>

The implementation is simple, which involves two CSS features: Left float and width percent

SOURCE
@media (min-width:1200px) {
 . col-lg-1,. Col-lg-2,. col-lg-3, Col-lg-4,. col-lg-5,. col-lg-6,. Col-lg-7,. Col-lg-8, Col-lg-9,. col-lg-10,. col-lg-11,. col-lg-12 {
  float:left;
 }
 . col-lg-12 {
  width:100%
 }
 . col-lg-11 {
  width:91.66666667%
 }
 . col-lg-10 {
  width:83.33333333%
 }
 . col-lg-9 {
  width:75%
 }
 . col-lg-8 {
  width:66.66666667%
 }
 . col-lg-7 {
  width:58.33333333%
 }
 . col-lg-6 {
  width:50%
 }
 . col-lg-5 {
  width:41.66666667%
 }
 . col-lg-4 {
  width:33.33333333%
 }
 . col-lg-3 {
  width:25%
 }
 . col-lg-2 {
  width:16.66666667%
 }
 . col-lg-1 {
  width:8.33333333%
 }
}

2. Column Offset

We do not want the adjacent columns to be together, using the grid system's column offset. COL-XS (SM,MD,LG)-offset-* function, no more definition margin

<div class= "Row" > <div class= "col-lg-8 col-lg-offset-2" style= "border:1px solid black
  " >col-lg-8 col-lg-offset-2</div>
  <div class= "col-lg-2 col-lg-offset-2" style= "border:1px solid black" >col-lg-2 Col-lg-offset-2</div>
</div>

Source code
. col-lg-offset-12 {
 margin-left:100%
}
. col-lg-offset-11 {
 margin-left:91.66666667%
}
. col-lg-offset-10 {
 margin-left:83.33333333%
}
. col-lg-offset-9 {
 margin-left:75%
}
. col-lg-offset-8 {
 margin-left:66.66666667%
}
. col-lg-offset-7 {
 margin-left:58.33333333%
}
. col-lg-offset-6 {
 margin-left:50%
}
. col-lg-offset-5 {
 margin-left:41.66666667%
}
. col-lg-offset-4 {
 margin-left:33.33333333%
}
. col-lg-offset-3 {
 margin-left:25%
}
. col-lg-offset-2 {
 margin-left:16.66666667%
}
. col-lg-offset-1 {
 margin-left:8.33333333%
}
. col-lg-offset-0 {
 margin-left:0;
}

3. Column nesting

Grid systems also support column nesting, where one or more rows can be declared in a column. The row width of the inner nesting is 100%, which is the width of the current outer column

<div class= "Row" >
  <div class= "col-lg-8" style= "border:1px solid black" >col-lg-8</div>
  <div class= "col-lg-4" style= "border:1px solid black" >
    <div class= "Row" >
      <div class= "Col-lg-6" >col-lg-6</div>
      <div class= "col-lg-6" >col-lg-6</div>
    </div>
  </div>
</div>

4. Column sorting

Column sorting is to change the direction of the column, that is, to change the float, and set the floating distance. You can pass. Col-xs (SM,MD,LG)-pull (push)-*
All columns are set to a left float, and positioning is done by setting both the right and ieft. Push sets Left,pull to set right

In fact, just using the float,left,right three attributes to achieve this effect

Source code. col-lg-pull-12 {right:100%}. col-lg-pull-11 {right:91.66666667%;}. col-lg-pull-10 {right:83.33333333%; }. col-lg-pull-9 {right:75%}. col-lg-pull-8 {right:66.66666667%;}. col-lg-pull-7 {right:58.33333333%;}. col-l  g-pull-6 {right:50%}. col-lg-pull-5 {right:41.66666667%;}. col-lg-pull-4 {right:33.33333333%;}. col-lg-pull-3 {right:25%}. col-lg-pull-2 {right:16.66666667%;}. col-lg-pull-1 {right:8.33333333%;}. col-lg-pull-0 {Right
: auto; }. col-lg-push-12 {left:100%}. col-lg-push-11 {left:91.66666667%;}. col-lg-push-10 {left:83.33333333%;}. col- 
 lg-push-9 {left:75%}. col-lg-push-8 {left:66.66666667%;}. col-lg-push-7 {left:58.33333333%;}. col-lg-push-6 {
left:50%; }. col-lg-push-5 {left:41.66666667%}. col-lg-push-4 {left:33.33333333%;}. col-lg-push-3 {left:25%;}. col-lg-p

 ush-2 {left:16.66666667%}. col-lg-push-1 {left:8.33333333%}. col-lg-push-0 {Left:auto;}

1.1.3 Response Grid

Known col-xs-* col-sm-* col-md-* col-lg-*

1. Cross device combination definition
A style, such as col-md-9, does not work outside of its defined size, for example, on a small or large screen, all styles with MD are not in effect. We can apply different styles on one element to fit different sizes of screens.

<div class= "Container" style= "border:1px solid black" >
  <div class= "Row" >
    <div class= "Col-xs-6" Col-sm-3 "style=" border:1px solid black "> Div1 col-xs-6 col-sm-3 qwerwrgwefhsdgfsdfg</div>-<div class=
    "Col-xs-6 col-sm-3" style= "border:1px solid black" > Div2 col-xs-6 "col-sm-3</div> <div class=
    " Clearfix Visible-xs "></div>
    <div class=" col-xs-6 col-sm-3 "style=" border:1px solid black "> Div3 col-xs-6 col-sm-3</div>
    <div class= "col-xs-6 col-sm-3" style= "border:1px solid black" > Div4 col-xs-6 </div>
  </div>
</div>

As shown in the figure, because the Div3, but the div1 is too high, then div3 right next to each other.
So you need to use the Clearfix style to clear the float, but only if it's shown on a miniature screen (with Visible-xs control).

<div class= "Container" style= "border:1px solid black" >
  <div class= "Row" >
    <div class= "Col-xs-6" Col-sm-3 "style=" border:1px solid black "> Div1 col-xs-6 col-sm-3 qwerwrgwefhsdgfsdfg</div>-<div class=
    "Col-xs-6 col-sm-3" style= "border:1px solid black" > Div2 col-xs-6 "col-sm-3</div> <div class=
    " Clearfix Visible-xs "></div>
    <div class=" col-xs-6 col-sm-3 "style=" border:1px solid black "> Div3 col-xs-6 col-sm-3</div>
    <div class= "col-xs-6 col-sm-3" style= "border:1px solid black" > Div4 col-xs-6 </div>
  </div>
</div>

Source code. Clearfix:before, Clearfix:after,. Dl-horizontal dd:before,. Dl-horizontal dd:after,. Container:before. Container:after, Container-fluid:before,. Container-fluid:after, Row:before, Row:after,. Form-horizontal. Form-group:before, Form-horizontal Form-group:after,. Btn-toolbar:before, Btn-toolbar:after,. btn-group-vertical > Btn-group:before, btn-group-vertical > Btn-group:after,. nav:before,. Nav:after,. Navbar:before,. NavBar:
After,. Navbar-header:before,. Navbar-header:after, Navbar-collapse:before,. Navbar-collapse:after,. Pager:before, Pager:after, Panel-body:before,. Panel-body:after,. Modal-header:before,. Modal-header:after,. Modal-footer:
 Before,. modal-footer:after {display:table; Content: ""; Clearfix:after, Dl-horizontal Dd:after,. Container:after, Container-fluid:after,. Row:after,. Form-horizontal. Form-group:after, Btn-toolbar:after,. btn-group-vertical > Btn-group:after,. nav:after,. Navbar:after. Navbar-header:after,. Navbar-collApse:after, Pager:after,. Panel-body:after,. Modal-header:after,. modal-footer:after {clear:both;}//Source code @media (max-
 WIDTH:767PX) {. visible-xs {display:block!important;
 } table.visible-xs {display:table!important;
 } tr.visible-xs {Display:table-row!important;
 } Th.visible-xs, Td.visible-xs {Display:table-cell!important;

 }
}

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.