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

This article mainly introduces "how to understand Bootstrap3.0 grid system". In daily operation, I believe many people have doubts about how to understand Bootstrap3.0 grid system. The editor consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to understand Bootstrap3.0 grid system". Next, please follow the editor to study!

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 (column) horizontally. Your content should be placed in the column, and only the column can be used as direct child elements of the row (row). Predefined grid class like Predefined grid classes like. Rowand. Col-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 (column) 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 .col-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

Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.

Area two

If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.

Area three

Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.

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

Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.

Area two

If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.

Area three

Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.

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

Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.

Area two

If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.

Area three

Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.

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 col-xs-6 class, four grids, add a col-xs-4 class, and then use a container with the row class around the same row.

At this point, the study on "how to understand the Bootstrap3.0 grid system" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.