CSS網頁佈局與Bootstrap 多媒體設計
BootStrap Bootstrap,來自 Twitter,是目前最受歡迎的前 端框架。Bootstrap 是基於 HTML、CSS、 JAVASCRIPT 的,它簡潔靈活,使得 Web 開發更 加快捷。
BootStrap Grid System(網格系統) Table(表格) Forms(表單) Buttons(按鈕) Images(圖片)
Grid System Grid System通過一系列的行(column)與列(row) 的組合來創建網頁佈局,可以將內容放進設計好 的佈局內。 Grid system的Column將螢幕畫面分割為12格, 可以通過.col-xs-*、col-md-*、col-lg-*來配合 設備畫面大小來縮放畫面。
將畫面分成12等分
超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px) 行為 總是水平排列 開始堆疊在一起,對應使用者需求做變化 類別名稱 .col-xs-* .col-sm-* .col-md-* .col-lg-* Column數量 12 Column最大值 自動 ~62px ~81px ~97px 偏移 是 列排序
BootStap CDN <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Grid System的工作原理 Row必須包含在.container(固定寬度)或 是.container-fluid (100%寬度)中,以便獲 得合適的排列(alignment)和內邊距(padding)。 使用column來創建水平排版。 內容要放在column內。
堆疊到水平排版 <div class=“row”> <div class=“col-md-1”> :
手機、平板、桌面
多餘的列(column)將另起一行排列
列偏移
嵌入式row
列排序 通过使用 .col-md-push-* 和 .col-md-pull-* 类 就可以很容易的改变(column)的順序
練習6:排版 請排出下面範例的佈局