Tad 教材網 - 線上書籍

:::

XOOPS 新版佈景設計
============

### 一、 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放入網頁中。 ```
  <pre class="brush:xml;highlight:[6,8,12,13];">
  
  <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">
      
      <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）等具互動性的元件。
 
</body></html>

:::