首頁 >web前端 >Bootstrap教程 >bootstrap怎麼實現自適應

bootstrap怎麼實現自適應

(*-*)浩
(*-*)浩原創
2019-07-11 10:36:1011718瀏覽

自適應:  不管螢幕多大,都盡量不換行,而只是橫向縮放。

bootstrap怎麼實現自適應

Boostrap的「柵欄」模式(推薦學習:Bootstrap影片教學

Boostrap自適應功能的基礎就是「柵欄"模式,它是將瀏覽器以行列形式去劃分:一共12列,行數自定義,根據你所要顯示的元素,確定每個元素顯示的大小即需要的列數,如果超過範圍,就會自動轉行。每個欄位的大小是Boostrap根據目前瀏覽器的大小自動平均分配。

Boostrap的自適應功能

其實理解柵欄模式之後,自適應功能就簡單很多了,根據瀏覽器的大小,Boostrap有四種柵欄類別名提供使用,用法與Css樣式表類別名稱選擇器樣式呼叫是一樣的:

xs:col-xs-1 ~ col-xs-12,多列總是在一行內。

sm:col-sm-1 ~ col-sm-12,多列在瀏覽器像素寬度大於等於768px時才在一行內。

md:col-md-1 ~ col-md-12,多列在瀏覽器像素寬度大於等於992px時才在一行內。

lg:col-lg-1 ~ col-lg-12,多列在瀏覽器像素寬度大於等於1200px時才在一行內。

我貼一段偽代碼:

<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>

這段的意思是當瀏覽器的寬度在768——992之間時,採取4:4:4的模式呈現,當瀏覽器寬度大於992時,就依1:1:10的模式呈現。

當然你也可以四種都是用,細分的在仔細點,不管怎麼樣,Boostrap會根據瀏覽器的寬度自動分配列寬度,從而匹配你所想要的呈現模式。

至於它怎麼做到的,你不用關心,你只需要考慮你在手機上的網頁呈現樣式,或者PC上的呈現樣式的設計就行了,接下來,就交給Boostrap吧。

更多Bootstrap相關技術文章,請造訪Bootstrap教學欄位進行學習!

以上是bootstrap怎麼實現自適應的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn