Building a simple Web page with Bootsharp two--grid system

Little White. When I first started using Bootsharp as a Web page, I didn't know what grid systems, containers, what responsive layouts, and viewports (viewport). Faith does not understand on the Internet to find answers, plus Bootsharp official online and a lot of ready-made examples, their own try, probably understand, what is the flow grid system.

A raster system is used to create a page layout with a series of rows and columns (column), and your content can be placed in these created layouts.

Bootstrap provides a responsive, mobile-first streaming raster system that is automatically divided into up to 12 columns as the screen or viewport (viewport) size increases. If a row contains columns greater than 12, the elements of the extra column (columns) are arranged as a whole on a different line. The row must be included in the. container (fixed width) or. Container-fluid (100% width), used as a streaming layout container. Container-fluid ability to set the screen grid layout to a 100%-width layout, That is to say. Container will make the layout width fixed, there will be a bias in the display of different devices, and in. Container-fluid, will be full screen display.

The. Container class is used to fix widths and supports a container for responsive layouts.

class="container">  ... </div>

The. Container-fluid class is used for containers of 100% widths that occupy all viewports (viewport).

class="container-fluid">  ... </div>

In a raster system, the following media queries are used in the less file to create a critical threshold for the cutoff point.

/* Ultra small screen (mobile phone, less than 768px) */
/* There is no media query related code, because this is the default in Bootstrap (remember that Bootstrap is a mobile device first?). ） */

/* small screen (flat, greater than or equal to 768px) */
@media (min-width: @screen-sm-min) {...}

/* Medium screen (desktop monitor, greater than or equal to 992px) */
@media (min-width: @screen-md-min) {...}

/* Large screen (large desktop monitor, greater than or equal to 1200px) */
@media (min-width: @screen-lg-min) {...}

The following is a basic grid system for creating a large screen (col-lg-*):

CSS section:
{        background-color: yellow;         color: blue;         text-align: Center;         Border: 1px solid #000;    }

HTML section:
<Divclass= "Container-fluid">        <Divclass= "Row">          <Divclass= "Col-lg-1">. col-lg-1</Div>          <Divclass= "Col-lg-1">. col-lg-1</Div>          <Divclass= "Col-lg-1">. col-lg-1</Div>          <Divclass= "Col-lg-1">. col-lg-1</Div>          <Divclass= "Col-lg-1">. col-lg-1</Div>          <Divclass= "Col-lg-1">. col-lg-1</Div>          <Divclass= "Col-lg-1">. col-lg-1</Div>          <Divclass= "Col-lg-1">. col-lg-1</Div>          <Divclass= "Col-lg-1">. col-lg-1</Div>          <Divclass= "Col-lg-1">. col-lg-1</Div>          <Divclass= "Col-lg-1">. col-lg-1</Div>          <Divclass= "Col-lg-1">. col-lg-1</Div>        </Div>        <Divclass= "Row">          <Divclass= "Col-lg-8">. col-lg-8</Div>          <Divclass= "Col-lg-4">. col-lg-4</Div>        </Div>        <Divclass= "Row">          <Divclass= "Col-lg-4">. col-lg-4</Div>          <Divclass= "Col-lg-4">. col-lg-4</Div>          <Divclass= "Col-lg-4">. col-lg-4</Div>        </Div>        <Divclass= "Row">          <Divclass= "Col-lg-6">. col-lg-6</Div>          <Divclass= "Col-lg-6">. col-lg-6</Div>        </Div>    </Div>

Under. Container-fluid, all columns (column) are placed inside the. Row. The effect is as follows:

Divides the page by 12 as the standard, reaching the effect of dividing the entire page.

In mobile, tablet, desktop, use. col-xs-*,. col-sm-*,. col-md-* class for a more dynamic and powerful layout.

<Divclass= "Row"> 　　 <Divclass= "col-xs-12 col-sm-6 col-md-8">. col-xs-12. col-sm-6. col-md-8</Div> 　　 <Divclass= "Col-xs-6 col-md-4">. col-xs-6. col-md-4</Div></Div>
<Divclass= "Row">   <Divclass= "Col-xs-6 col-sm-4">. col-xs-6. col-sm-4</Div>   <Divclass= "Col-xs-6 col-sm-4">. col-xs-6. col-sm-4</Div>   <!--Optional: If the content height does not match, you can clear the XS bar -   <Divclass= "Clearfix visible-xs-block"></Div>   <Divclass= "Col-xs-6 col-sm-4">. col-xs-6. col-sm-4</Div></Div>

If you use the above four raster classes in your Web page, you may encounter a problem with column height mismatches, which you can use using the. Clearfix and responsive tool classes, such as the <div class= above, "Clearfix Visible-xs-block" ></div >.

Building a simple Web page with Bootsharp two--grid system