Get started with BootStrap and use the response. Get started with bootstrap.

Get started with BootStrap and use the response. Get started with bootstrap.
In front-end development, there is actually 40% of the time for layout and writing styles, 30% for writing JS logic interactions, and 30% for testing and debugging bugs. What you can see is, there will be more la S and styles,

 

So there will be a lot of front-end frameworks, such as bootstrap

 

The front-end framework contains a set html layout structure, css style, and some js effects. Theoretically, you do not need to write a line of code. You only need to copy and paste it to implement a static page.

 

Official shameless Introduction: simple, intuitive, and powerful front-end development framework, making web development more rapid and simple.

 

With bootstrap, you can not only write PC pages, but also respond to them.

 

Responsive: Media query and other technologies are used to display different layout structures by detecting different browser sizes. The principle is that media query can detect whether the screen size is within a certain range, if yes, a certain piece of css code can be used to implement structure switching.

 

Boot divides the screen into four categories by default:

 

0-768 xs; 768-992 sm; 992-1200 md; 1200-lg;

 

Boot provides two layout containers, which are used as the outermost element of a large area and will be used together with other layout class names.

 

. Container. container-fluid

 

Container-fluid is 100% in width on any screen

 

Container is always 100% on the xs screen; 768-992, width: 768; 992-1200, width: 992; 1200-width: 1200, always centered

 

Boot provides a raster System (12 raster, gridded, and grid system) that allows us to split a row of space into 12 parts during layout, control the arrangement of elements by setting each element to several portions

 

The row class name can be divided into 12 parts for a row in the container.

 

Col-type-num: determines that an element in a row occupies the num portion when the type screen is displayed.

 

Note that when using these class names, the principle of small screen priority is as follows:

 

When writing a media query style, you should first write the style of the small screen and then the style of the big screen. The small screen parses less css code and has high performance.

Col-type-offset-num sets the offset of an element to the right under a certain screen size. For example, you only need to add the class name.
<Li class = "col-xs-12 col-sm-6 col-md-3 news"> </li> <li class =" col-xs-12 col-sm-6 col-md-3 news "> </li>