快捷導(dǎo)航

談一談bootstrap響應(yīng)式布局

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

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

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

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

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

這里寫圖片描述

【注】加載js時(shí)，必須先加載jquery.min.js，這是因?yàn)樵赽ootstrap.min.js會(huì)使用到j(luò)Query相關(guān)的方法即boostrap.min.js依賴于jquery.min.js。

測(cè)試bootsrap環(huán)境

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

<!DOCTYPE html>
<html>
<head>
 <title>測(cè)試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)境。很簡(jiǎn)單吧！
使用boostrap必須要了解的就是boostrap的柵格系統(tǒng)。正是由于這柵格系統(tǒng)才使得更好的兼容不同分辨率的終端設(shè)備。
具體的柵格系統(tǒng)官網(wǎng)有清晰的介紹：http://v3.bootcss.com/css/。官網(wǎng)的下圖所在位置：

這里寫圖片描述

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

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

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

<!DOCTYPE html>
<html>
<head>
 <title>測(cè)試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>測(cè)試表格</td>
  <td>測(cè)試表格</td>
  <td>測(cè)試表格</td>
  <td>測(cè)試表格</td>
  <td>測(cè)試表格</td>
 </tr>
 <tr>
  <td>測(cè)試表格</td>
  <td>測(cè)試表格</td>
  <td>測(cè)試表格</td>
  <td>測(cè)試表格</td>
  <td>測(cè)試表格</td>
 </tr>
 <tr>
  <td>測(cè)試表格</td>
  <td>測(cè)試表格</td>
  <td>測(cè)試表格</td>
  <td>測(cè)試表格</td>
  <td>測(cè)試表格</td>
 </tr>
 <tr>
  <td>測(cè)試表格</td>
  <td>測(cè)試表格</td>
  <td>測(cè)試表格</td>
  <td>測(cè)試表格</td>
  <td>測(cè)試表格</td>
 </tr>
 <tr>
  <td>測(cè)試表格</td>
  <td>測(cè)試表格</td>
  <td>測(cè)試表格</td>
  <td>測(cè)試表格</td>
  <td>測(cè)試表格</td>
 </tr>
 </table>
</body>
</html>

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

這里寫圖片描述

class 里屬性介紹:

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

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">（默認(rèn)樣式）Default</button>

 <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
 <button type="button" class="btn btn-primary">（首選項(xiàng)）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">（危險(xiǎn)）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é)果如下：

這里寫圖片描述