概覽 · 偽全棧技術匯總

# HTML5文檔類型 Bootstrap使用到的某些HTML元素和CSS屬性需要將頁面設置為HTML5文檔類型。在你項目中的每個頁面都要參照下面的格式進行設置。 ~~~ <!DOCTYPE html> <html lang="zh-cn"> ... </html> ~~~ # 移動設備優先為了確保適當的繪制和觸屏縮放，需要在<head>之中添加viewport元數據標簽。 `<meta name="viewport" content="width=device-width, initial-scale=1.0">` 在移動設備瀏覽器上，通過為viewport meta標簽添加user-scalable=no可以禁用其縮放（zooming）功能。這樣禁用縮放功能后，用戶只能滾動屏幕，就能讓你的網站看上去更像原生應用的感覺。注意，這種方式我們并不推薦所有網站使用，還是要看你自己的情況而定！ `<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">` # 響應式圖片通過添加.img-responsive class可以讓Bootstrap 3中的圖片對響應式布局的支持更友好。其實質是為圖片賦予了max-width: 100%; 和height: auto;屬性，可以讓圖片按比例縮放，不超過其父元素的尺寸。 `<img src="..." class="img-responsive" alt="Responsive image">` # 排版和鏈接 Bootstrap設置了全局樣式，包括顯示、排版和鏈接。尤其是，我們還： * 為body標簽設置了background-color: #fff;樣式 * 設置了排版的基本屬性@font-family-base、@font-size-base和@line-height-base * Set the global link color via @link-color and apply link underlines only on :hover 這些樣式可以在scaffolding.less文件中找到。 # Normalize.css 為了增強跨瀏覽器表現的一致性，我們使用了 Normalize.css，這是由 Nicolas Gallagher 和 Jonathan Neal 維護的一個CSS 重置樣式庫。 # 布局容器 Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 容器。我們提供了兩個作此用處的類。注意，由于 padding 等屬性的原因，這兩種容器類不能互相嵌套。 `.container` 類用于固定寬度并支持響應式布局的容器。 `.container-fluid` 類用于 100% 寬度，占據全部視口（viewport）的容器。