ElementUI响应式Layout布局xs,sm,md,lg,xl

响应式布局

参照了 Bootstrap 的 响应式设计,预设了五个响应尺寸:xs、sm、md、lg 和 xl。

<el-row :gutter="10"><el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col><el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col><el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col><el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

包含的类名及其含义为:

hidden-xs-only - 当视口在 xs 尺寸时隐藏
hidden-sm-only - 当视口在 sm 尺寸时隐藏
hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏
hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏
hidden-md-only - 当视口在 md 尺寸时隐藏
hidden-md-and-down - 当视口在 md 及以下尺寸时隐藏
hidden-md-and-up - 当视口在 md 及以上尺寸时隐藏
hidden-lg-only - 当视口在 lg 尺寸时隐藏
hidden-lg-and-down - 当视口在 lg 及以下尺寸时隐藏
hidden-lg-and-up - 当视口在 lg 及以上尺寸时隐藏
hidden-xl-only - 当视口在 xl 尺寸时隐藏

尺寸解释

其实就是做了每行总共24个栅格,在不同尺寸的页面上如何分配宽度比例:

名称尺寸
xs<768px
sm≥768px
md≥992px
lg≥1200px
xl≥1920px

 

官网地址

Element - The world's most popular Vue UI framework

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/785707.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HQL,SQL刷题,尚硅谷(初级)

目录 相关表数据&#xff1a; 题目及思路解析&#xff1a; 多表连接 1、课程编号为"01"且课程分数小于60&#xff0c;按分数降序排列的学生信息 2、查询所有课程成绩在70分以上 的学生的姓名、课程名称和分数&#xff0c;按分数升序排列 3、查询该学生不同课程的成绩…

网络中的网络(NiN)

文章目录 NiN块 NiN块 NiN的想法是在每个像素位置&#xff08;针对每个高度和宽度&#xff09;应用一个全连接层。果我们将权重连接到每个空间位置&#xff0c;我们可以将其视为1x1卷积层&#xff0c;或作为在每个像素位置上独立作用的全连接层。 从另一个角度看&#xff0c;即…

Java language programming:身体质量指数(BMI)测算

题目&#xff1a; 体重是反映和衡量一个人健康状况的重要标志之一&#xff0c;过胖和过瘦都不利于健康&#xff0c;BMI&#xff08;身体质量指数&#xff09;计算方法&#xff1a;体重&#xff08;以千克为单位&#xff09;除以身高&#xff08;以米为单位&#xff09;的平方。…

ollama本地部署大模型(纯CPU推理)实践

文章目录 说明Ollama和Ollama WebUI简介Ollama模型硬件要求内存要求 Ollama容器部署Ollama容器内模型下载和对话Ollama WebUI部署Ollama WebUI下载模型和对话轻量模型推荐机器硬件信息概览qwen:0.5b推理体验gemma:7b推理体验 说明 本文旨在分享在linux(centos8)平台使用docker…

几种储存数据的方式

几种储存数据的方式 数组&#xff08;Array&#xff09;&#xff1a;数组是一种最基本的数据结构&#xff0c;用于存储固定大小的相同类型元素的连续内存空间。数组具有固定长度&#xff0c;一旦创建后长度不能更改。 声明数组&#xff1a; // 声明一个整数数组 int[] intArray…

新生报到系统的设计与实现(论文+源码)_kaic

摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对新生报到信息管理混乱&#xff0c;出错率高&#xff0c;信息安全性差…

3.29号系统移植

1. uboot介绍 bootloader&#xff1a;引导加载程序的统称 uboot是引导加载程序中的一种 1.1 uboot特点 uboot是一个开源分布式软件uboot是由德国DNEX小组进行维护uboot支持多种硬件架构平台uboot是一个裸机开发程序uboot占用体积小uboot主要作用引导linux内核进行启动&#…

Vulnhub:BROKEN: GALLERY

目录 信息收集 1、arp 2、nmap 3、nikto 4、whatweb WEB wen信息收集 目录扫描 进制转换 ssh登录 提权 信息收集 1、arp ┌──(root㉿ru)-[~/kali/vulnhub] └─# arp-scan -l Interface: eth0, type: EN10MB, M…

【Docker】搭建安全可控的自定义通知推送服务 - Bark

