Bootstrap 響應式設計
簡介
本教程講解如何在網頁佈局中應用響應式設計。 在課程中，您將學到響應式Web 設計。 隨著移動設備的普及，如何讓用戶通過移動設備瀏覽您的網站獲得良好的視覺效果，已經是一個不可避免的問題了。 響應式Web 設計就是為實現這個目的的有效方法。
什麼是響應式Web 設計
響應式Web 設計是一個讓用戶通過各種尺寸的設備瀏覽網站獲得良好的視覺效果的方法。 例如，您先在計算機顯示器上瀏覽一個網站，然後再智能手機上瀏覽，智能手機的屏幕尺寸遠小於計算機顯示器，但是你卻沒有感覺到任何差別，兩者的用戶體驗幾乎一樣，這說明這個網站在響應式設計方面做得很好。
我們已經在我們的流動佈局實例中應用了響應性能 ，並請您在不同的屏幕尺寸下進行瀏覽。 您可以通過Chrome或FireFox的窗口大小調整的擴展來調整瀏覽器。
點擊這裡，可以查看Bootstrap響應式設計實例 。
響應式Web 設計工作原理
為了應用響應式Web 設計，您需要創建一個包含適應各種設備尺寸樣式的CSS。 一旦頁面在特定的設備上加載，該頁面上使用了各種字體和Web 開發技術，比如媒體查詢（Media Queries），此時，會先檢測設備的視口大小，然後加載特定於設備的樣式。
深入研究響應式Web 設計的CSS
我們將通過'bootstrap-responsive.css' 的學習，來了解"響應式設計"是如何實現細微差別的。 在這之前，您必須在網頁的頭部區域加入下面這行代碼：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
視口的meta 標籤，重寫了默認的視口，並幫助加載與特定視口相關的樣式。
width屬性設置屏幕寬度。 它包含一個值，比如320，表示320 像素，或者值為'device-width'，用來告訴瀏覽器使用原始的分辨率。
initial-scale屬性是視口最初的比例。 當設置為1.0 時，將呈現設備的原始寬度。
當然，您必須添加Bootstrap 的響應式CSS，如下所示：
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
現在，如果您查找響應式CSS文件，您會發現，在一些公共的聲明後邊（從行號10到22），有各種以'@media'開始的區域。 這就是如何編寫適用於各種設備的樣式。
第一個區域以' @media (max-width: 480px) '開始，為最大寬度為480像素的設備設置樣式。
第二個區域以' @media (max-width: 767px) '開始，為最大寬度為767像素的設備設置樣式。
第三個區域以' @media (min-width: 768px)和(max-width: 979px) '開始，為最小寬度為768像素和最大寬度為979像素的設備設置樣式。
下一個區域是為最大寬度為979 像素的設備設置樣式。 所以是以' @media (max-width: 979px) '開始。
最後兩個區域分別以' @media (min-width: 980px)'和'@media (min-width: 1200px) '開始，前一個是為最小寬度為980像素的設備設置樣式，後一個是為最小寬度為1200 像素的設備設置樣式。
所以，這樣樣式表的基本作用就是，通過使用' min-width '和' max-width '屬性，來根據設備的最大寬度和最小寬度決定使用的樣式。
解釋
為了讓佈局更具響應性，Bootstrap 做了三件事情：
1. 修改了網格中列的寬度。
2. 只要有需要，它就使用堆棧元素，而不是浮動元素。 如果您還不清楚什麼是堆棧元素，下面來自w3.org 的表單可能會提供一些幫助：
根元素（html）形成了堆棧上下文的根，其他堆棧上下文通過任意定位的元素生成（包括相對定位元素，有一個'z-index' 的計算值，而不是'auto'）。 堆棧上下文相對與包含的塊不是必需的。
3.要正確地渲染標題和文字它們的尺寸。
更快地開發對移動設備友好的佈局
Bootstrap 有幾個實用的用於開發對移動設備友好的佈局的類。 這些類可在'responsive.less' 上看到。
.visible-phone ，在寬度為767px及以下的手機上可見，在979px到768px的平板上隱藏不可見，在桌面上隱藏不可見，這是默認的。
.visible-tablet ，在寬度為767px及以下的手機上隱藏不可見，在979px到768px的平板上可見，在桌面上隱藏不可見，這是默認的。
.visible-desktop ，在寬度為767px及以下的手機上隱藏不可見，在979px到768px的平板上隱藏不可見，在桌面上可見，這是默認的。
.hidden-phone ，在寬度為767px及以下的手機上隱藏不可見，在979px到768px的平板上可見，在桌面上可見，這是默認的。
.hidden-tablet ，在寬度為767px及以下的手機上可見，在979px到768px的平板上隱藏不可見，在桌面上可見，這是默認的。
.hidden-desktop ，在寬度為767px及以下的手機上可見，在979px到768px的平板上可見，在桌面上隱藏不可見，這是默認的。