學習使用bootstrap3柵格系統(tǒng)

更新時間：2016年04月12日 15:28:54 作者：威哥V5

這篇文章主要教會大家學習使用bootstrap3柵格系統(tǒng)，bootstrap開發(fā)環(huán)境搭建，還介紹了柵格系統(tǒng)的類型，感興趣的小伙伴們可以參考一下

一、bootstrap開發(fā)環(huán)境搭建
1. 下載bootstrap, http://www.bootcss.com/
2. 下載jquery, 通過IE直接訪問http://code.jquery.com/jquery-2.0.3.min.js
3. 在html頁面中導入bootstrap與jquery的js,css文件，.viewport的<meta>標簽，這個標簽可以修改在大部分的移動設備上面的顯示，加如 if lt IE 9...等是為了在ie9以下的兼容。
模板如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Insert title here</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
 <![endif]-->
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
 <div class="container">
  
 </div>
</body>
</html>

二. 柵格系統(tǒng)
1. boostrap把桌面分隔成由12行 * n 列的表格進行布局，這是boostrap進行而已的核心。
2. .row 進行行級劃分，必須包含在 .container下。
3. col-xx-*進行列級劃分，如下圖

<div class="container">
  <div class="row">
   <div class="col-md-3">1</div>
   <div class="col-md-3">2</div>
   <div class="col-md-3">3</div>
   <div class="col-md-3">4</div>
  </div>
  <div class="row">
   <div class="col-md-3">5</div>
   <div class="col-md-3">6</div>
   <div class="col-md-3">7</div>
   <div class="col-md-3">8</div>
  </div>
 </div>

4.列偏移，通過 col-xx-offset-*來實現(xiàn)

 <div class="container">
  <div class="row">
   <div class="col-md-3">1</div>
   <div class="col-md-3">2</div>
   <div class="col-md-3">3</div>
   <div class="col-md-3">4</div>
  </div>
  <div class="row">
   <div class="col-md-3">5</div>
   <div class="col-md-3">6</div>
   <div class="col-md-3 col-md-offset-3">7</div>
  </div>
 </div>

5. 列排序，能過.col-xx-push-* 和 .col-xx-pull-* 實現(xiàn)列的向左或向右排序

 <div class="container">
  <div class="row">
   <div class="col-md-3">1</div>
   <div class="col-md-3">2</div>
   <div class="col-md-3 col-md-push-3">3</div>
  </div>
  <div class="row">
   <div class="col-md-3">5</div>
   <div class="col-md-3">6</div>
   <div class="col-md-3 col-md-pull-2">7</div>
  </div>
 </div>

6. 列嵌套，row嵌套在col中即可。

  <div class="row">
   <div class="col-md-3">1</div>
   <div class="col-md-3">2</div>
   <div class="col-md-3">3</div>
   <div class="col-md-3">
    <div class="row">
     <div class="col-md-1">5</div>
     <div class="col-md-1">6</div>
     <div class="col-md-1">7</div>
    </div>
   </div>
  </div>

如果大家還想深入學習，可以點擊這里進行學習，再為大家附兩個精彩的專題：Bootstrap學習教程 Bootstrap實戰(zhàn)教程

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js實現(xiàn)圖片放大展示效果
這篇文章主要介紹了js實現(xiàn)圖片放大展示效果，點擊圖片可查看放大效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
js 鏈式延遲執(zhí)行DOME
js 鏈式延遲執(zhí)行DOME，需要的朋友可以參考下。
2012-01-01
談談encodeURI和encodeURIComponent以及escape的區(qū)別與應用
encodeURI和encodeURIComponent以及escape，這三個都是用來編碼的，本篇文章給大家介紹encodeURI和encodeURIComponent以及escape的區(qū)別與應用，感興趣的朋友一起學習吧
2015-11-11
值得分享和收藏的xmlplus組件學習教程
值得分享和收藏的xmlplus組件學習教程,xmlplus是一個設計非常獨特 JavaScript 框架，用于快速開發(fā)前后端項目，感興趣的小伙伴們可以參考一下
2017-05-05
JS 對象(Object)和字符串(String)互轉方法
下面小編就為大家?guī)硪黄狫S 對象(Object)和字符串(String)互轉方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
JS實現(xiàn)關鍵詞高亮顯示正則匹配
這篇文章主要介紹了JS實現(xiàn)關鍵詞高亮顯示正則匹配功能，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-06-06
JS遍歷JSON數(shù)組及獲取JSON數(shù)組長度操作示例【測試可用】
這篇文章主要介紹了JS遍歷JSON數(shù)組及獲取JSON數(shù)組長度操作,涉及javascript簡單json數(shù)組遍歷與運算相關操作技巧,需要的朋友可以參考下
2018-12-12
JavaScript 進度條實現(xiàn)代碼(Firefox等相似瀏覽器下不支持)
JavaScript實現(xiàn)的進度條，可惜在Firefox等相似瀏覽器下不支持(遠程）
2009-07-07
javascript實現(xiàn)圖片循環(huán)漸顯播放的方法
這篇文章主要介紹了javascript實現(xiàn)圖片循環(huán)漸顯播放的方法,涉及javascript操作圖片的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-02-02
JavaScript實現(xiàn)簡單的拖動效果
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單的拖動效果，具有一定的參考價值，感興趣的朋友可以參考一下
2016-07-07