样式
全局类
只能出现一次
v-app: 应用根节点v-app-bar: 位于顶部v-system-bar: 位于顶部(高优)v-footer: 位于底部v-bottom-navigation: 位于底部(高优)v-navigation-drawer: 菜单(左右上下均可)v-main: 主体部分(结合路由也需要在此标签内)
若不使用v-app标签包含你的元素, 部分样式将不可用
1
补张图上来
布局类
v-content:v-container: 基本的布局容器(不建议大量使用), 自带内边距v-layout: 方便flex的容器v-flex: 方便flex的子容器
v-row: 栅格容器v-col: 栅格子容器
边距类
- p{类型}-{等级} : padding 内边距
- px : 左右内边距
- py : 上下内边距
- m{类型}-{等级} : margin
- mx : 左右外边距
- my : 上下外边距
例子:
1
2
3
4
5
6
7
8
9
10
11
12
<!-- 5级内边距 四周 -->
<div class="pa-5">Hello, world!</div>
<!-- 5级内边距 上下 -->
<div class="py-5">Hello, world!</div>
<!-- 5级外边距 左右 -->
<div class="my-5">Hello, world!</div>
<!-- 清空内边距 四周-->
<div class="ma-0">Hello, world!</div>
<!-- 顶部高度自动 -->
<div class="mt-auto">Hello, world!</div>
<!-- 距离自动 水平 -->
<div class="mx-auto">Hello, world!</div>
栅格
col: 列的数量(默认)xs: 移动设备sm: 平板电脑md: 笔记本电脑lg: 标准显示器xl: 巨大的显示器
flex
d-flex: 声明flexflex-row: 水平排列flex-row-reverse: 反向
flex-column: 垂直排列flex-column-reverse: 反向
justify-content: 对齐设置justify-start:jusify-end:justify-center:justify-space-between:justify-space-around:
align-items: 子项对齐设置align-start:align-end:align-center:align-baseline:align-stretch:
