bootstrap中怎么實現(xiàn)響應(yīng)式

本篇文章為大家展示了bootstrap中怎么實現(xiàn)響應(yīng)式，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

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

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

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

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

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

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

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

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

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

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

解釋

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

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

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

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

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

上述內(nèi)容就是bootstrap中怎么實現(xiàn)響應(yīng)式，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。