線上書籍

Home

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放入網頁中。 <!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）等具互動性的元件。