bootstrap是不是自適應的

今天小編給大家分享一下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是不是自適應的”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。