Home>

This article will mainly introduce the bootstrap grid system.

The grid system is implemented by defining the container size,Divide 12 (or 24 or 32, but 12 are the most common), and adjust the inner and outer margins.Finally, combined with media queries,A powerful responsive grid system was created.

The grid system in bootstrap divides the container into 12 parts.

The bootstrap grid system is used for layout,Is actually a combination of columns,There are four basic usages:

Column combination

Change the number to merge columns (principle:the total number of columns cannot exceed 12), for example:

<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Column Combination Basic Usage</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-Css style->
<style>
 [class *=col-] {
  background-color:#eee;
  border:1px solid #ccc;
 }
</style>
</head>
<body>
<br>
<div>
 <div>
  <!-The grid system in bootstrap is to divide the container into 12 parts->
  <!-This line is divided equally by 1:1:1->
  <div>.col-md-4</div>
  <div>.col-md-4</div>
  <div>.col-md-4</div>
 </div>
 <div>
  <!-This line is divided evenly by 1:2:1->
  <div>.col-md-3</div>
  <div>.col-md-6</div>
  <div>.col-md-3</div>
 </div>
</div>
</body>
</html>

Column offset

Add the class name "col-md-offset- *" on the column element (where the asterisk represents the number of column combinations to be offset), then the column with this class name will be offset to the right.

<div>
 <!-Move column by four columns to the right->
 <div>
  <div>.col-md-4</div>
  <div>Column shift right four columns spacing</div>
  <div>.col-md-3</div>
 </div>
</div>
<!-A line break has occurred->
<div>
 <div>
  <div>.col-md-4</div>
  <div>Column shift right four columns spacing</div>
  <div>.col-md-3</div>
 </div>
 <div>
  <div>.col-md-3</div>
  <div>col-md-offset-3</div>
  <div>col-md-4</div>
 </div>
</div>

3.Column sort

Sorting a column is to change the direction of the column,Change left and right floating,And set the floating distance.The bootstrap is implemented by adding the class names "col-md-push-" and "col-md-pull-" (where the asterisk represents the number of column combinations moved).

<! Doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>Basic Usage</title>
 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 <!-Css style->
 <style>
 [class *=col-] {
  background-color:#eee;
  border:1px solid #ccc;
 }
 </style>
</head>
<body>
 <div>
  <div>
   <div>.col-md-3</div>
   <div>.col-md-6</div>
  </div>
 </div>
</body>
</html>

4. Nesting of columns

<! Doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>Basic Usage</title>
 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 <!-Css style->
 <style>
  [class *=col-] {
   background-color:#eee;
   border:1px solid #ccc;
  }
  [class *=col-] [class *=col-] {
   background-color:#f36;
   border:1px dashed #fff;
   color:#fff;
  }
 </style>
</head>
<body>
 <div>
  <div>
   <div>
    I have a grid nested inside
    <div>
     <div>col-md-6</div>
     <div>col-md-6</div>
    </div>
   </div>
   <div>col-md-4</div>
  </div>
 </div>
</body>
</html>

Article series:

First contact with the magical bootstrap basic typography/go.php?id=89278&s=a

First contact with the magical bootstrap form/go.php?id=89330&s=a

  • Previous Mobile page flip plugin droploadjs (supports Zepto and jQuery)
  • Next jquerymousewheel to achieve full screen flip effect