Bootstrap建立在12列柵格系統、布局、組件之上。
Bootstrap使用的某些HTML元素和CSS屬性需要文檔類型為HTML5 doctype。因此這一文檔類型必須出現在項目的每個頁面的開始部分。
<!DOCTYPE html> <html lang="en"> ... </html>
Bootstrap 為屏幕、排版和鏈接設置了基本的全局樣式。尤其是,我們:
margin
body
的背景顏色 background-color: white;
@baseFontFamily
、@baseFontSize
和@baseLineHeight
屬性作為我們排版的基礎@linkColor
設置全局鏈接顏色,并且,當鏈接處于 :hover
狀態時才會帶有下劃線這些樣式可以在 scaffolding.less 文件中找到。
從 Bootstrap 2 開始, 老的重置方式被 Normalize.css 取代, 這是 Nicolas Gallagher 和Jonathan Neal 共同維護的一個項目,這一項目還被 HTML5 Boilerplate 所采用。雖然我們在reset.less 文件中使用了許多Normalize的代碼,但是,我們也移除了一些不適合Bootstrap的元素。
Bootstrap默認的柵格系統為12列 ,形成一個940px寬的容器,默認沒有啟用 響應式布局特性 。如果加入響應式布局CSS文件,柵格系統會自動根據可視窗口的寬度從724px到1170px進行動態調整。在可視窗口低于767px寬的情況下,列將不再固定并且會在垂直方向堆疊。
對于簡單的兩列式布局,創建一個 .row
容器,并在容器中加入合適數量的 .span*
列即可。由于默認是12列的柵格,所有 .span*
列所跨越的柵格數之和最多是12(或者等于其父容器的柵格數)。
<div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div>
上面的代碼展示了 .span4
和 .span8
兩列,兩列的和總共是12個柵格。
把列向右移動可使用 .offset*
類。每個類都給列的左邊距增加了指定單位的列。例如,.offset4
將 .span4
右移了4個列的寬度。
<div class="row"> <div class="span4">...</div> <div class="span3 offset2">...</div> </div>
在默認的柵格系統里, 在已有的.span*
內添加一個新的 .row
并加入 .span*
列,就可實現嵌套。被嵌套列中的每列列數總和要等于父級列。
<div class="row"> <div class="span9"> Level 1 column <div class="row"> <div class="span6">Level 2</div> <div class="span3">Level 2</div> </div> </div> </div>
流式柵格系統對每一列的寬度使用百分比而不是像素數量。它和固定柵格系統一樣擁有響應式布局的能力,這就保證它能對不同的分辨率和設備做出適當的調整。
將 .row
替換為 .row-fluid
就能讓任何一行“流動”起來。應用于每一列的類不用改變,這樣能方便的在流式與固定柵格之間切換。
<div class="row-fluid"> <div class="span4">...</div> <div class="span8">...</div> </div>
定義方式和固定網格系統相同:給任何想偏移的列添加 .offset*
即可。
<div class="row-fluid"> <div class="span4">...</div> <div class="span4 offset2">...</div> </div>
和固定柵格的嵌套有一點不同:被嵌套的列數之和要等于12。這是因為流式柵格使用百分比來設置每列的寬度。
<div class="row-fluid"> <div class="span12"> Fluid 12 <div class="row-fluid"> <div class="span6"> Fluid 6 <div class="row-fluid"> <div class="span6">Fluid 6</div> <div class="span6">Fluid 6</div> </div> </div> <div class="span6">Fluid 6</div> </div> </div> </div>
提供了一個通用的固定寬度(也可以變為響應式)的布局方式,僅僅用 <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標簽。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
注意! Bootstrap在默認情況下是沒有引入響應式特性的,因為不是任何情況都需要使用到。我們并不是鼓勵開發者移除此功能, 而是在需要使用的時候才啟用它。
Media queries允許在一些條件基礎上自定義CSS 例如:—ratios、widths、display type, etc— 但通常都是圍繞著 min-width
和 max-width
這兩者。
謹慎的使用media queries,先從你的手機用戶開始吧。對于大型的項目, 應該考慮使用專門的代碼庫, 而不是構筑在media queries之上。
Bootstrap 所支持的幾個media queries都放在了一個文件中, 可以讓你的項目更靈活的去適應不同設備和屏幕分辨率。包括:
類型 | 布局寬度 | 列寬 | 間隙寬度 |
---|---|---|---|
大屏幕 | 大于等于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) { ... }
為了更快的針對移動設備做開發, 下面列出的輔助class用于針對不同設備顯示和隱藏內容。下表是可用的class列表, 以及它們在各個media query布局下的效果。這些class可以在 responsive.less
文件中找到。
Class | 手機 767px 及以下 | 平板 979px 到 768px | 電腦 默認 |
---|---|---|---|
.visible-phone |
顯示 | 隱藏 | 隱藏 |
.visible-tablet |
隱藏 | 顯示 | 隱藏 |
.visible-desktop |
隱藏 | 隱藏 | 顯示 |
.hidden-phone |
隱藏 | 顯示 | 顯示 |
.hidden-tablet |
顯示 | 隱藏 | 顯示 |
.hidden-desktop |
顯示 | 顯示 | 隱藏 |
在有限的情況下使用, 避免創建同一個站點的不同版本。當這些class能對每種設備的展示做有益的補充的時候才使用。響應式工具不能用于table元素,而且本就不支持。
調整瀏覽器的寬度或者在不同的設備上加載該頁面用以測試上述的class。
綠色選中標記用以指示這些class在你當前的可視窗口是可見的。
這里的綠色選中標記用以指示這些class在你當前的可視窗口是隱藏的。