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

成都創(chuàng)新互聯(lián)公司是專業(yè)的古交網(wǎng)站建設(shè)公司，古交接單;提供成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、成都外貿(mào)網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行古交網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

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

Boostrap的“柵欄”模式

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

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

其實(shí)理解柵欄模式之后，自適應(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)。

我貼一段偽代碼：

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

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

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

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