Bootstrap, from Twitter, is the most popular front-end framework at present. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is simple and flexible, making web development faster.
Key points for learning:
1. Mobile devices are preferred
2. Layout container
3. Grid system
In this lesson, we will mainly learn about Bootstrap's grid system and provide a responsive, mobile-first streaming grid system.
one. Mobile devices are preferred
In the HTML5 project, we did the mobile project. It has a very important meta for setting the screen and device quad width and whether to run user scaling, and scaling.
//The screen width is consistent with the device, the initial scalable, the maximum scalable and the prohibition of user scaling.
two. Layout container
Bootstrap requires a .container container for page content and raster system. Due to attributes such as padding, these two container classes cannot be nested with each other.
//Fixed width <div>...</div> //100% width <div>...</div>
In a 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 a suitable alignment and padding.
2. Create a set of "columns" horizontally through "row".
3. Your content should be placed in "column", and only "column" can be used as a direct child element of the row.
4. Predefined classes like .row and .col-xs-4 can be used to quickly create raster layouts.
The mixin defined in the Bootstrap source code can also be used to create semantic layouts.
5. Create a gutter between columns by setting the padding property for "column". By setting negative values for .row elements
margin thus offsets the padding set for the .container element, which indirectly offsets the padding for the "column" contained in "row".
6. Negative margin is the reason why the following example highlights outward. The contents in the raster column are arranged in a row.
7. A column in a raster system represents the range it spans by specifying values from 1 to 12. For example, three columns of equal width can be created using three .col-xs-4.
8. If the "column" contained in a "row" is greater than 12, the elements in which the extra "column" are located will be arranged in another row as a whole.
9. The grid class is suitable for devices with screen width greater than or equal to the size of the dividing point, and covers the grid class for small screen devices. Therefore, applying any .col-md-* raster class on the element is suitable for devices with screen widths greater than or equal to the size of the dividing point and overwrites the raster class for small screen devices. Therefore, applying any .col-lg-* on the element does not exist, which also affects the large-screen device.
//Create a responsive row <div><div>...</div></div> //Create a responsive row with up to 12 columns <div><div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div></div> //To show obvious CSS.a {height: 100px;background-color: #eee;border: 1px solid #ccc;} //The total number of columns is 12, and each column is assigned multiple columns <div><div><div>1-4</div><div>5-8</div><div>9-12</div></div><div><div>1-8</div><div>9-12</div></div></div>9-12</div></div>></div>>9-12</div></div>>Raster parameter table
As shown in the figure above, the outermost layer of the grid system distinguishes four widths of browsers: ultra-small screen (<768px), small screen (>=768px), medium screen (>=992px), and large screen (>=1200px). The adaptive widths of the inner .container container are: automatic, 750px, 970px and 1170px. Automatic means that if you are on the mobile phone screen, you will fully exclusively display one line.
//Activate all four screen categories<div><div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div></div> //Sometimes we can set column offsets to keep a gap in the middle<div><div><div>8</div><div>3</div></div></div> //It can also be nested, and the embedding is also 12. Column <div><div><div>1-8</div><div>9-12</div></div><div>11-12</div></div></div> //You can swap two columns, push to the left, and pull to the right<div><div><div>9</div><div>3</div></div></div>
The above is related information for the BootStrap grid system, I hope it will be helpful to everyone!