:::

4. BootStrap入門

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

:::

搜尋

QR Code 區塊

https%3A%2F%2Fwww.tad0616.net%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D33%26tbdsn%3D977

書籍目錄

展開 | 闔起

線上使用者

34人線上 (4人在瀏覽線上書籍)

會員: 0

訪客: 34

更多…