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

:::

搜尋

進階搜尋

QR Code 區塊

https%3A%2F%2Fwww.tad0616.net%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D977

快速登入

書籍目錄

展開 | 闔起

線上使用者

125人線上 (46人在瀏覽線上書籍)

會員: 0

訪客: 125

更多…

MarkDown

搜尋

QR Code 區塊

快速登入

書籍目錄

線上使用者