Bootstrap Grid System

Http://www.cnblogs.com/linjiqin/p/3559800.html

Bootstrap Grid System

Directory
1. Introduction
2. Grid options
3. Column Offset
4. Nested columns
5. Column sorting

1. Introduction
The bootstrap incorporates a responsive, mobile-first streaming grid system that is automatically divided into up to 12 columns as the screen device or viewport (viewport) size increases. It includes easy-to-use pre-defined Classe, and powerful mixin for generating more semantic layouts.

2. Grid options
Bootstrap3.x uses four raster options to form a grid system, four options on the official website such as, many people do not understand, here with you to explain the difference between the four grid options, in fact, only one is suitable for different sizes of screen equipment . We look at the class prefix this, we would like to name these four raster options, they are Col-xs, COL-SM, COL-MD, COL-LG, we know English, LG is the abbreviation of large, MD is the abbreviation of Mid, SM is the abbreviation of small, XS is the abbreviation of * * *. This designation reflects the different screen widths that these classes adapt to. Here we introduce the characteristics of these classes respectively.

The following table provides a detailed view of how the bootstrap grid system works on a variety of screen devices.

3. Column Offset
Use the. col-md-offset-* to offset columns to the right. These classes add all columns to the left margin of the column by using the * selector. For example,. col-md-offset-4 moves. Col-md-4 to the right by 4 column widths.

4. Nested columns
In order to use the built-in rasters to nest content, add a new. Row and a series of. col-md-* columns to the already existing. col-md-* column. the columns that are included in the nested row should be equal to two.

5. Column sorting
By using the. col-md-push-* and. col-md-pull-*, you can easily change the order of the columns.

Case

<%@ page language= "java" pageencoding= "UTF-8"%><% String Path = Request.getcontextpath ();%><! DOCTYPE html>
Demo effect
Bootstrap Grid System