Vuetify3响应式布局
vuetify3是支持栅格系统的,而且逻辑跟bootstrap基本差不多,下面讲一下vuetify中怎么使用栅格系统。
vuetify官方文档栅格布局链接https://vuetifyjs.com/zh-Hans/components/grids/
1.媒体断点
vuetify3中有5种类型的媒体断点
2.v-container
v-container
提供了居中和水平填充您网站内容的能力。这相当于bootstrap中的container类名。
主要作用就是,要不要屏幕两侧流出一定的空白。
<template>
<v-app>
<v-container>
<h1 class="bg-blue">响应式布局</h1>
</v-container>
</v-app>
</template>
效果图:
注意,v-container默认是有16px的内边距的,padding: 16px。
如果要填满整个屏幕,可以用v-container的fluid属性(记得清除内边距):
<template>
<v-app>
<v-container fluid class="pa-0">
<h1 class="bg-blue">响应式布局</h1>
</v-container>
</v-app>
</template>
效果图:
3.v-col ,v-row
v-row
是 v-col
的包装组件。它使用 flex 属性来控制其内部列的布局和流程。它使用标准间隔 24px。
v-col
是一个容器持有者组件,它必须是 v-row
的直接子元素。
<template>
<v-app>
<v-container fluid class="pa-0">
<v-row>
<v-col cols="3">
<h1 class="bg-green">占据3份</h1>
</v-col>
<v-col cols="3">
<h1 class="bg-green">占据3份</h1>
</v-col>
<v-col cols="3">
<h1 class="bg-green">占据3份</h1>
</v-col>
<v-col cols="3">
<h1 class="bg-green">占据3份</h1>
</v-col>
</v-row>
</v-container>
</v-app>
</template>
效果图:
4.小demo
<template>
<v-app>
<v-container class="py-0">
<v-card>
<v-row>
<v-col cols="12" md="6" class="bg-blue py-8 d-flex flex-column align-center">
<v-img
src="https://cdn.vuetifyjs.com/docs/images/brand-kit/v-logo-circle.png"
width="300"
cover
>
</v-img>
<h1 class="text-center">Vuetify Company</h1>
</v-col>
<v-col cols="12" md="6" class="d-flex flex-column justify-center align-center">
<div>
<div>
<h2>John Leider</h2>
<p>CEO,Vuetify Company</p>
</div>
<div class="d-flex pt-4">
<v-icon class="mr-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>phone</title><path d="M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.69,14.9 16.08,14.82 16.43,14.93C17.55,15.3 18.75,15.5 20,15.5A1,1 0 0,1 21,16.5V20A1,1 0 0,1 20,21A17,17 0 0,1 3,4A1,1 0 0,1 4,3H7.5A1,1 0 0,1 8.5,4C8.5,5.25 8.7,6.45 9.07,7.57C9.18,7.92 9.1,8.31 8.82,8.59L6.62,10.79Z" /></svg>
</v-icon>
<p>905-9083</p>
</div>
<div class="d-flex pt-4">
<v-icon class="mr-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>map-marker</title><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z" /></svg>
</v-icon>
<p>Vuetify Land</p>
</div>
<div class="d-flex pt-4">
<v-icon class="mr-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>email</title><path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z" /></svg>
</v-icon>
<p>John@vuetiy.com</p>
</div>
</div>
</v-col>
</v-row>
</v-card>
</v-container>
</v-app>
</template>
效果图:
在屏幕小于md的时候: