Bootstrap3.0 second round (grid system principle)

1. BootStrap learning http://www.cnblogs.com/aehyok/p/3381651.html from now on

2. Bootstrap3.0 learning first round (Getting Started) http://www.cnblogs.com/aehyok/p/3398359.html

Through a brief introduction to the previous two blog posts, we have a preliminary understanding of Bootstrap. Since I just want to do some simple learning on the Bootstrap official website, I can just create a page that is not too tricky. So if you are a newbie, you may be able to take a look. This is a little helpful to you.

In the first round of learning, I also briefly introduced how to download files and reference the files to be downloaded. I have not yet entered the front-end design study. I have also seen that many bloggers are also very interested in Bootstrap3.0. I have been using Daniel before, And I am planning to learn about his friends and dishes like me. As for the many replies, I hope to have a Series. Of course, I also hope that I can plan a series well and follow the outline. However, I have limited ability, so I had to follow my preferences to learn.

Statement:I hope you can forgive me for your poor writing skills. If any error occurs, please notify me in time and I will make corrections in the shortest possible time. Of course, I hope more people can come and learn together.

Bootstrap has a built-in responsive, mobile device-first streaming raster system. With the increase in screen devices or viewports, the system will automatically be divided into up to 12 columns.

Here I call the grid system in Bootstrap layout. It creates a page layout by combining a series of rows and columns, and then your content can be put into the layout you created. The following describes how the Bootstrap raster system works:

Okay leer, the amount of code is written below. First, let's take a look at the editor I used. I used a lot of tools when I learned Html + CSS at school.

 

 

Create an HTML document and select the HTML5 type.

 

After creation, save it as the same directory as the js and css folders described in the previous section.

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

You can copy the code in bootstrap.html to the layout.html page.

Add the following code under the body Tag:

<H1> Hello, world! </H1> 

We should be able to understand these labels, which are the most basic and simple.
All the code on the layout.html page is as follows:
<! DOCTYPE html> 
Of course, the effect is also very simple. I still put it on and can compare it.


  

 
   
Optimization 1: we can find that the page effect is full screen. We can center the content above through the Bootstrap style class.

  
 
The effect is as follows:

It can be found that the container class has set the width and the content can 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 regions, you can use div, and add a class for div <div class = "row">.
Then we add a container div for each small area and add a class for the div <div class = "col-xs-4">
Simple code implementation:
Hello, world! Zone 1 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 particle needs. area 2 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 3 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 into a column and then divided into three columns. Combine the six principles of the above raster system. I know a little about it. I know a lot about it myself. You can create complex grid layout pages in the same way. You only need to add the corresponding grid layout class on the container used by the layout. For example, if the content occupies 6 grids, add a class for a col-xs-6, take up four grids, add a class for a col-xs-4, and then use containers with row classes around the same row.

This section describes the layout (raster system) and how it works through simple instances.
Used classes include:
1. container: Used.containerThe content on the package page can be centered and aligned. Container is set for different media queries or value ranges.max-widthTo match the grid system.
2 .. col-xs-4: this class is divided into three parts through "-", the third part of the number as a generic, it ranges from 1 to 12. You can divide an area into 12 columns, which must be used together with the row class.
In fact, this layout is similar to the Table layout in HTMl.
For the moment, you can directly copy and paste the code to see the effect. Of course, you must first prepare the pre-css and js files.