当前位置：首页 > article >正文

Vuetify3响应式布局

article 2024/10/28 3:58:36

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>

效果图：