Material Design风格神框架vuetify 学习笔记(二)

最新推荐文章于 2025-06-11 09:15:21 发布

finedayforu

最新推荐文章于 2025-06-11 09:15:21 发布

阅读量840

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/finedayforu/article/details/119907005

本文介绍了Vuetify框架中关于Material Design的使用，包括断点设置以适应不同设备，使用display和hidden控制元素的可见性，自定义深色/浅色主题，以及内外边距的调整方法，提供了实现响应式和定制化界面的实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. 断点 breakpoint

同bootstrap类似, 我们设计断点, 会让我们在不同长宽不同分辨率的设备上有更好的体验, 是一种快速可行的自适应方法.

断点常常作为参数出现在其他属性中

<v-row>
      <v-col class="col-lg-3 col-md-4 col-sm-6 col-12">
        <v-btn block color="success">text</v-btn>
      </v-col>
      <v-col class="col-lg-3 col-md-4 col-sm-6 col-12">
        <v-btn block color="success">text</v-btn>
      </v-col>
      <v-col class="col-lg-3 col-md-4 col-sm-6 col-12">
        <v-btn block color="success">text</v-btn>
      </v-col>
      <v-col class="col-lg-3 col-md-4 col-sm-6 col-12">
        <v-btn block color="success">text</v-btn>
      </v-col>
      <v-col class="col-lg-3 col-md-4 col-sm-6 col-12">
        <v-btn block color="success">text</v-btn>
      </v-col>
      <v-col class="col-lg-3 col-md-4 col-sm-6 col-12">
        <v-btn block color="success">text</v-btn>
      </v-col>
      <v-col class="col-lg-3 col-md-4 col-sm-6 col-12">
        <v-btn block color="success">text</