Bootstrap 3.0 study notes grid system principle

Through the brief introduction in the previous two articles, you have a preliminary understanding of Bootstrap. Since I just want to learn something simple through the Bootstrap official website, I can just make a page that's not too complicated. So if you are a beginner, you might want to take a look. It may be of some help to you. Experts please stay away.

"Bootstrap 3.0 Study Notes" only briefly introduces how to download files and reference downloaded files, and has not yet really entered the front-end design learning. I also saw that many netizens have great interest in Bootstrap 3.0. Some are experts who have used it before, and some are friends and novices who are planning to learn it like me. As for the most common replies, one of them is: I hope there can be a series. Of course, I also hope that I can plan a series well and then follow this outline. However, my ability is limited, so I have to learn according to my own preferences.

Disclaimer: My writing skills are really poor, I hope you can forgive me. If there are any errors, please inform me in time and I will correct them as soon as possible. Of course, I hope more people can learn together.

Grid system (layout)

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

Here I call the grid system in Bootstrap layout. It creates a page layout through a combination of a series of rows and columns, and then your content can be placed in the layout you created. Here is a brief introduction to how the Bootstrap grid system works:

DW6 encoding implementation

Okay, let’s start writing code. First, let’s take a look at the picture of the editor I use. I used this tool a lot when I was learning Html+CSS in school.

Then create a new HTML document and select the type HTML5

After creation, save it in the same directory as the js and css folders 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.

Now you can copy all the code in Bootstrap.html to the layout.html page.

Then add the following code under the body tag

Everyone should be able to understand these labels, they are the most basic and simplest.

After adding, all the codes of layout.html page are as follows

Of course the effect is very simple, I still put the screenshots here so you can compare.

Optimization 1: You can find that the page effect in the above picture fills the entire screen. We can use the Bootstrap style class to center the content above.

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 evenly.

First, add a container for the three areas. You can use div and add a class <div > to the div.

Then we add a container div for each small area and add a class <div > to the div

The simple code is as follows

The effect is as follows

It is indeed arranged in a row, and then divided into three columns. Let’s combine it with the six principles of the grid system above. Do you understand a little bit now? Anyway, I understand a lot. In the same way, you can create more complex grid layout pages. Just add the corresponding grid layout class to the container used by the layout. For example, if the content takes up 6 grids, then add a col-xs-6 class, if it takes up 4 grids, add a col-xs-4 class, and then use containers with row classes around the same row.

Summarize

This section mainly studies the layout (grid system) and uses simple examples to understand how it works.

The classes used are:

1..container: Use .container to wrap the content on the page to achieve center alignment. The max-width of the container is set in different media queries or value ranges to match the grid system.

2..col-xs-4: This class is divided into three parts by "-". The number in the third part is a general term, and its range is 1 to 12. That is, you can divide an area into 12 columns. This 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.

That’s all for the moment. You can just copy and paste the code to see the effect. Of course, you must first prepare the css and js files.