Bootstrap grid system and bootstrap Grid System

Bootstrap grid system and bootstrap Grid System

What are the advantages and disadvantages of Bootstrap?
Bootstrap is a front-end framework for rapid development of web applications and websites based on html, css, and javascript.
Advantage: mobile devices are preferred, support mainstream browsers, easy to use, and responsive design
Disadvantages: IE6 is not supported. The class is heavily used, but the class is not semantic enough. The website developed using bootstrap has severe homogeneity.

Bootstrap provides a responsive, mobile device-first streaming grid system. With the increase in the screen or viewport size, the system will automatically be divided into up to 12 columns.

Mobile device Priority Policy

• Content

• Determine what is most important.

• Layout

• A smaller width is preferred.

• Basic CSS is preferred for mobile devices, and media queries are targeted at tablets and desktops.

• Progressive enhancement

• Add elements as the screen size increases.

The responsive mesh system is automatically divided into up to 12 columns as the screen or viewport size increases.

Working principle of the Bootstrap Grid System

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

• Rows must be placed in. ContainerClass to obtain the appropriate alignment and padding ).

• Use rows to create a horizontal group of columns.

• The content should be placed in the column, and only the column can be a direct sub-element of the row.

• Predefined grid classes, such. RowAndCol-xs-4To quickly create a grid layout. The LESS mixing class can be used for more semantic la S.

• A column uses the padding (padding) to create a gap between the column content. The padding is through. RowsThe margin above (margin) is negative, indicating the row offset of the first and last columns.

• The grid system is created by specifying the twelve available columns you want to span. For example, to create three equal columns, use threeCol-xs-4.

• Media Query

  Media queries are very chic "Conditional CSS rules ". It only applies to some CSS based on certain specified conditions. If those conditions are met, apply the corresponding style.

  Media queries in Bootstrap allow you to move, display, and hide content based on the size of the view. The following media queries are used in LESS files to create key demarcation points in the Bootstrap grid system.

  /* Super small device (mobile phone, less than 768px) * // * No media queries by default in Bootstrap * // * Small Device (tablet, starting from 768px) */@ media (min-width: @ screen-sm-min ){...} /* medium-sized device (from a desktop computer, 992px) */@ media (min-width: @ screen-md-min ){...} /* large devices (large desktop computers, starting with pixel) */@ media (min-width: @ screen-lg-min ){...}

• We sometimes includeMax-widthTo limit 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) { ... }

• A media query consists of two parts: a device specification and a size rule. In the above case, the following rules are set:

  Let's look at the following line of code:

  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

• Basic Grid Structure

  The basic structure of the Bootstrap mesh is as follows:

  <div class="container">   <div class="row">      <div class="col-*-*"></div>      <div class="col-*-*"></div>         </div>   <div class="row">...</div></div><div class="container">....

 

If this is not the first time, please kindly advise.