談一談bootstrap響應式布局

更新時間：2016年05月23日 17:27:48 作者：HiveDark

這篇文章主要和大家談一談bootstrap響應式布局，本教程講解如何在網(wǎng)頁布局中應用響應式設計，感興趣的小伙伴們可以參考一下

隨著移動端的用戶越來越多，傳統(tǒng)的web系統(tǒng)架構(gòu)無法兼容很多移動終端的正常使用。在工作中也會發(fā)現(xiàn)，現(xiàn)在很多的客戶都有在手機、平板等移動終端上使用管理系統(tǒng)的需求。如果單獨為每一個終端開發(fā)相應的響應網(wǎng)頁，這必定增加項目的成本和開發(fā)人員的壓力。這時候了解響應式布局就很有必要，響應式布局就是為解決多終端問題而生的。本次介紹的是輕量級、開源的、免費的bootstrap。

搭建開發(fā)環(huán)境

首先下載官網(wǎng)的boostrap源碼包：http://www.bootcss.com/. 開發(fā)簡單的項目不必加入源碼中的所有css、js和字體等。根據(jù)自己的項目需求可以裁剪出自己需要的環(huán)境。
必須的文件有以下幾個：jquery.min.js 、bootstrap.min.js、bootstrap.css。如果需要使用到其中的一些字體樣式等，還需要加入字體相關的文件，如下圖所示：

這里寫圖片描述

【注】加載js時，必須先加載jquery.min.js，這是因為在bootstrap.min.js會使用到jQuery相關的方法即boostrap.min.js依賴于jquery.min.js。

測試bootsrap環(huán)境

寫一個測試文件index.html。測試文件內(nèi)容如下：

<!DOCTYPE html>
<html>
<head>
 <title>測試boostrap環(huán)境</title>
 <link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
 <script type="text/javascript" src="./js/jquery.min.js"></script>
 <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>

以上就搭建好了bootsrap開發(fā)環(huán)境。很簡單吧！
使用boostrap必須要了解的就是boostrap的柵格系統(tǒng)。正是由于這柵格系統(tǒng)才使得更好的兼容不同分辨率的終端設備。
具體的柵格系統(tǒng)官網(wǎng)有清晰的介紹：http://v3.bootcss.com/css/。官網(wǎng)的下圖所在位置：

這里寫圖片描述

使用boostrap時，我們主要是使用里面已定義好的一些樣式。這對一個沒有美工能力的程序而言，快速搭建一個還不錯的頁面是很有幫助的。

在實際使用bootstrap的時候，我們經(jīng)常查看官網(wǎng)的一些幫助文檔：http://v3.bootcss.com/css/#tables 。
個人建議直接在官網(wǎng)的示例中copy相關的代碼到自己的網(wǎng)頁中，再在此基礎之上做出相關的修改，這樣的開發(fā)速度會更快并且準確率會更高。

演示一些boostrap樣式---table樣式。

<!DOCTYPE html>
<html>
<head>
 <title>測試boostrap環(huán)境</title>
 <link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
 <script type="text/javascript" src="./js/jquery.min.js"></script>
 <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
 <table class="table table-hover table-bordered table-striped">
 <tr>
  <td>測試表格</td>
  <td>測試表格</td>
  <td>測試表格</td>
  <td>測試表格</td>
  <td>測試表格</td>
 </tr>
 <tr>
  <td>測試表格</td>
  <td>測試表格</td>
  <td>測試表格</td>
  <td>測試表格</td>
  <td>測試表格</td>
 </tr>
 <tr>
  <td>測試表格</td>
  <td>測試表格</td>
  <td>測試表格</td>
  <td>測試表格</td>
  <td>測試表格</td>
 </tr>
 <tr>
  <td>測試表格</td>
  <td>測試表格</td>
  <td>測試表格</td>
  <td>測試表格</td>
  <td>測試表格</td>
 </tr>
 <tr>
  <td>測試表格</td>
  <td>測試表格</td>
  <td>測試表格</td>
  <td>測試表格</td>
  <td>測試表格</td>
 </tr>
 </table>
</body>
</html>

網(wǎng)頁查看結(jié)果如下：

這里寫圖片描述

class 里屬性介紹:

1）table 加上這個就已經(jīng)有bootsrap的表格樣式
2）table-hover 表示表格鼠標停留的行背景高亮
3）table-bordered 表格出現(xiàn)邊框
4）table-striped 表格條紋
【注】多個屬性相加時，各個屬性之間有空格

2. button

<!--Button-->
 <a class="btn btn-default" href="#" role="button">Link</a>
 <button class="btn btn-default" type="submit">Button</button>
 <input class="btn btn-default" type="button" value="Input">
 <input class="btn btn-default" type="submit" value="Submit">

 <!-- Standard button -->
 <button type="button" class="btn btn-default">（默認樣式）Default</button>

 <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
 <button type="button" class="btn btn-primary">（首選項）Primary</button>

 <!-- Indicates a successful or positive action -->
 <button type="button" class="btn btn-success">（成功）Success</button>

 <!-- Contextual button for informational alert messages -->
 <button type="button" class="btn btn-info">（一般信息）Info</button>

 <!-- Indicates caution should be taken with this action -->
 <button type="button" class="btn btn-warning">（警告）Warning</button>

 <!-- Indicates a dangerous or potentially negative action -->
 <button type="button" class="btn btn-danger">（危險）Danger</button>

 <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
 <button type="button" class="btn btn-link">（鏈接）Link</button>

網(wǎng)頁顯示結(jié)果如下：

這里寫圖片描述