bootstrap實(shí)現(xiàn)響應(yīng)式的方法

這篇文章將為大家詳細(xì)講解有關(guān)bootstrap實(shí)現(xiàn)響應(yīng)式的方法，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

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

響應(yīng)式 Web 設(shè)計(jì)是一個(gè)讓用戶通過(guò)各種尺寸的設(shè)備瀏覽網(wǎng)站獲得良好的視覺(jué)效果的方法。

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

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

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

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

您必須在網(wǎng)頁(yè)的頭部區(qū)域加入下面這行代碼：

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

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

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

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

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

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

BootStrap 的響應(yīng)式是基于它柵格系統(tǒng)，通過(guò)為不同控件設(shè)置，諸如 col-(sm/md/ls/xl)-(1/2/3/4/5/6/7/8/9/10/11/12) 來(lái)達(dá)到在不同顯示區(qū)域下，不一樣的布局效果，實(shí)現(xiàn)響應(yīng)式布局。

解釋

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

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

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

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

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

關(guān)于bootstrap實(shí)現(xiàn)響應(yīng)式的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。