目錄
1、移動設備
2、響應式圖片
3、Normalize
4、Containers
1、移動設備
在Bootstrap 3中，我們重寫了整個框架，使其一開始就是對移動設備友好的。這次不是簡單的增加一些可選的針對移動設備的樣式，而是直接融合進了框架的內核中。也就是說，Bootstrap是移動設備優先的。針對移動設備的樣式融合進了框架的每個角落，而不是一個單一的文件。
為了確保適當的繪制和觸屏縮放，需要在<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">
2、響應式圖片
通過添加.img-responsive class可以讓Bootstrap 3中的圖片對響應式布局的支持更友好。其實質是為圖片賦予了max-width: 100%; 和height: auto;屬性，可以讓圖片按比例縮放，不超過其父元素的尺寸。
<img src="<%=path %>/demo/niusb/sprite.png" class="img-responsive" />
3、Normalize
Normalize.css的目的是讓HTML元素在不同瀏覽器里的展現形式一致。
4、Containers
用.container包裹頁面上的內容即可實現居中對齊。在不同的媒體查詢閾值范圍內都為container設置了width，用以匹配柵格系統。
注意，由於設置了padding 和 固定寬度，.container不能嵌套。
<div class="container"> ... </div>
如果，您認為閱讀這篇博客讓您有些收獲，不妨點擊一下右下角的【推薦】。
如果，您希望更容易地發現我的新博客，不妨點擊一下左下角的【關注我】。
如果，您對我的博客所講述的內容有興趣，請繼續關注我的后續博客，我是【Ruthless】。
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。