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）等具互動性的元件。