BootStrap入門

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放入網頁中。

01<!DOCTYPE html>
02<html lang="zh-TW">
03  <head>
04    <meta charset="utf-8">
05    <title>Bootstrap 101 Template</title>
06    <meta name="viewport" content="width=device-width, initial-scale=1.0">
07    <!-- Bootstrap -->
08    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
09  </head>
10  <body>
11    <h1>Hello, world!</h1>
12    <script src="http://code.jquery.com/jquery.js"></script>
13    <script src="js/bootstrap.min.js"></script>
14  </body>
15</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)

media="screen" 代表此CSS只作用在畫面上，其他還有：print：作用到印表機；projection：作用到投影機；aural：作用到揚聲器；braille：作用到凸字觸覺感知設備；tty：作用到電傳打字機；tv：作用到電視機；all，作用到所有輸出設備。設備間可以用逗號隔開，如：media="screen,print" 。

BootStrap綁定jquery（所以要先載入jquery），其JavaScript用以實現如提示（tooltip）、彈出視窗（popover）、對話視窗（modal）等具互動性的元件。