Bootstrap 響應(yīng)式設(shè)計(jì)

Bootstrap 響應(yīng)式設(shè)計(jì)

簡(jiǎn)介

本教程講解如何在網(wǎng)頁布局中應(yīng)用響應(yīng)式設(shè)計(jì)。在課程中，您將學(xué)到響應(yīng)式 Web 設(shè)計(jì)。隨著移動(dòng)設(shè)備的普及，如何讓用戶通過移動(dòng)設(shè)備瀏覽您的網(wǎng)站獲得良好的視覺效果，已經(jīng)是一個(gè)不可避免的問題了。響應(yīng)式 Web 設(shè)計(jì)就是為實(shí)現(xiàn)這個(gè)目的的有效方法。

什么是響應(yīng)式 Web 設(shè)計(jì)

響應(yīng)式 Web 設(shè)計(jì)是一個(gè)讓用戶通過各種尺寸的設(shè)備瀏覽網(wǎng)站獲得良好的視覺效果的方法。例如，您先在計(jì)算機(jī)顯示器上瀏覽一個(gè)網(wǎng)站，然后再智能手機(jī)上瀏覽，智能手機(jī)的屏幕尺寸遠(yuǎn)小于計(jì)算機(jī)顯示器，但是你卻沒有感覺到任何差別，兩者的用戶體驗(yàn)幾乎一樣，這說明這個(gè)網(wǎng)站在響應(yīng)式設(shè)計(jì)方面做得很好。

我們已經(jīng)在我們的流動(dòng)布局實(shí)例中應(yīng)用了響應(yīng)性能，并請(qǐng)您在不同的屏幕尺寸下進(jìn)行瀏覽。您可以通過 Chrome 或 FireFox 的窗口大小調(diào)整的擴(kuò)展來調(diào)整瀏覽器。

點(diǎn)擊這里，可以查看 Bootstrap 響應(yīng)式設(shè)計(jì)實(shí)例。

響應(yīng)式 Web 設(shè)計(jì)工作原理

為了應(yīng)用響應(yīng)式 Web 設(shè)計(jì)，您需要?jiǎng)?chuàng)建一個(gè)包含適應(yīng)各種設(shè)備尺寸樣式的 CSS。一旦頁面在特定的設(shè)備上加載，該頁面上使用了各種字體和 Web 開發(fā)技術(shù)，比如媒體查詢（Media Queries），此時(shí)，會(huì)先檢測(cè)設(shè)備的視口大小，然后加載特定于設(shè)備的樣式。

深入研究響應(yīng)式 Web 設(shè)計(jì)的 CSS

我們將通過 'bootstrap-responsive.css' 的學(xué)習(xí)，來了解"響應(yīng)式設(shè)計(jì)"是如何實(shí)現(xiàn)細(xì)微差別的。在這之前，您必須在網(wǎng)頁的頭部區(qū)域加入下面這行代碼：

視口的 meta 標(biāo)簽，重寫了默認(rèn)的視口，并幫助加載與特定視口相關(guān)的樣式。

width 屬性設(shè)置屏幕寬度。它包含一個(gè)值，比如 320，表示 320 像素，或者值為 'device-width'，用來告訴瀏覽器使用原始的分辨率。

initial-scale 屬性是視口最初的比例。當(dāng)設(shè)置為 1.0 時(shí)，將呈現(xiàn)設(shè)備的原始寬度。

當(dāng)然，您必須添加 Bootstrap 的響應(yīng)式 CSS，如下所示：

現(xiàn)在，如果您查找響應(yīng)式 CSS 文件，您會(huì)發(fā)現(xiàn)，在一些公共的聲明后邊（從行號(hào) 10 到 22），有各種以 '@media' 開始的區(qū)域。這就是如何編寫適用于各種設(shè)備的樣式。

第一個(gè)區(qū)域以 '@media (max-width: 480px)' 開始，為最大寬度為 480 像素的設(shè)備設(shè)置樣式。

第二個(gè)區(qū)域以 '@media (max-width: 767px)' 開始，為最大寬度為 767像素的設(shè)備設(shè)置樣式。

第三個(gè)區(qū)域以 '@media (min-width: 768px) 和 (max-width: 979px)' 開始，為最大寬度為 768 像素和最大寬度為 979 像素的設(shè)備設(shè)置樣式。

下一個(gè)區(qū)域是為最大寬度為 979 像素的設(shè)備設(shè)置樣式。所以是以 '@media (max-width: 979px)' 開始。

最后兩個(gè)區(qū)域分別以 '@media (min-width: 980px)' 和 '@media (min-width: 1200px)' 開始，前一個(gè)是為最小寬度為 980 像素的設(shè)備設(shè)置樣式，后一個(gè)是為最小寬度為 1200 像素的設(shè)備設(shè)置樣式。

所以，這樣樣式表的基本作用就是，通過使用 'min-width' 和 'max-width' 屬性，來根據(jù)設(shè)備的最大寬度和最小寬度決定使用的樣式。

解釋

為了讓布局更具響應(yīng)性，Bootstrap 做了三件事情：

1. 修改了網(wǎng)格中列的寬度。

2. 只要有需要，它就使用堆棧元素，而不是浮動(dòng)元素。如果您還不清楚什么是堆棧元素，下面來自 w3.org 的表單可能會(huì)提供一些幫助：

根元素（html）形成了堆棧上下文的根，其他堆棧上下文通過任意定位的元素生成（包括相對(duì)定位元素，有一個(gè) 'z-index' 的計(jì)算值，而不是 'auto'）。堆棧上下文相對(duì)與包含的塊不是必需的。

3.要正確地渲染標(biāo)題和文字它們的尺寸。

更快地開發(fā)對(duì)移動(dòng)設(shè)備友好的布局

Bootstrap 有幾個(gè)實(shí)用的用于開發(fā)對(duì)移動(dòng)設(shè)備友好的布局的類。這些類可在 'responsive.less' 上看到。

.visible-phone，在寬度為 767px 及以下的手機(jī)上可見，在 979px 到 768px 的平板上隱藏不可見，在桌面上隱藏不可見，這是默認(rèn)的。

.visible-tablet，在寬度為 767px 及以下的手機(jī)上隱藏不可見，在 979px 到 768px 的平板上可見，在桌面上隱藏不可見，這是默認(rèn)的。

.visible-desktop，在寬度為 767px 及以下的手機(jī)上隱藏不可見，在 979px 到 768px 的平板上隱藏不可見，在桌面上可見，這是默認(rèn)的。

.hidden-phone，在寬度為 767px 及以下的手機(jī)上隱藏不可見，在 979px 到 768px 的平板上可見，在桌面上可見，這是默認(rèn)的。

.hidden-tablet，在寬度為 767px 及以下的手機(jī)上可見，在 979px 到 768px 的平板上隱藏不可見，在桌面上可見，這是默認(rèn)的。

.hidden-desktop，在寬度為 767px 及以下的手機(jī)上可見，在 979px 到 768px 的平板上可見，在桌面上隱藏不可見，這是默認(rèn)的。