Bootstrap grid system Learning notes _javascript Tips

How much does the bootstrap grid system know?

1. Introduction
Bootstrap has a set of responsive, mobile-priority streaming grid systems, which are automatically divided into up to 12 columns as the size of the screen device or viewport (viewport) increases. It includes easy-to-use predefined classe, and powerful mixin for generating more semantic layouts.

2, grid options
Bootstrap3.x uses four kinds of grid options to form a grid system, these four options on the official web site described below, many people do not understand, here with you to explain the difference between the four grid options, in fact, the difference is only one is suitable for different sizes of screen equipment. We look at the class prefix of this item, we let the prefix named these four kinds of grid options, they are Col-xs, COL-SM, COL-MD, COL-LG, we know English, LG is the abbreviation of large, MD is the abbreviation of Mid, SM is the abbreviation of small, XS is the abbreviation of * * *. This name reflects the different screen widths that these classes adapt to. Here we introduce the characteristics of these classes separately.

The following table allows you to see how Bootstrap's grid system works on a variety of screen devices.

3. Column Offset
Use. col-md-offset-* to offset the column to the right. These classes add all columns to the left side of the column by using the * selector (margin). For example,. col-md-offset-4 shifts the width of the. Col-md-4 to the right by 4 columns.

4. Nested columns
To nest content with a built-in grid, you can do this by adding a new. Row and a series of. col-md-* columns to the existing. col-md-* column. The columns contained in the nested row should add up to 12.

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

Case

<%@ page language= "java" pageencoding= "UTF-8"%> <% String Path = Request.getcontextpath (); %> <! DOCTYPE html>  

Demo Effect:

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.