Analysis of _javascript techniques of bootstrap grid system

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 the same amount.

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

The above is a small set to introduce the bootstrap grid system related knowledge, hope to help you!