Chapter 5 BootStrap raster _ javascript tips-js tutorial

Bootstrap, from Twitter, is currently the most popular front-end framework. This article introduces the relevant information about the BootStrap raster system. If you need more information, refer to Bootstrap from Twitter, which is currently the most popular front-end framework. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is concise and flexible, making Web development faster.

Learning points:

1. mobile device priority
2. layout containers
3. Raster System

In this lesson, we will mainly learn about the Bootstrap raster system and provide a responsive streaming raster system with mobile device priority.

1. Priority for mobile devices

In HTML5 projects, we have implemented mobile projects. It has a very important meta, used to set the screen and device width, whether to run user scaling, and the scaling ratio.

// The Screen width is the same as the device width, initial scaling ratio, maximum scaling ratio, and Disable User scaling.
  

2. layout containers

Bootstrap needs to wrap a. iner container for the page content and raster system. Because of attributes such as padding, these two container classes cannot be nested with each other.

// Fixed width
...
// 100% in width
...

In the raster system, the browser will automatically allocate up to 12 columns as the screen size increases or decreases. Create a page layout by combining a series of rows and columns. The working principle is as follows:

1. "row" must be included in. container (fixed width) or. container-fluid (100% width) to give it an appropriate arrangement (aligment) and inner padding (padding ).

2. Create a group of columns in the horizontal direction using "row )".

3. Your content should be placed in "column", and only "column" can be used as a direct sub-element of row.

4. pre-defined classes like. row and. col-xs-4 can be used to quickly create raster la S.
The mixin defined in Bootstrap source code can also be used to create semantic la S.

5. Set the padding attribute for "column" to create the interval (gutter) between columns ). Set a negative value for the. row Element.

Margin offsets the padding set for the. iner element, and indirectly offsets the padding for the "column" contained in "row.

6. The negative value of margin is why the following example is highlighted externally. The content in the raster column is arranged in a row.

7. the columns in the raster system specify a value ranging from 1 to 12 to indicate the cross range. For example, three columns of equal width can be created using three. col-xs-4.

8. if a row contains more than 12 columns and redundant columns) the elements are arranged as a whole in another row.

9. The raster category applies to devices with the screen width greater than or equal to the split point size, and covers the raster category for small screen devices. Therefore, the application of any. col-md-* raster class on the element is applicable to devices with the screen width greater than or equal to the demarcation point size, and covers the raster class for small screen devices. Therefore, the application of any. col-lg-* on the element does not exist, and the large screen device is also affected.

// Create a response line
...
// Create a response row with a maximum of 12 Columns
1
2
3
4
5
6
7
8
9
10
11
12
// To display the obvious CSS. a {height: 100px; background-color: # eee; border: 1px solid # ccc;} // The total number of columns is 12, and multiple columns are allocated for each column
1-4
5-8
9-12
1-8
9-12
 

Grid Parameter table

As shown in, the outermost layer of the raster system is divided into four types of browsers: Ultra-small screen (<768px), small screen (> = 768px), and middle screen (> = 992px) and large screen (> = pixel px ). The adaptive width of the inner. container is automatic, 750px, 970px, and 1170px. Automatic means that, if you are a mobile phone screen, you will exclusively display one line.

// Activate all four screen categories
4
4
4
4
4
4
4
4
4
4
4
4
// Sometimes we can set the column offset to keep gaps in the middle
8
3
// It can also be nested, with 12 columns full
1-8
9-12
11-12
// You can switch the positions of two columns, push to the left, and pull to the right.
9
3

The above is information about the BootStrap raster system. I hope it will help you!