Bootstrap 響應式設計

簡介

本教程講解如何在網頁布局中應用響應式設計。在課程中,您將學到響應式 Web 設計。隨著移動設備的普及,如何讓用戶通過移動設備瀏覽您的網站獲得良好的視覺效果,已經是一個不可避免的問題了。響應式 Web 設計就是為實現這個目的的有效方法。

什麼是響應式 Web 設計

響應式 Web 設計是一個讓用戶通過各種尺寸的設備瀏覽網站獲得良好的視覺效果的方法。例如,您先在計算機顯示器上瀏覽一個網站,然後在智能手機上瀏覽,智能手機的屏幕尺寸遠小於計算機顯示器,但是你卻沒有感覺到任何差別,兩者的用戶體驗幾乎一樣,這說明這個網站在響應式設計方麵做得很好。

我們已經在我們的流動布局實例中應用了響應性能,並請您在不同的屏幕尺寸下進行瀏覽。您可以通過 ChromeFireFox 的窗口大小調整的擴展來調整瀏覽器。

點擊這裏,可以查看 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 的平板上可見,在桌麵上隱藏不可見,這是默認的。

點擊這裏,下載本教程中使用到的所有 HTML、CSS、JS 和圖片文件。