bootstrap實現(xiàn)自適應(yīng)的方法

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

自適應(yīng)：  不管屏幕多大，都盡量不換行，而只是橫向縮放。

Boostrap的“柵欄”模式

Boostrap自適應(yīng)功能的基礎(chǔ)就是“柵欄"模式，它是將瀏覽器以行列形式去劃分：一共12列，行數(shù)自定義，根據(jù)你所要顯示的元素，確定每個元素顯示的大小即需要的列數(shù)，如果超過范圍，就會自動轉(zhuǎn)行。每列的大小是Boostrap根據(jù)當(dāng)前瀏覽器的大小自動平均分配。

Boostrap的自適應(yīng)功能

其實理解柵欄模式之后，自適應(yīng)功能就簡單很多了，根據(jù)瀏覽器的大小，Boostrap有四種柵欄類名提供使用，用法與Css樣式表類名選擇器樣式調(diào)用是一樣的：

xs：col-xs-1 ~ col-xs-12，多列始終在一行內(nèi)。

sm：col-sm-1 ~ col-sm-12，多列在瀏覽器像素寬度大于等于768px時才在一行內(nèi)。

md：col-md-1 ~ col-md-12，多列在瀏覽器像素寬度大于等于992px時才在一行內(nèi)。

lg：col-lg-1 ~ col-lg-12，多列在瀏覽器像素寬度大于等于1200px時才在一行內(nèi)。

我貼一段偽代碼：

<div class="row">
   <div class="col-sm-4  col-md-1"></div>
   <div class="col-sm-4  col-md-1"></div>
    <div class="col-sm-4  col-md-10"></div>
</div>

這段的意思是當(dāng)瀏覽器的寬度在768——992之間時，采取4：4:4的模式呈現(xiàn)，當(dāng)瀏覽器寬度大于992時，就按1：1:10的模式呈現(xiàn)。

當(dāng)然你也可以四種都是用，細(xì)分的在仔細(xì)點，不管怎么樣，Boostrap會根據(jù)瀏覽器的寬度自動分配列寬度，從而匹配你所想要的呈現(xiàn)模式。

至于它怎么做到的，你不用關(guān)心，你只需要考慮你在手機(jī)上的網(wǎng)頁呈現(xiàn)樣式，或者PC上的呈現(xiàn)樣式的設(shè)計就行了，接下來，就交給Boostrap吧。

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