CSS網頁佈局與Bootstrap 多媒體設計.

Presentation on theme: "CSS網頁佈局與Bootstrap 多媒體設計."— Presentation transcript:

1 CSS網頁佈局與Bootstrap 多媒體設計

2 BootStrap Bootstrap，來自 Twitter，是目前最受歡迎的前 端框架。Bootstrap 是基於 HTML、CSS、 JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更 加快捷。

3 BootStrap Grid System(網格系統) Table(表格) Forms(表單) Buttons(按鈕) Images(圖片)

4 Grid System Grid System通過一系列的行(column)與列(row) 的組合來創建網頁佈局，可以將內容放進設計好 的佈局內。 Grid system的Column將螢幕畫面分割為12格， 可以通過.col-xs-*、col-md-*、col-lg-*來配合 設備畫面大小來縮放畫面。

5 將畫面分成12等分

6 超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px) 行為 總是水平排列 開始堆疊在一起，對應使用者需求做變化 類別名稱 .col-xs-* .col-sm-* .col-md-* .col-lg-* Column數量 12 Column最大值 自動 ~62px ~81px ~97px 偏移 是 列排序

7 BootStap CDN <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href=" <!-- Optional theme --> <link rel="stylesheet" href=" <!-- Latest compiled and minified JavaScript --> <script src="

8 Grid System的工作原理 Row必須包含在.container(固定寬度)或 是.container-fluid （100%寬度）中，以便獲 得合適的排列(alignment)和內邊距(padding)。 使用column來創建水平排版。 內容要放在column內。

9 堆疊到水平排版 <div class=“row”> <div class=“col-md-1”> :

10 手機、平板、桌面

11 多餘的列（column）將另起一行排列

12 列偏移

13 嵌入式row

14 列排序 通过使用 .col-md-push-* 和 .col-md-pull-* 类 就可以很容易的改变(column)的順序

15 練習6:排版 請排出下面範例的佈局