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中文網其他相關文章！