Bootstrap 3 報告人：Sean Huang 日期：2014/12/11
大綱 概述 Bootstrap 全局 CSS 樣式 JavaScript Plugin 課堂實作說明 參考資料
課程概述 大致介紹課堂實作會用到的項目
Bootstrap是什麼 Bootstrap包含的內容 Bootstrap
Bootstrap是什麼 Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用於 開發響應式布局、移動設備優先的 WEB 項目。 從原碼產生Bootstrap css 需要 Less 編譯器 Bootstrap 插件全部依賴 jQuery
Bootstrap包含的內容 Bootstrap 提供了兩種形式的壓縮包 預編譯版 Bootstrap 源碼 bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff Bootstrap 源碼 ├── less/ ├── fonts/ ├── dist/ │ ├── css/ │ ├── js/ │ └── fonts/ └── docs/ └── examples/
概覽 布局容器 柵格系統 柵格參數 全局 CSS 樣式
1：簡介 深入了解 Bootstrap 底層結構的關鍵部分，包括我們讓 web 開發變得更好、更快、更強壯的最佳實踐。 HTML5 文檔類型 Bootstrap 使用到的某些 HTML 元素和 CSS 屬性需要將頁面設置為 HTML5 文檔類型。在你項目中的每個頁面都要參照下面的格式進行設 置。 <!DOCTYPE html> <html lang="zh-CN"> ... </html>
2：布局容器 Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 容器。 我們提供了兩個作此用處的類。注意，由於 padding 等屬性的原因 ，這兩種 容器類不能互相嵌套。 .container 類用於固定寬度並支持響應式布局的容器。 .container-fluid 類用於 100% 寬度，佔據全部視口（viewport）的容器。
3：柵格系統 柵格系統用於通過一系列的行（row）與列（column）的組合來創建頁面布局，你的 內容就可以放入這些創建好的布局中。 (系統會自動分為最多12列) 「行（row）」必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中。 通過「行（row）」在水平方向創建一組「列（column）」。 內容應當放置於「列（column）」內，並且，只有「列（column）」可以作為行（row）」的直接子元素 。 如果一「行（row）」中包含了的「列（column）」大於 12，多余的「列（column）」所在的元素將被 作為一個整體另起一行排列。 https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Border-radius_generator
4：柵格參數 通過下表可以詳細查看 Bootstrap 的柵格系統是如何在多種屏幕設備上工作的 超小屏幕 手機 (<768px) 可以參考bootstrap.html 超小屏幕 手機 (<768px) 小屏幕 平板 (≧768px) 中等屏幕 桌面顯示器 (≧992px) 大屏幕 大桌面顯示器 (≧1200px) 柵格系統行為 總是水平排列 開始是堆疊在一起的，當大於這些閾值時將變為水平排列C .container 最大寬度 None （自動） 750px 970px 1170px 類前綴 .col-xs- .col-sm- .col-md- .col-lg- 列（column）數 12 最大列（column）寬 自動 ~62px ~81px ~97px 槽（gutter）寬 30px （每列左右均有 15px） 可嵌套 是 偏移（Offsets） 列排序 https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Border-radius_generator
按鈕式下拉菜單 輸入框組 導航條 元件
1：按鈕式下拉菜單 http://v3.bootcss.com/components/#btn-dropdowns https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Border-radius_generator
2：輸入框組 http://v3.bootcss.com/components/#input-groups-basic https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Border-radius_generator
3：導航條 http://v3.bootcss.com/components/#navbar-fixed-top https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Border-radius_generator
概覽 對話視窗 JavaScript Plugin
1：概覽 建議使用壓縮版的 JavaScript 文件 組件的 data 屬性 插件之間的依賴關系 data 屬性 bootstrap.js 和 bootstrap.min.js 都包含了所有插件，你在使用時，只需選擇一個引入頁面就可以了。 組件的 data 屬性 不要在同一個元素上同時使用多個插件的 data 屬性。例如，button 組件不能同時支持工具提示和控制模態 框。如果需要的話，可以在其外面包裹一個額外的元素。 插件之間的依賴關系 某些插件和 CSS 組件依賴於其它插件。如果你是單個引入每個插件的，請確保在文檔中檢查插件之間的依 賴關系。注意，所有插件都依賴 jQuery data 屬性 你可以僅僅通過 data 屬性 API 就能使用所有的 Bootstrap 插件，無需寫一行 JavaScript 代碼。這是 Bootstrap 中的一等 API，也應該是你的首選方式 https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Border-radius_generator
2：對話視窗 <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span><span class="sr-only">Close </span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> http://v3.bootcss.com/javascript/#modals-examples https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Border-radius_generator
簡單的首頁 課堂實作說明
簡單的首頁 lg md sm xs 導航條右側有個”註冊”按紐 下方Heading區塊分4等份 下方Heading區塊分3等份 導航條右側有個”註冊”按紐消失,改成下拉式button,並且將原本的link & ”註 冊”按紐移置裡面. 下方Heading區塊分1等份
簡單的首頁 lg
簡單的首頁 md
簡單的首頁 sm
簡單的首頁 xs
簡單的首頁 在兩種註冊按紐的情況下,按下註冊按紐之後要出現”對話視窗”
簡單的首頁 以上為實作的要求,可以再根據官方的範例去自行設計這個版面,讓它 更豐富(如果時間上許可)
課程實作作業簡述 範例程式與簡報檔案下載路徑 作業繳交方式 http://goo.gl/06APIQ 請參考”課程公告 ( async_web_html5 ).pdf”
參考資料
參考網址 http://kkbruce.tw/Bootstrap/JavaScript v2版的說明,javascript的說明看這比較清楚 http://v3.bootcss.com/examples/offcanvas/ 課堂實作的基礎範例頁 http://v3.bootcss.com/ V3版的中文說明網 http://kkbruce.tw/BootstrapV3 V3版的中文說明網 http://getbootstrap.com/css/ V3版的英文說明網 http://v3.bootcss.com/examples/grid/ http://www.tutorialspoint.com/bootstrap/bootstrap_dropdown_plugin.htm http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-tooltips.php Plugin 示範頁 29