概括
一句話概括,就是根據顯示屏幕寬度的大小,自動的選用對應的類的樣式。
關鍵字
1、col是column簡寫:列;
2、xs是maxsmall簡寫:超小, sm是small簡寫:小, md是medium簡寫:中等, lg是large簡寫:大;
3、-* 表示佔列數,即佔每行row分12列柵格系統比;
4、.col-xs-* 超小屏幕如手機 (<768px)時使用;
.col-sm-* 小屏幕如平板 (768px ≤ 寬度 <992px)時使用;
.col-md-* 中等屏幕如普通顯示器 (992px ≤ 寬度 < 1200px)時使用;
.col-lg-* 大屏幕如大顯示器 (≥1200px)時使用。
解釋
1、柵格系統都會自動的把每行row分爲12列, col-xs-*、col-sm-* 、col-md-*和.col-lg-* 後面跟的參數表示在當前的屏幕中的佔列數。例如 <div class="col-xs-6 col-md-3"></div> 這個div在屏幕中佔的位置是: .col-xs-6 在超小屏幕中佔6列,也就是屏幕的一半(12/6列=2個div), .col-md-3 在中等屏幕中佔3列也就是1/4(12/3列=4個div)。
2、反推,如果我們要在移動端並排顯示3個div(12/3個=每個佔4 列 ),則col-xs-4;在PC端上顯示6個div(12/6個=每個佔2列 ) ,則 col-md-2。
Vuetify中的柵格佈局
Vuetify擁有一個12點的柵格系統,它使用flex-box構建,柵格用於佈局應用程序的內容。它包含5種類型的媒體斷點,用於定位特定的屏幕大小或方向。柵格組件的屬性實際上是從它們定義的屬性派生的類,這允許您輕鬆地將這些輔助類指定爲屬性,同時仍然提供在任何地方使用的類;其實vuetify的柵格與bootstrap的柵格系統是類似的。
其中v-layout就是對應柵格中的一行,而v-flex對應的就是一列;
Vuetify中的margin和padding怎麼表示
----Q:Vuetify中的margin與padding和css中的不一樣,該怎麼表達呢?
----A:同5,也是在class裏面寫<v-card-text class="mr-1 pl-4"></v-card-text>,不同的還有,m就代表margin,p代表padding,r----right,l----left,t----top,b----bottom