bootstrap< basic two > grid system

Original:bootstrap< basic two > grid system

Bootstrap provides a responsive, mobile-first streaming grid system that is automatically divided into up to 12 columns as the screen or viewport (viewport) size increases. What is a grid?

Excerpt from Wikipedia:

in a planar design, a grid is a structure (usually two-dimensional) consisting of a series of intersecting lines (vertical, horizontal) that are used to organize the content. It is widely used in design layout and content structure in print design. In web design, it is a way to quickly create consistent layouts and to use HTML and CSS efficiently.

Simply put, the grid in web design is used to organize content, make it easy to navigate, and reduce the load on the client side.

What is the Bootstrap grid system?

Bootstrap the description of the grid system in the official documentation:

The

Bootstrap includes a responsive, mobile-first, non-fixed grid system that scales appropriately to 12 columns as the device or viewport size increases. It contains pre-defined classes for simple layout options, as well as powerful hybrid classes for generating more semantic layouts.

Let's take a look at the above statement. Bootstrap 3 is mobile-first, in this sense, the 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 and desktops.

Mobile device First Policy

• Content
  • Decide what is most important.
• Layout
  • Design a smaller width first.
  • The basic CSS is mobile device first, media query is for tablets, desktop computers.
• Progressive enhancement
  • Add elements as the screen size increases.

The corresponding grid system is automatically divided into up to 12 columns as the screen or viewport (viewport) size increases.

1	1	1	1	1	1	1	1	1	1	1	1
4				4				4
4				8
6						6
12

How the Bootstrap grid system works

The grid system creates a page layout with a series of rows and columns containing content. The following is a list of how the Bootstrap grid system works:

• The row must be placed within the . Container class to obtain the appropriate alignment (alignment) and padding (padding).
• Use rows to create a horizontal group of columns.
• Content should be placed in a column, and only columns can be direct child elements of the row.
• Predefined grid classes, such as . Row and . Col-xs-4, can be used to quickly create a grid layout. The less hybrid class can be used for more semantic layouts.
• Columns create gaps between column contents by padding (padding). The padding is negative from the margin (margin) on the . Rows , which represents the row offsets for the first and last columns.
• The grid system is created by specifying the 12 available columns that you want to span. For example, to create three equal columns, use three . col-xs-4.

Media Enquiry

Media queries are a very chic "conditional CSS rule." It only applies to some CSS based on certain conditions. If those conditions are met, the appropriate style is applied.

Media queries in Bootstrap allow you to move, show, and hide content based on the viewport size. The following media queries are used in the less file to create key threshold thresholds for the Bootstrap grid system.

/* Ultra small device (mobile, less than 768px) *//* Bootstrap No media query by default *//* small device (tablet, 768px) */@media (min-width: @screen-sm-min) {...} /* medium device (desktop PC, 992px) */@media (min-width: @screen-md-min) {...} /* Large equipment (large desktop computer, 1200px) */@media (min-width: @screen-lg-min) {...}

We also sometimes include max-widthin the media query code, which limits the effect of CSS to a smaller screen size.

@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) {...}

Media queries have two parts, first a device specification, and then a size rule. In the above case, the following rules are set:

Let's take a 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 occurs if the screen width is less than the @screen-sm-max.

Grid options

The following table summarizes how the Bootstrap grid system works across multiple devices:

Ultra-Small device mobile phone (<768px)	Small Device Tablet PC (≥768PX)	Medium Equipment Desktop PC (≥992PX)	Large Equipment Desktop PC (≥1200px)
Grid behavior	It's always horizontal.	Start with a fold, the breakpoint above is horizontal	Start with a fold, the breakpoint above is horizontal	Start with a fold, the breakpoint above is horizontal
Maximum container width	None (Auto)	750px	970px	1170px
Class Prefix	. col-xs-	. col-sm-	. col-md-	. col-lg-
Column	12	12	12	12
Maximum column width	Auto	60px	78px	95px
Gap width	30px (Each side of a column is 15px respectively)	30px (Each side of a column is 15px respectively)	30px (Each side of a column is 15px respectively)	30px (Each side of a column is 15px respectively)
can be nested	Yes	Yes	Yes	Yes
Offset amount	Yes	Yes	Yes	Yes
Column sort	Yes	Yes	Yes	Yes

Basic grid structure

Here is the basic structure of the Bootstrap grid:

<div class= "Container" >   <div class= "Row" >      <div class= "col-*-*" ></div>      <div class= "col-*-*" ></div>         </div>   <div class= "Row" >...</div></div><div Class= "Container";

Responsive column Resets

The following instance contains 4 meshes, but we cannot determine the location of the grid when we browse the small device.

In order to solve this problem, you can use . ClearfixClass and a responsive utility, as shown in the following example:

