概括
一句话概括,就是根据显示屏幕宽度的大小,自动的选用对应的类的样式。
关键字
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