Bootstrap grid system study notes-PHP开发-php.cn

How much do you know about the Bootstrap grid system?

1. Introduction
Bootstrap has a built-in responsive, mobile-first fluid grid system. As the screen device or viewport size increases, the system will automatically be divided into up to 12 columns. It contains easy-to-use predefined classes and powerful mixins for generating more semantic layouts.

2. Grid options
bootstrap3.x uses four grid options to form a grid system. These four options are introduced on the official website as shown below. Many people do not understand. Here is a detailed explanation of the four grids. The only difference between the options is that they are suitable for screen devices of different sizes. Let’s look at the class prefix. Let’s name these four grid options with the prefix. They are col-xs, col-sm, col-md, and col-lg. Those of us who understand English know that lg is large. Abbreviations, md is the abbreviation of mid, sm is the abbreviation of small, and xs is the abbreviation of ***. This naming reflects the different screen widths that these classes adapt to. Below we introduce the characteristics of these classes respectively.

Use the table below to see in detail how Bootstrap's grid system works on various screen devices.

Bootstrap grid system study notes

3. Column offset
Use .col-md-offset-* to offset the column to the right. These classes increase the left margin of all columns by using the * selector. For example, .col-md-offset-4 moves .col-md-4 to the right by 4 columns of width.

4. Nested columns
In order to use the built-in grid to nest content, just add a new .row and a series of .col-md-* columns to the existing .col-md-* columns. accomplish. The sum of the columns contained in the nested row should equal 12.

5. Column sorting
You can easily change the order of columns by using .col-md-push-* and .col-md-pull-*.

Case

<%@ page language="java" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); %>    栅格              
  col-lg-*用法 
  .col-lg-8
 .col-lg-4
 
 
 col-md-*用法  .col-md-1
 .col-md-1
 .col-md-1
 .col-md-1
 .col-md-1
 .col-md-1
 .col-md-1
 .col-md-1
 .col-md-1
 .col-md-1
 .col-md-1
 .col-md-1
 
 
  .col-md-8
 .col-md-4
 
 
 col-sm-*用法  .col-sm-8
 .col-sm-4
 
 
 col-xs-*用法  .col-xs-8
 .col-xs-4
 
 
 列偏移: col-md-offset-*  .col-md-4
 .col-md-4 .col-md-offset-4
 
  .col-md-3 .col-md-offset-3
 .col-md-3 .col-md-offset-3
 
  .col-md-6 .col-md-offset-3
 
 
 嵌套列: 嵌套row所包含的列加起来应该等于12   Level 1: .col-md-9  Level 2: .col-md-6
 Level 2: .col-md-6
 
 
 
 
 列排序: .col-md-push-*和.col-md-pull-*  .col-md-9 .col-md-push-3
 .col-md-3 .col-md-pull-9