【Docker】搭建安全可控的自定义通知推送服务 - Bark 前言 本教程基于绿联的NAS设备DX4600 Pro的docker功能进行搭建。 简介 Bark是一款为Apple设备用户设计的开源推送服务应用&#xff0c;它允许开发者、程序员以及一般用户将信息快速推送到他们自己的iPhone、iPad等设备上…

排序算法-选择排序

选择排序&#xff1a;遍历数组&#xff0c;找到最小值&#xff0c;放到arr[0]&#xff0c;遍历剩下的数组&#xff0c;找到最小值放到arr[1],以此类推。 思路&#xff1a;第一次从 arr[0]~arr[n-1]中选取最小值&#xff0c;与 arr[0]交换&#xff0c;第二次从 arr[1]~arr[n-1]中…

kibana的常用DSL语句查询(一)

声明&#xff1a;如下所有的索引数据基于上一篇已经创建好的person_news索引&#xff0c;具体mapping及插入的数据见上一篇 1、查询索引的所有数据&#xff0c;适用于数据量不大的情况 GET /your_index_name/_search {"query": {"match_all": {}} }2、ma…

4G/5G防爆布控球

#防爆布控球 #远程实时监控 #移动应急指挥 #高清图像采集 #防爆安全认证 4G/5G防爆布控球 M130-EX防爆布控球是针对石化装置、石油平台、燃气、化工、制药、煤炭、冶炼、船舶制造、纺织等易燃易爆环境及危险场所而开发设计的防爆智能一体化电气设备。 产品型号&#xff1a;M13…

如何使用potplayer在公网环境访问内网群晖NAS中储存在webdav中的影视资源

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-D7WJh3JaNVrLcj2b {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…

vue3 i18n国际化,普通js,ts文件中的设置方法

项目环境&#xff1a;vue3 ts element plus i18n vue3 ts i18n用法 1 在vue3ts中&#xff0c;如.<标签>{{ $t(login.title) }}</标签> <div class"title">{{ $t(login.title) }}</div>2 在<script setup>...</script>中 …

【C++】C++入门第二课(函数重载 | 引用 | 内联函数 | auto关键字 | 指针空值nullptr)

目录 前言 函数重载 概念 重载函数的条件 C支持重载函数的原理--名字修饰 引用 概念 特性 常引用&#xff08;const引用&#xff09; 使用场景 传值&#xff0c;传引用效率比较 引用和指针的区别 内联函数 概念 特性 auto关键字&#xff08;C11&#xff09; a…

NLP技术大解析:人工智能应用从分词到情感分析的全面指南

自然语言处理&#xff0c;简称NLP&#xff0c;是人工智能领域中的一个重要分支&#xff0c;致力于让计算机理解和生成人类使用的自然语言。随着科技的飞速发展&#xff0c;NLP已经渗透到我们生活的方方面面&#xff0c;从智能语音助手到在线翻译工具&#xff0c;再到社交媒体的…

Vscode下使用markdown入门

1.安装vscode插件 1. **Markdown All in One** ——提供丰富的Markdown相关的快捷键、自动补全功能&#xff0c;提高md文档编写生产力 2. **Markdown Preview Ehanced** ——用于渲染当前编写文档的效果同步预览 3. **Paste Image** ——用于快速引用图片至Markdown文…

程序汪接的4万智慧餐饮项目

本文章来自程序汪背后的私活小团队&#xff0c;开发智慧餐厅的小程序 由于程序汪太忙于是把这个项目让一个靠谱粉丝开发了&#xff0c;当然开发质量和进度我会跟踪&#xff0c;具体分析如下 B站【我是程序汪】 老程序员接了一个4万的智慧餐饮项目&#xff0c;开发周期60天 小程…

YoloV8改进策略:BackBone改进|GCNet(独家原创)

摘要 非局部网络&#xff08;NLNet&#xff09;通过为每个查询位置聚合特定于查询的全局上下文&#xff0c;为捕获长距离依赖关系提供了一个开创性的方法。然而&#xff0c;经过严格的实证分析&#xff0c;我们发现非局部网络所建模的全局上下文在图像中的不同查询位置几乎相同…

EFCore 反向工程(DBFirst)----慎用

使用EFCore时一般推荐code first&#xff0c;也就是先创建实体类&#xff0c;然后根据实体类生成数据表。但是有时候数据表已经存在&#xff0c;这时候就需要基于数据库表来创建实体类。 首先已经有数据表&#xff0c;显示如下&#xff1a; 下载依赖包&#xff1a; Microsoft…