<! DOCTYPE html>style="Background-color: #dedef8; Box-shadow:inset 1px-1px 1px #444, inset-1px 1px 1px #444;"> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class= "Col-xs-6 col-sm-3"style="background-color: #dedef8; box-shadow:inset 1px-1px 1px #444, inset-1px 1px 1px #444;"> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed Doeiusmod tempor incididunt ut labore et dolore magna Aliqua. UT enim ad minim veniam, quis nostrud exercitation Ullamco laboris nisi ut aliquip ex ea commodo c         Onsequat. </p> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed Doeiusmod tempor incididunt ut. </p> </div> <div class= "Clearfix visible-xs" ></div> <div class= "Col-xs-6 col-sm- 3 "style="Background-color: #dedef8; Box-shadow:inset 1px-1px 1px #444, inset-1px 1px 1px #444;"> <p>ut enim ad minim veniam, quis nostrud exercitation Ullamco laboris nisi Ut aliquip ex ea commodo consequat          . </p> </div> <div class= "Col-xs-6 col-sm-3"style="background-color: #dedef8; box-shadow:inset 1px-1px 1px #444, inset-1px 1px 1px #444;"> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed Doeiusmod tempor incididunt ut labore et dolore magna Aliqua. Ut enim ad minim</p> </div> </div></div></body>
Adjust the window size on your browser to see changes, or see the effects on your phone.
Offset column
Offset is a useful feature for a more professional layout. They can be used to make more room for the column. For example, the. col-xs=* class does not support offsets, but they can be implemented simply by using an empty cell.
In order to use offsets on large-screen displays, use the . col-md-offset-* class. These classes increase the left margin (margin) of a column by the  column, where the * range is from 1 to one.
In the following example, we have <div class= "col-md-6"; </div> We will use the . col-md-offset-3 class to center the Div.
<! DOCTYPE html>          style="background-color: #dedef8; Box-shadow:          inset 1px-1px 1px #444 , inset-1px 1px 1px #444;" >         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit             .          </p>      </div>   </div></div></body>
The results are as follows:

Nested columns
In order to nest the default grid in the content, add a new . Rowand add a set of . col-md-* columns within an existing . col-md-* column. Rows that are nested should contain a set of columns that cannot exceed 12 (in fact, you do not have to fill 12 columns).
In the following example, the layout has two columns, and the second column is divided into two rows of four boxes.
<! DOCTYPE html>background-color: #dedef8; box-shadow:inset 1px-1px 1px #444, inset-1px 1px 1px #444;"> background-color: #dedef8; box-shadow:inset 1px-1px 1px #444, inset-1px 1px 1px #444;> Background-color: #B18904; Box-shadow:inset 1px-1px 1px #444, inset-1px 1px 1px #444;"> <p>Consectetur Art Party Tonx culpa semiotics.               Pinterest Assumenda Minim Organic quis. </p> </div> <div class= "col-md-6" style= "Background-color: #B18904; Box-shadow:inset 1px-1px 1px #444, inset-1px 1px 1px #444;"> <p> sed Doeiusmod tempor incididunt ut labore et dolore magna Aliqua. UT enim ad minim veniam, quis nostrud exercitation Ullamco laboris nisi ut aliquip ex ea commodo consequ               At. </p> </div> </div> <div class= "Row" > <div class= "col-md-6 "Style="Background-color: #B18904; Box-shadow:inset 1px-1px 1px #444, inset-1px 1px 1px #444;"> <p>quis nostrud exercitation Ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div class= "col-md-6" style= "Background-color: #B18904; Box-shadow:inset 1px-1px 1px #444, inset-1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed Doeiusmod tempor incididunt ut labore et dolore magna Aliqua. Ut enim ad minim.</p> </div> </div> </div> </div></div></body>
The results are as follows:

Column sort
Bootstrap Grid system Another perfect feature is that you can easily write columns in one order, and then display the columns in a different order.
You can easily change the order of the built-in grid columns with the . col-md-push-* and . col-md-pull-* classes, where the * range is from  1 to one.
In the following example, we have two columns of layout, the left column is very narrow, as the sidebar. We will use the . col-md-push-* and . col-md-pull-* classes to swap the order of the two columns.
<! DOCTYPE html>Background-color: #dedef8; Box-shadow:inset 1px-1px 1px #444, inset-1px 1px 1px #444;">I'm on the left .</div> <div class= "col-md-8" style= "Background-color: #dedef8; Box-shadow:inset 1px-1px 1px #444, inset-1px 1px 1px #444;">I'm on the right .</div> </div><br> <div class= "Row" > <p> sort </p> <div class= "Col-md-4 C Ol-md-push-8 "style="Background-color: #dedef8; Box-shadow:inset 1px-1px 1px #444, inset-1px 1px 1px #444;">I'm on the left .</div> <div class= "Col-md-8 col-md-pull-4"style="Background-color: #dedef8; Box-shadow:inset 1px-1px 1px #444, inset-1px 1px 1px #444;">I'm on the right .</div> </div></div></body>
The results are as follows:
Series Articles:Bootstrap < Fundamentals > CSS Overview
bootstrap< Basic two > network system
bootstrap< Basic three > typesetting
bootstrap< basic Four > code
Bootstrap < Fundamentals five > forms
bootstrap< basic six > form
Bootstrap < basic seven > button
Bootstrap < basics eight > pictures
bootstrap< Basic Nine > Auxiliary class
bootstrap< Basic 10 > responsive Utility
bootstrap< Basic 11 > Font icons (glyphicons)
Bootstrap < Basics 12 > drop-down menu (dropdowns)
bootstrap< Basic 13 > button Group
bootstrap< Basic 14 > button drop-down menu
bootstrap< Basic 15 > Input Frame Group
bootstrap< basic 16 > Navigation elements
bootstrap< basic 17 > Navigation Bar Bootstrap < basic 18 > Breadcrumb navigation (Breadcrumbs) Bootstrap < Fundamentals 19 > Pagination bootstrap< Basics 20 > Tags Bootstrap < fundamentals 21 > badges (Badges) Bootstrap < basic 22 > Oversized screen (Jumbotron) Bootstrap < basic 23 > page title Header) bootstrap< Basic 24 > Thumbnail Bootstrap < basic 25 > Warning (Alerts) Bootstrap < basic 26 > progress bar
bootstrap< basic two > grid system