## `布局的時候什么時候用xs,sm,md,lg?`
參考知乎等網上資料,整理的!
當你想要內容大小隨著屏幕大小自動適應的時候就可以使用bootstrap,也就是在pc端以及不同手機(顯示屏大小不同)端內容也能夠正常顯示的時候。
一行最多占十二個標簽,不管是大屏還是超小屏的時候。
col-lg一般用于大屏設備,
(min-width:1200px);
col-md一般用于中屏設備,
(min-width:992px);
col-sm一般用于小屏設備,
(min-width:768px);
col-xs用于超小型設備,
(max-width:768px);
后面跟數字是幾,也就是占幾份(每個占據12份中的幾份),
比如是4,也就是一行可以顯示3個;
或者12,就是一行可以顯示1個。
關于使用,一般設置的話四個屬性都用到會比較好,這樣就可以在不同屏幕上很好的展示。
比如你有了12個section標簽,你想讓他們在不同屏幕大小的時候有不同的展示方式,大屏時一行顯示6個,中屏時一行顯示3個,小屏時一行展示2個,超小屏一行展示1個,你就可以在每一個section標簽里面這樣寫:
<section class = “col-lg-2 col-md-4 col-sm-6 col-xs-12”></section>
HTML代碼:
<div class="col-xs-12 col-sm-9 col-md-6 col-lg-3">
</div>
當屏幕尺寸
小于 768px 的時候,用 col-xs-12 類對應的樣式;
在 768px 到 992px 之間的時候,用 col-sm-9 類對應的樣式;
在 992px 到 1200px 之間的時候,用 col-md-6 類對應的樣式;
大于 1200px 的時候,用 col-lg-3 類對應的樣式;
- web 前端知識
- 什么是Vue,
- vue-axios的使用及其中get與post網絡請求
- Ajax實現步驟和原理
- 什么是AJAX?
- AJAX的工作原理
- 那如何使用Ajax技術?
- css 新特性
- 什么是深拷貝和淺拷貝
- Vue
- axios封裝和使用
- axios基本用法
- Vue-cli 安裝
- 布局的時候什么時候用xs,sm,md,lg?
- js.的點擊事件
- vue路由傳參的三種基本方式
- Vue路由傳參與取值的兩種方法
- HTML
- html5的新特性
- Html5新增的標簽有哪些?
- CSS
- CSS偽類選擇器 奇偶匹配nth-child(even)
- 房銀-項目
- 服務器網址
- 項目網址
- VS -Code
- Vue 單頁應用 的 首屏優化
- 什么是DTO
- JavaScript
- element-ui 表單校驗
- JavaScript-2
- JavaScript - Number.isInteger() 方法用來判斷給定的參數是否為整數
- JS回調函數--簡單易懂有實例
- bootstrap 概念 和使用方法
- react框架- 知識
- react中class xx extends component{}和React.createClass({})的區別?