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

創(chuàng)新互聯(lián)建站是專業(yè)的越城網(wǎng)站建設(shè)公司，越城接單;提供做網(wǎng)站、成都網(wǎng)站設(shè)計(jì),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行越城網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

1、簡介

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