4. 認識 BootStrap

一、 BootStrap與XOOPS

Bootstrap 是 Twitter 推出的一個用於前端開發的開源工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發，是一個CSS/HTML框架。
Bootstrap 最新版本為3.0，2.x系列僅到2.3.2，XOOPS2.6內建版本則為2.2.2版
官方網站：http://getbootstrap.com/2.3.2/
中文手冊：http://kkbruce.tw/
值得一逛的網站：http://www.bootcss.com/

二、將網頁變成BootStrap網頁

下載Bootstrap，並解壓縮之。接著將BootStrap的CSS及JS放入網頁中。

<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

W3C 定義 viewport meta 目前還屬於草案，意思就是有可能隨時修改。屬性如下：
- (1) width：可設定數值，或者指定為 device-width
- (2) height：可設定數值，或者指定為 device-height
- (3) initial-scale：第一次進入頁面的初始比例，最小0.25，最大5
- (4) minimum-scale：允許縮小最小比例，最小0.25，最大5
- (5) maximum-scale：允許放大最大比例，最小0.25，最大5
- (6) user-scalable：允許使用者縮放，1 or 0 (yes or no)
<link>用來連結外部CSS檔，href是檔案來源，rel用來說明此檔和網頁的關係。
media="screen" 代表此CSS只作用在畫面上，其他還有：print：作用到印表機；projection：作用到投影機；aural：作用到揚聲器；braille：作用到凸字觸覺感知設備；tty：作用到電傳打字機；tv：作用到電視機；all，作用到所有輸出設備。設備間可以用逗號隔開，如：media="screen,print" 。
BootStrap綁定jquery（所以要先載入jquery），其JavaScript用以實現如提示（tooltip）、彈出視窗（popover）、對話視窗（modal）等具互動性的元件。

三、 BootStrap的版面布局（網格）

Bootstrap 是建立在12欄網格、佈局和元件之上。
Bootstrap 須使用HTML5 doctype，所有網頁開頭都要有<!DOCTYPE html>

四、 BootStrap的固定版面布局 container＋row

固定布局，可先用<div class="container"></div>做出一個寬度約螢幕畫面90%並置中的網頁容器。
接著，用<div class="row"></div>畫出一個橫向區域（一行），再用<div class="span數"></div>將一行分成數欄。
可巢狀，即<div class="span數"></div>中可以有<div class="row"></div>，但其子row裡面的span數總和，不得大於父span數。

沒有嚮應式。可視視窗在低於767px 寬度下，列會變成流動且垂直堆疊。

<div class="container">
  <div class="row">
    <div class="span4">...</div>
    <div class="span8">...</div>
  </div>
</div>

五、 BootStrap的流動版面布局container-fluid＋row-fluid

流動布局，可先用<div class="container-fluid"></div>做出滿版的網頁容器。
接著，用<div class="row-fluid"></div>畫出一個橫向區域（一行），再用<div class="span數"></div>將一行分成數欄（總和12欄）。
可巢狀，即<div class="span數"></div>中可以有<div class="row-fluid"> </div>，其子row-fluid裡面又是12欄，和固定的row不同。
```
<div class="container-fluid">
  <div class="row-fluid">
    <div class="span4">...</div>
    <div class="span8">...</div>
  </div>
</div>
```

六、利用offset可以跳過幾個欄位：

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span4 offset4">...</div>
</div>

七、 BootStrap基礎CSS

Bootstrap 全域預設值中 font-size 是 14px，line-height 是 20px。這些預設值設置在 <body> 和所有<p>上。另外，<p> 還定義二分之一行高（預設是 10px）和底部邊距（bottom margin）。基本上，還是自己調大一點看起來比較舒服。
靠左對齊：class="text-left"（通常用在<p>或<div>中，<td>裡無效）
置中對齊：class="text-center"
靠右對齊：class="text-right"
文字類別（會以不同顏色呈現），這些名稱對應的意義及顏色基本上是固定的。
- (1) class="muted"（灰色）沉默
- (2) class="text-warning"（橘色）警告
- (3) class="text-error"（紅色）錯誤
- (4) class="text-info"（靛藍色）資訊
- (5) class="text-success"（綠色）成功
其他樣式請參考bootstrap3_base_css.html範例說明

八、 BootStrap表格

BootStrap表格：<table class="table">
斑馬紋表格：<table class="table table-striped">
框線表格：<table class="table table-bordered">
移過變色表格：<table class="table table-hover">
緊湊表格：<table class="table table-condensed">
以上這些樣式均可同時混用。
顏色表格（僅對<td>有效），用法為：<tr class="success">（綠色）成功，其他值為：error（紅色）錯誤、warning（橘色）警告、info（靛藍色）資訊

九、 BootStrap按鈕

<a class="btn">按鈕</a>
<button class="btn">按鈕</button>
顏色：<button class="btn btn-primary">藍色按鈕</button>，其他顏色：btn-info（靛藍）、btn-success（綠色）、btn-warning（橘色）、btn-danger（紅色）、btn-inverse（黑色）、btn-link（透明，使之看起來看連結，但又保持按鈕的行為）
按鈕尺寸：btn-large（大）、btn-small（小）或btn-mini（迷你）
btn-block 類別，能讓按鈕變成區塊元素，同時會填滿整個父元素。
加入disabled可以使按鈕無法點擊。

十、 BootStrap圖片（會隨空間放大縮小）

圓角圖片：<img src="圖片路徑" class="img-rounded">
圓形圖片：<img src="圖片路徑" class="img-circle">
外框圖片：<img src="圖片路徑" class="img-polaroid">
.img-rounded 和 .img-circle 在 IE7-8 無法使用。

十一、 BootStrap圖示

完整圖示名稱請至：http://kkbruce.tw/Bootstrap/BaseCSS#icons
黑色圖示：<i class="icon-search"></i>
白色圖示：<i class="icon-search icon-white"></i>
可搭配許多元素一起用，如：<a class="btn"><i class="icon-star"></i> 星星</a>

十二、 BootStrap標籤和徽章

label標籤是方形的：<span class="label">預設</span>
badge徽章是圓形的：<span class="badge">1</span>
顏色（若是徽章請將label 換為badge）：label-info（靛藍）、label-success（綠色）、label-warning（橘色）、label-important（紅色）、label-inverse（黑色）