鍍金池/ 教程/ HTML/ 概覽
警告框
標簽頁
代碼
輪播
進度條
輔助類
按鈕組
社區(qū)
標簽
導航
響應式工具
禁止響應式布局
工具提示
概覽
媒體對象
概覽
具有響應式特性的嵌入內容
Well
折疊
下載
對第三方組件的支持
Glyphicons 字體圖標
編譯 CSS 和 JavaScript 文件
徽章
柵格系統(tǒng)
瀏覽器和設備的支持情況
輸入框組
表格
滾動監(jiān)聽
下拉菜單
排版
巨幕
按鈕
頁頭
使用 Sass
包含的內容
縮略圖
模態(tài)框
基本模板
面版
圖片
路徑導航
分頁
導航條
警告框
過渡效果
從 v2.x 版本升級到 v3.x 版本
工具
可訪問性
彈出框
按鈕式下拉菜單
表單
列表組
按鈕
使用 Less
下拉菜單

概覽

深入了解 Bootstrap 底層結構的關鍵部分,包括我們讓 web 開發(fā)變得更好、更快、更強壯的最佳實踐。

HTML5 文檔類型

Bootstrap 使用到的某些 HTML 元素和 CSS 屬性需要將頁面設置為 HTML5 文檔類型。在你項目中的每個頁面都要參照下面的格式進行設置。

    <!DOCTYPE html>
    <html lang="zh-CN">
      ...
    </html>

移動設備優(yōu)先

在 Bootstrap 2 中,我們對框架中的某些關鍵部分增加了對移動設備友好的樣式。而在 Bootstrap 3 中,我們重寫了整個框架,使其一開始就是對移動設備友好的。這次不是簡單的增加一些可選的針對移動設備的樣式,而是直接融合進了框架的內核中。也就是說,Bootstrap 是移動設備優(yōu)先的。針對移動設備的樣式融合進了框架的每個角落,而不是增加一個額外的文件。

為了確保適當的繪制和觸屏縮放,需要在 <head> 之中添加 viewport 元數據標簽。

    <meta name="viewport" content="width=device-width, initial-scale=1">

在移動設備瀏覽器上,通過為視口(viewport)設置 meta 屬性為 user-scalable=no 可以禁用其縮放(zooming)功能。這樣禁用縮放功能后,用戶只能滾動屏幕,就能讓你的網站看上去更像原生應用的感覺。注意,這種方式我們并不推薦所有網站使用,還是要看你自己的情況而定!

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

排版與鏈接

Bootstrap 排版、鏈接樣式設置了基本的全局樣式。分別是:

  • body 元素設置 background-color: #fff;
  • 使用 @font-family-base、@font-size-base@line-height-base a變量作為排版的基本參數
  • 為所有鏈接設置了基本顏色 @link-color ,并且當鏈接處于 :hover 狀態(tài)時才添加下劃線

這些樣式都能在 scaffolding.less 文件中找到對應的源碼。

Normalize.css

為了增強跨瀏覽器表現的一致性,我們使用了 Normalize.css,這是由 Nicolas GallagherJonathan Neal 維護的一個CSS 重置樣式庫。

布局容器

Bootstrap 需要為頁面內容和柵格系統(tǒng)包裹一個 .container 容器。我們提供了兩個作此用處的類。注意,由于 padding 等屬性的原因,這兩種 容器類不能互相嵌套。

.container 類用于固定寬度并支持響應式布局的容器。

    <div class="container">
      ...
    </div>

.container-fluid 類用于 100% 寬度,占據全部視口(viewport)的容器。

    <div class="container-fluid">
      ...
    </div>