bootstrap< basic two > grid system

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.