Shulou(Shulou.com)06/03 Report--

Bootstrap css style design example analysis, I believe that many inexperienced people do not know what to do, so this article summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

Due to the needs of the project, I intend to learn the bootstrap framework. It is not difficult to understand the framework before, but there are still a lot of things involved. If you want to master it, you should practice more.

One: what is bootstrap?

What is bs? That is, the standardized framework tool built on the front-end page has been written in css.js style and only needs to be used.

How do I use bs? Mainly through the use of different classes to increase the effect, each category, the corresponding function is different.

Benefits of bs: increased development efficiency, more beautiful page design, and support for responsive development.

Second: css style design

1: based on Html documents

Bootstrap references some of the html elements, so the header needs to be written as the sample column shown below.

-contains HTML5 document statements, and all browsers open standard mode Bootstrap Hello, world!

2: grid system layout

Layout the content by setting rows and columns. Bootstrap sets the page to 12 columns. Layout by changing the number of columns, such as setting three columns of equal width:

JavaScript Code copies content to the clipboard

-- col-xs-4: refers to small devices less than 768px 11-- col-sm-4: refers to > = 768px devices 22-- col-md-4: refers to > = 992px devices 33-- col-lg-4: value 1200px devices 11 22 33 11 22 33 11 22 33

There are four ways to write css net format, which are mainly used in the resolution of different devices.

2: translate the column

Use offset for panning. That is, the number of columns translated.

11 22 33 Murray-refers to 33 translated to the right by two columns 11 22 33 11 22 33

The effect is as follows:

33 because two columns were translated, it could not meet its requirement of occupying four columns, so it was squeezed to the next row to occupy four columns. To put it simply, it is equivalent to moving the entire div block to the right.

3: nested column

That is, nesting columns in the grid column. Let's make a comparison.

XML/HTML Code copies content to the clipboard

11 22 33 11 11 22 33

The effect is as follows:

[object Object] did you find a problem? Why is there no equal distribution of 8 in the above?

When the device > = 992px. The effect is as follows:

The above two categories represent different resolutions. Col-md-12 now means that each column has a unique row, that is, 12 columns.

After reading the above, have you mastered the method of example analysis of css style design in bootstrap? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.