本系列文章為參照Bootstrap中文教學 自己加一些註解後的內容
固定佈局
提供一個共用固定寬度（也可選擇嚮應式）的佈局方式，僅僅需要 <div class="container">。
- <body>
- <div class="container">
- ...
- </div>
- </body>
流動佈局
使用 <div class="container-fluid"> 建立一個流動、兩列的網頁 — 非常合適應用程式和文件使用。
- <div class="container-fluid">
- <div class="row-fluid">
- <div class="span2">
- <!--Sidebar content-->
- </div>
- <div class="span10">
- <!--Body content-->
- </div>
- </div>
- </div>
基本上跟前面的東西沒有差太多
啟用嚮應式功能
在文件中的 <head> 加入合適的 meta 標籤並且引用額外的樣式表，即可啟用嚮應式 CSS。如果你已經在客製化網頁取得一個 Bootstrap，只需要加入 meta 標籤。
之前有提過,在bootstrap中,響應式功能預設是關閉的,所以採取此方法將可將之開啟
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
這邊簡介一下meta 可以把meta的name當作一個類別的名稱, content則是其內容
width當然指的就是其寬度,而initial-scale則是第一次進入此頁面會顯示的比例大小(最小0.25最大5)
其他常用的還有,minimum/maximum-scale 或user-scalabe(類似zoom的效果 值是1 or 0)
關於嚮應式 Bootstrap
媒體查詢（Media queries）允許在一些條件基礎上自定義 CSS，例如：ratios、widths、display type等，但通常都是關注在 min-width 和 max-width。
- 修改網格中列的寬度
- 需要時，用堆疊元素替代浮動
- 調整標題與文字的大小以便更合適各種設備
謹慎使用媒體查詢，先從你的手機用戶上開始。對於大型專案，應該考慮專門的程式碼來處理，而不是使用媒體查詢。
支援設備
Bootstrap 支援的媒體查詢都放在一個檔案中，這讓你的專案更靈活去適應不同的設備與螢幕解析度。包含：
| 類型 | 佈局寬度 | 列寬度 | 間隙寬度 |
|---|---|---|---|
| 大螢幕 | 1200px（含）以上 | 70px | 30px |
| 預設 | 980px（含）以上 | 60px | 20px |
| 平板電腦 | 768px（含）以上 | 42px | 20px |
| 智慧手機到平版電腦 | 767px（含）以下 | 流動式列，固定寬度 | |
| 智慧手機 | 480px（含）以下 | 流動式列，固定寬度 | |
- /* 大螢幕 */
- @Media (min-width: 1200px) { ... }
- /* 平板電腦、橫向手機和一般桌機解析度 */
- @Media (min-width: 768px) and (max-width: 979px) { ... }
- /* 橫向智慧手機到竪立平板電腦解析度 */
- @Media (max-width: 767px) { ... }
- /* 橫向智慧手機及其他更小解析度 */
- @Media (max-width: 480px) { ... }
譯者註:平板電腦與智慧手機絕大部分都支援轉向功能，所以是一個螢幕兩種解析度。
其實去檢閱一下bootstrap官網上提供的範例網站,例如"這個"
看一下他們的原始碼,關於這些裝置的css定義其實都寫在responsive.css這個檔案中
我想要自己修改應該也是沒問題的
嚮應式輔助類別
為了更快速針對移動設備進行開發，下面列出輔助類別用於不同設備顯示和隱藏內容。下表是可用的類別和它們在媒體查詢佈局效果。這些類別如以在 responsive.less 找到。
| 類別 | 手機767px（含）以下 | 平版979px 到 768px | 電腦預設 |
|---|---|---|---|
.visible-phone |
顯示 | 隱藏 | 隱藏 |
.visible-tablet |
隱藏 | 顯示 | 隱藏 |
.visible-desktop |
隱藏 | 隱藏 | 顯示 |
.hidden-phone |
隱藏 | 顯示 | 顯示 |
.hidden-tablet |
顯示 | 隱藏 | 顯示 |
.hidden-desktop |
顯示 | 顯示 | 隱藏 |
何時使用
在有限的基礎下使用，應避免在同一網站內使用不同版本。當這些類別對於設備展示有用的才使用。嚮應式工具不應該使用在 table 元素，而且本來就不支持。
關於網站架構就介紹到這裡
留言列表
