bootstrap是自適應的嗎

bootstrap是自適應的；自適應指的是不管螢幕有多大，都盡量不換行，只是橫向縮放，而bootstrap是透過柵欄系統實現自適應的；柵欄系統透過定義容器的大小，將其分為12等份，將瀏覽器以行列形式去劃分實現自適應。

本教學操作環境：Windows10系統、bootstrap5版、DELL G3電腦

bootstrap是自適應的嗎

bootstrap是自適應的

自適應是不管螢幕多大，都盡量不換行，而只是橫向縮放。而Boostrap是透過「柵欄系統」實現自適應的。

柵欄系統是透過定義容器大小，並將其等分12份，透過一系列行（row）與列（column)，結合媒體查詢製作成強大的響應式柵格系統。

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

工作原理：

資料行（row）必須包含在 .container(固定寬度) 或 .container-fluid（100%寬度）中。以便為其賦予適當的排列（aligment）和內補（padding）。

透過行（row）在水平方向上建立一組列（column），隨著螢幕或視窗（viewport）尺寸的增加，系統會自動分成最多12列。 。

透過列（row）設定padding屬性來建立列之間的間隔。透過.row設定負值margin從而抵消.container元素設定的padding（簡介為行（row）所包含的列（column）抵消padding，也即後面實例中向外突出的原因）。

超過12列，多餘的列另起一行

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會根據瀏覽器的寬度自動分配列寬度，從而匹配你所想要的呈現模式。

相關推薦：bootstrap教學

#

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