:::

4. 認識 BootStrap

一、 BootStrap與XOOPS

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

二、 將網頁變成BootStrap網頁

  1. 下載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>
  2. 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)
  3. <link>用來連結外部CSS檔,href是檔案來源,rel用來說明此檔和網頁的關係。
  4. media="screen" 代表此CSS只作用在畫面上,其他還有:print:作用到印表機;projection:作用到投影機;aural:作用到揚聲器;braille:作用到凸字觸覺感知設備;tty:作用到電傳打字機;tv:作用到電視機;all,作用到所有輸出設備。設備間可以用逗號隔開,如:media="screen,print" 。
  5. BootStrap綁定jquery(所以要先載入jquery),其JavaScript用以實現如提示(tooltip)、彈出視窗(popover)、對話視窗(modal)等具互動性的元件。

三、 BootStrap的版面布局(網格)

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

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

  1. 固定布局,可先用<div class="container"></div>做出一個寬度約螢幕畫面90%並置中的網頁容器。
  2. 接著,用<div class="row"></div>畫出一個橫向區域(一行),再用<div class="span數"></div>將一行分成數欄。
  3. 可巢狀,即<div class="span數"></div>中可以有<div class="row"></div>,但其子row裡面的span數總和,不得大於父span數。
  4. 沒有嚮應式。可視視窗在低於767px 寬度下,列會變成流動且垂直堆疊。
    <div class="container">
      <div class="row">
        <div class="span4">...</div>
        <div class="span8">...</div>
      </div>
    </div>

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

  1. 流動布局,可先用<div class="container-fluid"></div>做出滿版的網頁容器。
  2. 接著,用<div class="row-fluid"></div>畫出一個橫向區域(一行),再用<div class="span數"></div>將一行分成數欄(總和12欄)。
  3. 可巢狀,即<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

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

八、 BootStrap表格

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

九、 BootStrap按鈕

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

十、 BootStrap圖片(會隨空間放大縮小)

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

十一、 BootStrap圖示

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

十二、 BootStrap標籤和徽章

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

十三、 BootStrap排版元件、警告視窗

  1. class="hero-unit" 類別,用於展示網站重點內容的元件。
  2. class="well" 類別,能給元素加入一個簡單的嵌入(inset)效果。
  3. .well-large 與 .well-small 兩個選擇性類別可以控制邊距(padding)與圓角。
  4. class="alert"可建立一個警告視窗(預設為黃色系)
  5. 加上.alert-error為紅色系,警告之意、.alert-success為綠色系,成功之意、.alert-info為藍色系,資訊之意。
  6. 警告視窗可加入關閉按鈕:<button type="button" class="close" data-dismiss="alert">&times;</button>
  7. 警告視窗可加入 .alert-block 類別,用以增加警告視窗上下的邊距(padding)。

十四、 BootStrap浮動

  1. class="pull-left" 向左浮動、class="pull-right" 向右浮動
  2. class="clearfix" 清除浮動效果

十五、 BootStrap各式工具元件

  1. 由於原始碼較多,請直接參考網站範例。

:::

搜尋


書籍目錄

展開 | 闔起

線上使用者

19人線上 (1人在瀏覽線上書籍)

會員: 0

訪客: 19

更多…