BootStap Study Notes (1)-tuohaibei

BootStap Study Notes (1)-tuohaibei Mobile device priority:

To make the developed website friendly to mobile devices and ensure proper drawing and touch screen scaling, you need to add the viewport meat tag to the head of the webpage:

Response Image:

By adding class = "img-responsive" to the image, the image can be better designed for responsive layout;

 Pseudo element

http://www.w3school.com.cn/css/css_pseudo_elements.asp

Bootstrap3 css has a media query request response. max-width is set for container in different media query threshold ranges to match the grid system.

  @media (min-width: 768px) {   .container {      width: 750px;  }

Grid System

A responsive, mobile device-preferred streaming grid system is provided. With the increase in the screen or viewport size, the system will automatically be divided into up to 12 columns.

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. If multiple rows exist, each row must have. row.

My personal summary: If col-sm-* col-md-* col-lg-* is defined at the same time, the matching column mode will be used if there is a match, if col-lg-* is applied in the window and col-lg-* is deleted, col-md-* is used in the window layout -*.

  
It is mainly used for resetting response columns.

Col-md-offset-* you can add * columns to the left margin (margin) of a column.

Use. Col-md-push -*And. Col-md-pull -*Class built-in grid column order to achieve column sorting, with. col-md-push-* is pushed to the left,. Col-md-pull -*Push to the right, irrelevant to their order in html