1. Introduction
Bootstrap has built-in a responsive, mobile-first streaming grid system. As the screen device or viewport size increases, the system will automatically be divided into up to 12 columns . It includes easy to use predefined classes, and powerful mixins for generating more semantic layouts.
2. Raster options
bootstrap3.x uses four grid options to form a grid system. The introduction of these four options on the official website is as follows. Many people don’t understand it. Here I will explain the differences between the four grid options in detail. In fact, only one of the differences is that they are suitable for screen devices of different sizes . Let’s look at the class prefix item. Let’s name these four grid options for the prefix. They are col-xs, col-sm, col-md, and col-lg. Those who understand English will know that lg is the abbreviation of large, 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.
The following table allows you to see in detail how Bootstrap's raster system works on multiple screen devices.
3. Column offset
Use .col-md-offset-* to offset the column to the right. These classes add all columns to the left margin of the column by using the * selector. For example, .col-md-offset-4 shifted .col-md-4 to the right by 4 columns in width.
4. Nested columns
To nest content using built-in rasters, it can be done by adding a new .row and a series of .col-md-* columns into the already existing .col-md-* columns. The columns contained in nested rows should add up to 12 .
5. Column sorting
The order of columns can be easily changed by using .col-md-push-* and .col-md-pull-*.
Case
<%@ page language="java" pageEncoding="UTF-8"%><%String path = request.getContextPath();%><!DOCTYPE html><html lang="zh-cn"><head><title>raster</title><meta content="IE=edge" http-equiv="X-UA-Compatible"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="Content-Language" content="zh-cn" /><meta name="author" content="[email protected]" /><meta name="Copyright" content="parami|Xiamen Bolumi Network Technology Co., Ltd." /><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><jsp:include page="/demo/base/js_bootstrap.jsp" /><style type="text/css">.show-grid [class ^="col-"] {padding-top: 10px;padding-bottom: 10px;background-color: #eee;border: 1px solid #ddd;background-color: rgba(86, 61, 124, .15);border: 1px solid rgba(86, 61, 124, .2);}</style><script type="text/javascript">$(function(){});</script></head><body><b>col-lg-*Usage</b> <br/> <div><div>.col-lg-8</div><div>.col-lg-4</div></div><br/> <b>col-md-*Usage</b><div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div></div><br/> <b>col-md-8</div><div>.col-md-4</div></div><br/> <b>col-sm-*Usage</b><div><div>.col-sm-8</div><div>.col-sm-4</div></div><br/> <b>col-xs-*Usage</b><div><div>.col-xs-8</div><div>.col-xs-4</div></div> <br/> <b>Column offset: col-md-offset-*</b><div><div>.col-md-4</div><div>.col-md-4</div><div>.col-md-4</div><div>.col-md-4</div><div>.col-md-4</div><div>.col-md-4</div><div>.col-md-4</div><div>.col-md-4</div><div>.col-md-4</div><div>.col-md-4</div><div>.col-md-4</div><div>.col-md-4</div><div>.col-md-4</div><div>.col-md-4</div><div>.col-md-4</div><div>.col-md-4</div><div>.col-md-4</div><div>.col-md-4</div><div>.col-md-4</div><div>.col-md-4</div></div> <br/> <b>Column offset: col-md-offset-*</b><div><div>.col-md-4</div><div>.col-md-4</div><div>.col-md .col-md-offset-4</div></div><div><div>.col-md-3 .col-md-offset-3</div><div>.col-md-3 .col-md-offset-3</div></div><div><div>.col-md-6 .col-md-offset-3</div></div><br/> <b>Nested columns: The columns contained in a nested row should be equal to 12</b><div><div>Level 1: .col-md-9<div><div>Level 2: .col-md-6</div><div>Level 2: .col-md-6</div></div></div><br/> <b>Column sorting: .col-md-push-* and .col-md-pull-*</b> <div><div>.col-md-9 .col-md-push-3</div><div>.col-md-3 .col-md-pull-9</div></div> </body></html>
Demo effect
The above is the relevant knowledge about the BootStrap grid system introduced to you by the editor. I hope it will be helpful to you!