Bootstrap 3 的設計目標是移動裝置優先，然後才是桌面裝置。

Bootstrap 確保移動端適當的繪製和觸屏縮放，需要在網頁的 head 之中新增 viewport meta 標籤。

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

• width 屬性控制裝置的寬度。假設您的網站將被帶有不同螢幕解析度的裝置瀏覽，那麼將它設定為 device-width 可以確保它能正確呈現在不同裝置上
• initial-scale=1.0 確保網頁載入時，以 1:1 的比例呈現，不會有任何的縮放
• 在移動裝置瀏覽器上，通過為 viewport meta 標籤新增 user-scalable=no 可以禁用其縮放（zooming）功能
• 通常情況下，maximum-scale=1.0 與 user-scalable=no 一起使用。這樣禁用縮放功能後，使用者只能滾動螢幕，就能讓您的網站看上去更像原生應用的感覺。

響應式影象

.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

<img src="..." class="img-responsive" alt="響應式影象">
 

類表明影象呈現為 inline-block。當把元素的 display 屬性設定為 inline-block，元素相對於它周圍的內容以內聯形式呈現，但與內聯不同的是，這種情況下我們可以設定寬度和高度。

基本的全域性顯示

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #ffffff;
}

排版

使用 @font-family-base、 @font-size-base 和 @line-height-base 屬性作為排版樣式。

連結樣式

通過屬性 @link-color 設定全域性連結的顏色

避免跨瀏覽器的不一致

Bootstrap 使用 Normalize 來建立跨瀏覽器的一致性

Normalize.css 是一個很小的 CSS 檔案，在 HTML 元素的預設樣式中提供了更好的跨瀏覽器一致性（引入檔案）

容器 container

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

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