架構

Bootstrap 是建立在12列網格、佈局和元件之上。

ASP.NET Web API 2實戰訓練營 ASP.NET Web API是微軟打造的REST開發框架,可輕易建置HTTP服務,實戰課程拳拳到肉教您如何上場殺敵,K.O.各種用戶端。 SkillTree 報名

必須使用HTML5 doctype

Bootstrap 使用的某些 HTML 元素和 CSS 屬性必須使用 HTML5 doctype。因此,所有網頁開頭中都必須包含此宣告。

<!DOCTYPE html>
<html lang="en">
  ...
</html>

佈局與連結

Bootstrap 為螢幕、佈局和連結設置了基本的全域樣式。尤其是,我們:

  • 移除 body 的 margin
  • 設置了 body 的背景顏色 background-color: white;
  • 使用 @baseFontFamily@baseFontSize@baseLineHeight 屬性做為佈局的基礎
  • 透過 @linkColor 設置全域連結顏色,當連結處於 :hover 狀態時才會帶有下劃線

這些樣式可以在 scaffolding.less 找到。

譯者註:Bootstrap 是使用 LESS 撰寫,如果讀者習慣使用 SCSS 的話,可以參考 bootstrap.scss 這個專案的內容。

用Normalize重置樣式

在 Bootstrap 2 開始,舊的重置方式被 Normalize.css 取代,這是由 Nicolas GallagherJonathan Neal 共同維護,並且還被 HTML5 Boilerplate 採用。雖然我們在 reset.less 裡使用許多 Normalize,不過我們也移除不合適 Bootstrap 的元素。

網格範例

預設的 Bootstrap 網格系統(grid system)為 12 列,這會做出一個 940px 寬的容器,並且沒有 嚮應式特性。如果加入嚮應式 CSS 檔案,網格系統會自動依可視視窗的寬度從 724px 到 1170px 進行動態調整。可視視窗在低於 767px 寬度下,列會變成流動且垂直堆疊。

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

基礎網格的 HTML

一個簡易的兩列佈局,建立一個 .row 類別量,然在容器中加入適量的 .span* 的列。由於預設是 12 列的網格,所以 .span* 列網格量總合最多為 12(或者等於父容器的網格數)。

譯者註:----這是行,||||這是列。1 行(row)可容納 12 列(column)。

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

在上面範例,我們使用了 .span4.span8 兩列,兩列的總合共 12 列(1 行)。

偏移列

把列向右移動使用 .offset* 類別。每個類別都會給列的左邊距(left margin)加增指定偏移的列數。例如,.offset4.span4 右偏移 4 個列的寬度。

4
3 offset 2
3 offset 1
3 offset 2
6 offset 3
<div class="row">
  <div class="span4">...</div>
  <div class="span3 offset2">...</div>
</div>

巢狀列

在預設的網格中,在已知的 .span* 內加入一個新的 .row.span* 列,就能巢狀你的內容。巢狀行中的列總數最大數應該等於父列數。

Level 1 column
Level 2
Level 2
<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>

流動網格範例

流動網格系統裡的列寬度使用百分比替代像素。它和固定網格系統一樣擁有嚮應式能力,這能保證它能對關鍵的螢幕解析度和設備做出調整。

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

基本流動網格的 HTML

.row 替代為 .row-fluid 就能讓任何一行“流動(fluid)”起來。用於列裡的類別(.span*)不用改變,這樣方便在流動與固定網格之間轉換。

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

流動的偏移

操作方式與固定網格系統偏移一樣:給任何想偏移的列加入 .offset*

4
4 offset 4
3 offset 3
3 offset 3
6 offset 6
<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span4 offset2">...</div>
</div>

流動的巢狀

這和固定網頁的巢狀就有點不同:巢狀的列數總合要等於 12。這是因為流動網格使用百分比來設置每列的寬度。

Fluid 12
Fluid 6
Fluid 6
Fluid 6
Fluid 6
<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 預設情況下沒有引用嚮應式功能,這是因為不是任何情況都需要嚮應式。我們不鼓勵開發者移除此功能,而是在需要時才啟用它。

關於嚮應式 Bootstrap

Responsive devices

媒體查詢(Media queries)允許在一些條件基礎上自定義 CSS,例如:ratios、widths、display type等,但通常都是關注在 min-widthmax-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) { ... }

譯者註:平板電腦與智慧手機絕大部分都支援轉向功能,所以是一個螢幕兩種解析度。

嚮應式輔助類別

為了更快速針對移動設備進行開發,下面列出輔助類別用於不同設備顯示和隱藏內容。下表是可用的類別和它們在媒體查詢佈局效果。這些類別如以在 responsive.less 找到。

類別 手機 767px(含)以下 平版 979px 到 768px 電腦 預設
.visible-phone 顯示
.visible-tablet 顯示
.visible-desktop 顯示
.hidden-phone 顯示 顯示
.hidden-tablet 顯示 顯示
.hidden-desktop 顯示 顯示

何時使用

在有限的基礎下使用,應避免在同一網站內使用不同版本。當這些類別對於設備展示有用的才使用。嚮應式工具不應該使用在 table 元素,而且本來就不支持。

嚮應式工具測試情境

調整瀏覽器的大小或在不同設備上載入嚮應式頁面,以測試上述類別。

在...顯示

綠色勾標記指示此類別在你現在視窗裡是顯示的。

  • Phone✔ 智慧手機
  • Tablet✔ 平板電腦
  • Desktop✔ 電腦

在...隱藏

綠色勾標記指示此類別在你現在視窗裡是隱藏的。

  • Phone✔ Phone
  • Tablet✔ Tablet
  • Desktop✔ Desktop
comments powered by Disqus