Vuetify2.x学习笔记(叁)：栅格系统(grid)、标签(chips)、提示语(tooltip)、卡片(cards)、头像(avatar)

▲栅格系统

Vuetify附带了一个使用flex-box构建的12点栅格系统
相当于将页面宽度平均分成了12等分 可以独立设置每个元素在页面的的宽度

在栅格系统的最外层是<v-container>标签 该标签能使里面的内容居中水平填充在页面上展示

• 在<v-container>标签上添加fluid 可使其有更小的左右边距

用<v-row>标签包裹每一行的内容

• 使用justify属性设置对齐方式 该属性即为即css的justify-content属性 属性值也是一样的
  例如justify="space-between"

用<v-col>标签包裹每一行中的每一块 里面放入内容
在<v-col>标签上 可以设置在不同大小的屏幕上 该块内容的所占比：

• 用cols属性设置设置组件扩展的默认列数 即xs屏幕大小下的该块内容所占大小 可选值有1-12和auto
• 用sm md lg xl这四个属性设置当处于该屏幕大小时 该块内容所占大小
  

案例：

由于默认是将屏幕横向分成12块 因此 在下面的案例中：
当屏幕处于md大小时 第一个按钮占一半 二三四按钮加起来占半行
当屏幕处于sm大小时 第一个按钮占一整行 二三四按钮加起来占一行
如此 即可实现在不同屏幕大小下不同的页面布局

<v-container>
	<v-row>
		<v-col cols="12" md="6" sm="12">
		  <v-btn block class="primary">第一个按钮</v-btn>
		</v-col>
		<v-col cols="12" md="2" sm="4" >
		  <v-btn block class="primary">第二个按钮</v-btn>
		</