元智大學工作坊 Twitter Bootstrap元件介紹

1. 網站製作⼯工作坊
Twitter Bootstrap元件介紹
2015/04/25 元智⼤大學資訊傳播學系 陳俊安

2. 這堂課你將會學到
• Bootstrap
• 什麼是Bootstrap
• 如何使⽤用？

3. 前端框架與Bootstrap

4. Framework
• 有經驗的開發者把常⽤用的功能預先寫好
• 排版、html元素、外觀、互動功能
• 對後端開發者：簡單套⽤用不錯看的外觀
不⽤用再被嫌棄功能強⼤大卻醜的要命
• 對前端開發者：⼀一個⽅方便穩固的基礎，擴充
性⾼高。但要⼩小⼼心成果都⻑⾧長得差不多...
• 對網站企劃：⽤用HTML規劃網站不是夢想

7. Responsive Web Design(RWD)
• 因應⼿手機上網趨勢逐年
增加的解決⽅方案
• ⼀一種符合各種螢幕的網
站設計⽅方法

8. CSS:media query
根據瀏覽器的寬度套⽤用對應的樣式
http://mediaqueri.es/

9. Bootstrap是？
• Bootstrap 3是最受歡迎的 HTML、CSS 和 JS 框架，
⽤用於開發⾃自適應網⾴頁與以⾏行動優先的網站專案。

10. Grid System

11. Grid System

12. Grid System
xs, sm, md, lg

13. Bootstrap元件
• h1-h6, p, a, ul, ol, li, span, em, i, strong
標題與內⽂文元素
• table 表格
• form: input, select, radio, checkbox, testarea
表單元件：輸⼊入框、選單、單選複選框、⽂文
字區域
• button 按鈕

14. Bootstrap進階元件
• Nav 選單與導覽列
• Dropdown 下拉選單
• Embed 崁⼊入元件
• Button Group 按鈕群組
• Label 標籤
• Alert 警告區塊

15. Bootstrap JS元件
• Modal 彈跳視窗
• Popover 彈出提⽰示
• Collapse 摺疊效果
• Carousel 輪撥效果

16. 問與答
學員可開始練習