網站製作⼯工作坊Twitter Bootstrap元件介紹

2015/04/25 元智⼤大學資訊傳播學系 陳俊安

!

這堂課你將會學到• Bootstrap

• 什麼是Bootstrap

• 如何使⽤用？

前端框架與Bootstrap

Framework• 有經驗的開發者把常⽤用的功能預先寫好• 排版、html元素、外觀、互動功能• 對後端開發者：簡單套⽤用不錯看的外觀不⽤用再被嫌棄功能強⼤大卻醜的要命

• 對前端開發者：⼀一個⽅方便穩固的基礎，擴充性⾼高。但要⼩小⼼心成果都⻑⾧長得差不多...

• 對網站企劃：⽤用HTML規劃網站不是夢想

Responsive Web Design(RWD)• 因應⼿手機上網趨勢逐年增加的解決⽅方案

• ⼀一種符合各種螢幕的網站設計⽅方法

CSS:media query根據瀏覽器的寬度套⽤用對應的樣式

http://mediaqueri.es/

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

Grid System

Grid System

Grid System xs, sm, md, lg

Bootstrap元件• h1-h6, p, a, ul, ol, li, span, em, i, strong 標題與內⽂文元素

• table 表格• form: input, select, radio, checkbox, testarea 表單元件：輸⼊入框、選單、單選複選框、⽂文字區域

• button 按鈕

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

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

問與答學員可開始練習