這篇文章將為大家詳細(xì)講解有關(guān)Bootstrap怎么實(shí)現(xiàn)柵格系統(tǒng)，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司，自成立以來公司不斷探索創(chuàng)新，始終堅(jiān)持為客戶提供滿意周到的服務(wù)，在本地打下了良好的口碑，在過去的10余年時(shí)間我們累計(jì)服務(wù)了上千家以及全國政企客戶，如小攪拌車等企業(yè)單位，完善的項(xiàng)目管理流程，嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過硬的技術(shù)實(shí)力獲得客戶的一致贊揚(yáng)。

1、簡(jiǎn)介

Bootstrap內(nèi)置了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕設(shè)備或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。它包含了易于使用的預(yù)定義classe，還有強(qiáng)大的mixin用于生成更具語義的布局。

2、柵格選項(xiàng)

bootstrap3.x使用了四種柵格選項(xiàng)來形成柵格系統(tǒng)，這四種選項(xiàng)在官網(wǎng)上的介紹如下圖，很多人不理解，這里跟大家詳解一下四種柵格選項(xiàng)之間的區(qū)別，其實(shí)區(qū)別只有一條就是適合不同尺寸的屏幕設(shè)備。我們看class前綴這一項(xiàng)，我們姑且以前綴命名這四種柵格選項(xiàng)，他們分別是col-xs、col-sm、col-md、col-lg，我們懂英文的就知道，lg是large的縮寫，md是mid的縮寫，sm是small的縮寫，xs是***的縮寫。這樣命名就體現(xiàn)了這幾種class適應(yīng)的屏幕寬度不同。下面我們分別介紹這幾種class的特點(diǎn)。

通過下表可以詳細(xì)查看Bootstrap的柵格系統(tǒng)如何在多種屏幕設(shè)備上工作的。

3、列偏移

使用.col-md-offset-*可以將列偏移到右側(cè)。這些class通過使用*選擇器將所有列增加了列的左側(cè)margin。例如，.col-md-offset-4將.col-md-4向右移動(dòng)了4個(gè)列的寬度。

4、嵌套列

為了使用內(nèi)置的柵格將內(nèi)容嵌套，通過添加一個(gè)新的.row和一系列.col-md-*列到已經(jīng)存在的.col-md-*列內(nèi)即可實(shí)現(xiàn)。嵌套row所包含的列加起來應(yīng)該等于12。

5、列排序

通過使用.col-md-push-* 和 .col-md-pull-*就可以很容易的改變列的順序。

案例

<%@ page language="java" pageEncoding="UTF-8"%>
<%
 String path = request.getContextPath();
%>


 
  
  
  
  
  
  

  
  
  

  
  
  
  
  .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);
  }
  
  
  $(function(){
  });
  
 
 
  col-lg-*用法 
  
 
  
   .col-lg-8