網頁設計 - Bootstrap前端框架

⼤大同⼤大學資研社半學期學會PHP

第⼆二周前端框架 - Bootstrap的魅⼒力

Bootstrap組成

• CSS

• Javascript

• Icons

Bootstrap 使⽤用⽅方法

其實，可以更簡單

Bootstrap CDN⾃自動從網路下載Bootstrap

在開始Bootstrap之前…

先來點傳統傳統網⾴頁前端設計

三欄式設計

header

body

footer

Header

LOGO Menu

Body

左側欄

右側欄

頂欄

中

⺫⽬目前以三欄式排版為⼤大宗 不過也有例外

接著，讓我們進⼊入正題

Grid System 網格排版系統

Grid System：Bootstrap的排版依據⼀一⾏行（1 row）有12個位置可設定四種不同的解析度

．xs、sm、md、lg

Grid System 網格排版系統

Grid System 網格排版系統

程式碼：http://goo.gl/tdir0w

Grid System 網格排版系統．混⽤用型

．offset

．程式碼：http://goo.gl/eZ7Cdl

歡樂的看⽂文件時間（？）

增加Bootstrap效率的⽅方式

增加Bootstrap效率的⽅方式

增加Bootstrap相容性的⽅方式