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

This article introduces the principle of grid system in bootstrap3.0, the content is very detailed, interested friends can refer to, hope to be helpful to you.

Grid system (layout)

Bootstrap has a built-in responsive, mobile device-first streaming grid system that automatically divides into up to 12 columns as the screen device or viewport (viewport) size increases.

I'm here to call the grid system in Bootstrap layout. It creates a page layout through a combination of a series of row and column, and then your content can be put into the layout you have created. Here's a brief introduction to how the Bootstrap grid system works:

The row must be included in the .container to give it the appropriate aligment and padding. Use rows (row) to create a set of columns (cpumn) horizontally. Your content should be placed in the cpumn, and only the cpumn can be used as direct child elements of the row (row). Predefined grid class such as Predefined grid classes like .row and .cp-xs-4 can be used to quickly create grid layouts. The mixin defined in the Bootstrap source code can also be used to create a semantic layout. The interval between columns (cpumn) is created (gutter) by setting padding. Then counteract the effect of the padding by setting a negative margin for the first and the last. Columns in a grid system represent the range they span by specifying values from 1 to 12. For example, three columns of equal width can be created using three .cp-xs-4.

DW6 coding implementation

Okay, let's start writing the code. First of all, let's take a look at the editor I used in the previous picture. I used a lot of tools when I was learning Html+CSS at school.

Then create a new HTML document and select the type HTML5

Once created, save it in the same directory as the js and css folders explained in the previous section.

Layout.html is the file I just created. Bootstrap.html is also the first html page created in the previous section.

You can now Copy all the code in Bootstrap.html to the layout.html page.

Then add the following code under the body tag

The code is as follows:

Hello, world!

Area one

Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.

Area two

IfyouworkwithBootstrap'suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter'sCSShinterbasedonless.js.

Area three

Withinthedownloadyou'llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.

These labels should be clear to everyone, the most basic and simple.

After adding, all the code of the layout.html page is as follows

The code is as follows:

Bootstrap

Hello,world!

Area one

Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.

Area two

IfyouworkwithBootstrap'suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter'sCSShinterbasedonless.js.

Area three

Withinthedownloadyou'llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.

Of course, the effect is also very simple, I still put the screenshot on, can be compared.

Optimization 1: we can find that the page effect of the above image occupies the full screen, and we can center the above content through the Bootstrap style class.

The code is as follows:

. The code added above under the body tag

The effect is as follows

You can see that the container class sets the width and allows the content to be displayed in the middle of the page.

Optimization 2: display the three areas in the same row and divide them into three columns on average.

First add a container for the three areas, you can use div, and add a class for div.

Then we add a container div for each small area and a class for div

The simple code implementation is as follows

The code is as follows:

Hello,world!

Area one

Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.

Area two

IfyouworkwithBootstrap'suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter'sCSShinterbasedonless.js.

Area three

Withinthedownloadyou'llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.

The effect is as follows

It is indeed arranged in a row, and then divided into three columns. And then combine the six principles of the grid system above. Do you know a little bit? anyway, I know a lot myself. More complex grid layout pages can be created in the same way. You only need to add the corresponding grid layout class on top of the container used by the layout. For example, if the content occupies six grids, add a cp-xs-6 class, four grids, add a cp-xs-4 class, and then use a container with the row class around the same row.

Mainly learn the layout (grid system), through simple examples to understand how it works.

The classes used are:

1..container: Center alignment is achieved by wrapping the content on the page with .container. Max-width is set for container in different media queries or value ranges to match the grid system.

2..cp-xs-4: this class is divided into three parts by "-". The number of the third part, as a general reference, ranges from 1 to 12. You can divide an area into 12 columns, which should be used in conjunction with the row class.

In fact, this layout is very similar to the Table layout TR rows and TD columns in HTMl.

Temporary understanding of these, the code can be directly copied and pasted to see the effect, of course, the first to prepare the pre-css, js files.

About how the principle of the grid system in bootstrap3.0 is shared here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.