溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關bootstrap實現自適應的方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
自適應： 不管屏幕多大，都盡量不換行，而只是橫向縮放。
Boostrap的“柵欄”模式
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實現自適應的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
