浅析 ant design vue 中 xs sm md lg xl xxl

最新推荐文章于 2024-04-01 22:15:52 发布
最新推荐文章于 2024-04-01 22:15:52 发布
阅读量6.7k 收藏 12
点赞数 5
分类专栏： vue 文章标签： vue 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/boyikenan123/article/details/124479552
版权

含义

参照 Bootstrap 的 响应式设计，预设六个响应尺寸：xs sm md lg xl xxl。

具体解释

  • xs extra Small 超小
  • sm small 小
  • md medium 中等的
  • lg large 大的
  • xl extra Large 超大
  • xxl 特大号

下面我们通过代码演示

<template>
  <a-row>
    <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">
      Col
    </a-col>
    <a-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4">
      Col
    </a-col>
    <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">
      Col
    </a-col>
  </a-row>
</template>

我的大号显示器显示结果
在这里插入图片描述
然后我讲窗口缩小
在这里插入图片描述
有点意思了，在继续缩小

在这里插入图片描述
看完大家是不是就明白了

胖布欧VS卡卡罗特
关注
  • 5
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
ant design vue中表格指定格式渲染方式
01-18
注意点：定义的columns一定要写在data中，否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别 渲染方法1： 指定渲染函数： const columns = [ { title: '排名', dataIndex: 'key', customRender: renderContent // 渲染函数的规则 }, { title: '搜索关键词', dataIndex: 'keyword', customRender: (text, row, index) => { if (index < 4) { // 前4行
cssBootstrap栅格布局的四种大小xs，sm，md，lg,xl
热门推荐
m0_49471668的博客
06-26 2万+
前端为了页面在不同大小的设备上也能够正常显示，通常会使用栅格布局的方式来实现。col-*-*visible-*-*hidden_*_* 中间可为xs,xsm,md,lg等表示大小的单词的缩写右边为1-12之内、用于元素所占列数columns的数值xs extra small超小sm smallmd meddlelg largexl extra large超大col-*对应所有设备 col-sm-平板--屏幕宽度等于或者大于576pxcol-md-桌面显示屏--屏幕宽度大于或者等于768pxcol-lg-大桌
ant design vue中日期选择框混合时间选择器的用法说明
01-22
首先时间格式化用到moment方法，需要在页面中引入moment组件 import moment from ‘moment’ 结构代码： <a> triggerNode[removed] format=YYYY-MM-DD HH:mm:ss v-decorator=[ 'pushtime', { rules: [{ required: true, message: '请输入发布时间!' }]
ElementUI响应式Layout布局xs,sm,md,lg,xl
最新发布
Mxy18851251178的博客
04-01 710
参照了的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。包含的类名及其含义为：hidden-xs-only - 当视口在 xs 尺寸时隐藏hidden-sm-only - 当视口在 sm 尺寸时隐藏hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏hidden-md-only - 当视口在 md 尺寸时隐藏。
用于设置ant-design-vue中table组件的列宽可拖拽
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
Bootstrap布局之栅格系统详解
11-25
前些天学习了bootstrap,把其中的栅格系统整理出来，如有错误，欢迎指正。 概要，栅格系统针对pc,pad,移动端开发出响应式web页面，根据不同屏幕分辨率有针对不同的解决方法。 (0.1, 屏幕设备尺寸大于1200px 选择col-lg  (0.2. 屏幕设备尺寸在970px到1200px 选择col-md  (0.3. 屏幕设备尺寸在768px到970px 选择col-sm  (0.4. 屏幕设备尺寸小于768px 选择col-xs 1.栅格系统把页面分为12栏（最多12栏），如下：  <!DOCTYPE html> <html lang="zh-cn"> <head> <met
Ant Design Vue 添加区分中英文的长度校验功能
10-15
主要介绍了Ant Design Vue 添加区分中英文的长度校验功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下功能，
VUE响应式布局
askuld的博客
04-10 747
通过基础的 24 分栏，迅速简便地创建布局：并参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl xxl。
Bootstrap笔记(十四) 常用类别 - 间距
XI_MILU的博客
09-16 2312
常用类别 - 间距间距 间距 Bootstrap提供的间距类别可以套用到 xs ~ xxl 等响应式断点，命名形式如下: xs的间距类别命名形式为 {property} {sides} - {size} sm、md、lg、xl、xxl的间距类别命名形式为 {property} {sides} - {breakpoint} - {size} property(属性)的设定值如下: m : 边界 (margin) p : 留白 (padding) sides(边)的设定值如下: t : 上方 (ex.
vue AntD中栅格布局的四种大小xs,sm,md,lg
浪潮行舟_chenjin2136
02-15 6345
前端为了页面在不同大小的设备上也能够正常显示，通常会使用栅格布局的方式来实现。cssBootstrap栅格布局的四种大小xs,sm,md,lg。
栅格布局 xs sm md lg
love_pgme的博客
07-16 5273
概括 一句话概括，就是根据显示屏幕宽度的大小，自动的选用对应的类的样式。 关键字 1、col是column简写：列； 2、xs是maxsmall简写：超小，sm是small简写：小，md是medium简写：中等，lg是large简写：大； 3、-* 表示占列数，即占每行row分12列栅格系统比； 4、.col-xs-* 超小屏幕如手机 （<768px）时使用； ...
Vue（二）、Vue基本代码
yangxshn的博客
11-12 170
1、Vue基本代码和MVVM之间的对应关系 1.1 基本代码结构 和 插值表达式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc...
SpringBoot+AntDesignVue实现excel导入功能
07-20
SpringBoot+AntDesignVue实现excel导入功能
【React】antd中Form和栅格组成实现响应式布局中formItemLayout内容详解
all_might1的博客
04-26 1万+
之前在编写代码过程中一度不理解formItemLayout中labelCol和wrapperCol以及中填写内容都表示什么（主要还是太菜，心疼的抱住拉胯的自己） 还在论坛里问了问题，但是没有人回答我（可能是觉得问题太简单了），哭得更大声了 一、官网样例 在antd官网的Form表单使用的实例中抽一个作为解释案例 样式： 代码： 二、formItemLayout内容解释 1、解释准备阶段 示例中是将栅格和Form表单合起来使用的，因为栅格是支...
css栅格布局的四种大小xs，sm，md，lg
Alan_seeker的博客
03-26 4428
前端为了页面在不同大小的设备上也能够正常显示，通常会使用栅格布局的方式来实现。 栅格布局一般根据不同屏幕尺寸有如下的参数配置，定义如下： xs-* 用于超小屏设备 （max-width=768px） sm-* 用于小屏设备 (min-width=768px) md-* 用于中屏设备 (min-width=992px) lg-* 用于大屏设备 (min-width=1200px) 一般一行分为12等份（如bootstrap），*表示占多少份。 注：有些框架会把一行分为24份 比如： md-4 表示在中
对antd中form表单中xs和sm的理解
qq_42503812的博客
11-17 145
参考：antd中的form表单中的wrapperCol和labelCol问题-CSDN博客
从Antd 源码到自我实现之 Grid 栅格系统
辰辰沉沉大辰沉
04-23 3429
前言
Bootstrap栅格系统 xs sm md lg xl
wuyujin1997的博客
05-18 1万+
xs extra Small 超小 sm small md medium lg large
在antdesignvue中使用
05-20
Ant Design Vue是一套基于Vue.js的UI组件库，可以帮助我们快速搭建漂亮的界面。下面是在Ant Design Vue中使用的步骤： 1. 安装Ant Design Vue 可以使用npm或yarn进行安装。在命令行中输入以下命令： ``` npm install ant-design-vue --save ``` 或者 ``` yarn add ant-design-vue ``` 2. 引入Ant Design Vue组件 在Vue组件中引入需要的Ant Design Vue组件，例如： ```vue <template> <a-button type="primary">按钮</a-button> </template> <script> import { Button } from 'ant-design-vue'; export default { components: { 'a-button': Button } } </script> ``` 3. 引入Ant Design Vue样式 在项目的`main.js`文件中引入Ant Design Vue的样式： ```javascript import 'ant-design-vue/dist/antd.css'; ``` 这样就可以在Ant Design Vue中使用组件和样式了。更多的Ant Design Vue组件和使用方法可以查看其官方文档：https://www.antdv.com/docs/vue/introduce-cn/

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值