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

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

news 文章来源：https://blog.csdn.net/Mxy18851251178/article/details/137248774 2024/10/31 5:33:37

响应式布局

参照了 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

相关文章：

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

响应式布局 参照了 Bootstrap 的 响应式设计&#xff0c;预设了五个响应尺寸&#xff1a;xs、sm、md、lg 和 xl。 <el-row :gutter"10"><el-col :xs"8" :sm"6" :md"4" :lg"3" :xl"1"><div class…...

编程日记 2024/4/5 10:13:36

机器学习——典型的卷积神经网络

机器学习——典型的卷积神经网络 卷积神经网络&#xff08;Convolutional Neural Networks&#xff0c;CNNs&#xff09;是一类在图像处理领域应用广泛的深度学习模型。它通过卷积操作和池化操作来提取图像的特征&#xff0c;并通过全连接层来进行分类或回归任务。在本文中&am…...

编程日记 2024/4/5 10:11:34

速通数据结构与算法第四站 双链表

系列文章目录 速通数据结构与算法系列 1 速通数据结构与算法第一站 复杂度 http://t.csdnimg.cn/sxEGF 2 速通数据结构与算法第二站 顺序表 http://t.csdnimg.cn/WVyDb 3 速通数据结构与算法第三站 单链表 http://t.csdnimg.cn/cDpcC 感谢佬们…...

编程日记 2024/4/5 10:09:31

51单片机学习笔记12 SPI接口 使用1302时钟

51单片机学习笔记12 SPI接口 使用1302时钟 一、DS1302简介1. 功能特性2. 涓流充电3. 接口介绍时钟数据和控制线&#xff1a;电源线&#xff1a;备用电池连接&#xff1a; 二、寄存器介绍1. 控制寄存器2. 时间寄存器3. 日历/时钟寄存器 三、BCD码介绍四、DS1302时序1. 读时序2. …...

编程日记 2024/4/5 10:05:28

php编辑器 ide 主流编辑器的优缺点。phpstorm vscode atom 三者对比

编辑器PhpStormvscodeAtom是否收费收费&#xff0c;有30天试用期免费免费内存占用Java平台&#xff0c;一个进程1G多内存占用好几个进程&#xff0c;合起来1G上下/基本功能都具备&#xff0c;有的功能需要装插件都具备&#xff0c;有的功能需要装插件都具备&#xff0c;有的功能…...

编程日记 2024/4/5 10:04:27

【动手学深度学习】深入浅出深度学习之RMSProp算法的设计与实现

目录 &#x1f31e;一、实验目的 &#x1f31e;二、实验准备 &#x1f31e;三、实验内容 &#x1f33c;1. 认识RMSProp算法 &#x1f33c;2. 在optimizer_compare_naive.py中加入RMSProp &#x1f33c;3. 在optimizer_compare_mnist.py中加入RMSProp &#x1f33c;4. 问…...

编程日记 2024/4/5 10:03:26

大转盘抽奖小程序源码

源码介绍 大转盘抽奖小程序源码&#xff0c;测试依旧可用&#xff0c;无BUG&#xff0c;跑马灯旋转效果&#xff0c;非常酷炫。 小程序核心代码参考 //index.js //获取应用实例 var app getApp() Page({data: {circleList: [],//圆点数组awardList: [],//奖品数组colorCirc…...

编程日记 2024/4/5 10:02:25

数据结构（无图版）

数据结构与算法&#xff08;无图版&#xff0c;C语言实现&#xff09; 1、绪论 1.1、数据结构的研究内容 一般应用步骤&#xff1a;分析问题&#xff0c;提取操作对象&#xff0c;分析操作对象之间的关系&#xff0c;建立数学模型。 1.2、基本概念和术语 数据&#xff1a;…...

编程日记 2024/4/5 10:00:23

软件测试中的顶级测试覆盖率技术

根据 CISQ 报告&#xff0c;劣质软件每年给美国公司造成约2.08 万亿美元的损失。虽然软件工具是企业和行业领域的必需品&#xff0c;但它们也容易出现严重错误和性能问题。人类手动测试不再足以检测和消除软件错误。 因此&#xff0c;产品或软件开发公司必须转向自动化测试&am…...

编程日记 2024/4/5 9:56:19

vscode使用技巧

常用快捷键 代码格式 Windows系统。格式化代码的快捷键是“ShiftAltF” Mac系统。格式化代码的快捷键是“ShiftOptionF” Ubuntu系统。格式化代码的快捷键是“CtrlShiftI”配置缩进 点击左上角的“文件”菜单&#xff0c;然后选择“首选项”>“设置”&#xff0c;或者使用…...

编程日记 2024/4/5 9:54:17

JSP

概念&#xff1a;Java Server Pages&#xff0c;Java服务端页面 一种动态的网页技术&#xff0c;其中既可以定义HTML、JS、CSS等静态内容&#xff0c;还可以定义Java代码的动态内容 JSP HTML Java 快速入门 注&#xff1a;Tomcat中已经有了JSP的jar包&#xff0c;因此我们…...

编程日记 2024/4/5 9:51:15

Mybatis--TypeHandler使用手册

TypeHandler使用手册 场景&#xff1a;想保存user时 teacher自动转String &#xff0c;不想每次保存都要手动去转String&#xff1b;从DB查询出来时&#xff0c;也要自动帮我们转换成Java对象 Teacher Data public class User {private Integer id;private String name;priva…...

编程日记 2024/4/5 9:50:14

网络编程（TCP、UDP）

文章目录 一、概念1.1 什么是网络编程1.2 网络编程中的基本知识 二、Socket套接字2.1 概念及分类2.2 TCP VS UDP2.3 通信模型2.4 接口方法UDP数据报套接字编程TCP流套接字编程 三、代码示例3.1 注意点3.2 回显服务器基于UDP基于TCP 一、概念 首先介绍了什么是网络编程&#xff…...

编程日记 2024/4/5 9:48:11

Python快速入门系列-7（Python Web开发与框架介绍）

第七章：Python Web开发与框架介绍 7.1 Flask与Django简介7.1.1 Flask框架Flask的特点Flask的安装一个简单的Flask应用示例7.1.2 Django框架Django的特点Django的安装一个简单的Django应用示例7.2 前后端交互与数据传输7.2.1 前后端交互7.2.2 数据传输格式7.2.3 示例：使用Flas…...

编程日记 2024/4/5 9:46:10

最长对称子串

对给定的字符串&#xff0c;本题要求你输出最长对称子串的长度。例如&#xff0c;给定Is PAT&TAP symmetric?&#xff0c;最长对称子串为s PAT&TAP s&#xff0c;于是你应该输出11。 输入格式&#xff1a; 输入在一行中给出长度不超过1000的非空字符串。 输出格式&…...

编程日记 2024/4/5 9:43:07

【大模型】大模型 CPU 推理之 llama.cpp

【大模型】大模型 CPU 推理之 llama.cpp llama.cpp安装llama.cppMemory/Disk RequirementsQuantization测试推理下载模型测试 参考 llama.cpp 描述 The main goal of llama.cpp is to enable LLM inference with minimal setup and state-of-the-art performance on a wide var…...

编程日记 2024/4/5 9:41:05

异地组网怎么管理？

在当今信息化时代&#xff0c;随着企业的业务扩张和员工的分布&#xff0c;异地组网已经成为越来越多企业的需求。异地组网管理相对来说是一项复杂而繁琐的任务。本文将介绍一种名为【天联】的管理解决方案&#xff0c;帮助企业更好地管理异地组网。 【天联】组网的优势 【天联…...

编程日记 2024/4/5 9:40:04

Kafka参数介绍

官网参数介绍:Apache KafkaApache Kafka: A Distributed Streaming Platform.https://kafka.apache.org/documentation/#configuration...

编程日记 2024/4/5 9:38:02

如何利用待办事项清单提高工作效率?

你是否经常因为繁重的工作量而感到不堪重负&#xff1f;你是否在努力赶工期或经常忘记重要的电子邮件&#xff1f;你并不是特例。如何利用待办事项清单提高工作效率&#xff1f;这里有一个简单的方法可以帮你理清混乱并更高效地完成任务—待办事项清单。 这种类型的清单可以帮…...

编程日记 2024/4/5 9:37:00

力扣经典150题第二题：移除元素

移除元素问题详解与解决方法 1. 介绍 移除元素问题是 LeetCode 经典题目之一&#xff0c;要求原地修改输入数组&#xff0c;移除所有数值等于给定值的元素&#xff0c;并返回新数组的长度。 问题描述 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等…...

编程日记 2024/4/5 9:34:58

55555555555555

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和…...

编程日记 2024/4/5 9:29:54

用Skimage学习数字图像处理（018）：图像形态学处理（上）

本节开始讨论图像形态学处理&#xff0c;这是上篇&#xff0c;将介绍与二值形态学相关的内容&#xff0c;重点介绍两种基本的二值形态学操作&#xff1a;腐蚀和膨胀&#xff0c;以及三种复合二值形态学操作&#xff1a;开、闭和击中击不中变换。 目录 9.1 基础 9.2 基本操作…...

编程日记 2024/4/5 9:27:51

MySQL中 in 和 exists 区别

在MySQL中&#xff0c;IN和EXISTS都是用于在子查询中测试条件的操作符&#xff0c;但它们在处理和效率上有一些重要的区别。MySQL中的in语句是把外表和内表作hash连接&#xff0c;⽽exists语句是对外表作loop循环&#xff0c;每次loop循环再对内表进⾏查询。⼤家⼀直认为exists…...

编程日记 2024/4/5 9:26:50

Java基础 - 代码练习

第一题&#xff1a;集合的运用&#xff08;幸存者&#xff09; public class demo1 {public static void main(String[] args) {ArrayList<Integer> array new ArrayList<>(); //一百个囚犯存放在array集合中Random r new Random();for (int i 0; i < 100; …...

编程日记 2024/4/5 9:23:48

【Redis】redis集群模式

概述 Redis集群&#xff0c;即Redis Cluster&#xff0c;是Redis 3.0开始引入的分布式存储方案。实际使用中集群一般由多个节点(Node)组成&#xff0c;Redis的数据分布在这些节点中。集群中的节点分为主节点和从节点&#xff1a;只有主节点负责读写请求和集群信息的维护&#…...

编程日记 2024/4/5 9:21:45

基于opencv的猫脸识别模型

opencv介绍 OpenCV的全称是Open Source Computer Vision Library&#xff0c;是一个跨平台的计算机视觉库。OpenCV是由英特尔公司发起并参与开发&#xff0c;以BSD许可证授权发行&#xff0c;可以在商业和研究领域中免费使用。OpenCV可用于开发实时的图像处理、计算机视觉以及…...

编程日记 2024/4/5 9:15:41

基于注意力整合的超声图像分割信息在乳腺肿瘤分类中的应用

基于注意力整合的超声图像分割信息在乳腺肿瘤分类中的应用 摘要引言方法 Segmentation information with attention integration for classification of breast tumor in ultrasound image 摘要 乳腺癌是世界范围内女性最常见的癌症之一。基于超声成像的计算机辅助诊断&#x…...

编程日记 2024/4/5 9:13:39

数据库重点知识（个人整理笔记）

目录 1. 索引是什么&#xff1f; 1.1. 索引的基本原理 2. 索引有哪些优缺点&#xff1f; 3. MySQL有哪几种索引类型&#xff1f; 4. mysql聚簇和非聚簇索引的区别 5. 非聚簇索引一定会回表查询吗&#xff1f; 6. 讲一讲前缀索引&#xff1f; 7. 为什么索引结构默认使用B…...

编程日记 2024/4/5 9:12:37

[技术闲聊]checklist

电路设计完成后&#xff0c;需要确认功能完整性&#xff0c;明确是否符合设计规格需求&#xff1b;需要确认电路设计是否功能符合但是系列项不符合设计规则&#xff0c;如果都没有问题&#xff0c;那么就可以发给layout工程师。 今天主要讲讲电路设计规则&#xff0c;涉及到一…...

编程日记 2024/4/5 9:09:34

力扣刷题 二叉树的迭代遍历

题干 给你二叉树的根节点 root &#xff0c;返回它节点值的 前序 遍历。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,2,3]示例 2&#xff1a; 输入&#xff1a;root [] 输出&#xff1a;[]示例 3&#xff1a; 输入&#xff1a;root [1] 输…...

编程日记 2024/4/5 9:08:33

做兼职翻译的网站/南京网络优化公司有哪些

1.GDB。linux下的超级神器&#xff0c;就不细说了&#xff0c;bomblab, bufferlab全靠它debug出来的&#xff0c;功能极其强大。 2.valgrind,一款用于内存调试&#xff0c;内存泄漏检测以及性能分析的软件开发工具。支持x86, x86-64, Armv7以及PowerPC上的Linux. 3.宏&#x…...

编程日记 2024/10/31 3:02:36

上海电商网站开发/百度分析工具

原文:从头开始学JavaScript (二)——变量及其作用域一、变量 ECMAscript变量是松散型变量&#xff0c;所谓松散型变量&#xff0c;就是变量名称可以保存任何类型的数据&#xff0c;每个变量仅仅是一个用于保存值的占位符。 定义&#xff1a;var firstDemo; 二、变量的作用域 2.…...

编程日记 2024/10/31 2:57:34

上市公司网站建设/百度seo优化教程

1. 线程优先级 现代操作系统中基本上使用时间分片的方式调度线程&#xff0c;通过设置线程优先级&#xff0c;使优先级高的线程获得时间片的次数多于优先级低的线程。 在java 线程中&#xff0c;通过一个整形变量prority来控制优先级&#xff0c;优先级的范围从1&#xff5e;10…...

编程日记 2024/10/31 1:52:02

wordpress 用户 评论/nba新闻最新消息

功能参考界面...

编程日记 2024/10/31 1:42:55

今日头条今天的最新新闻/游戏优化大师官方下载

k短路求解&#xff1a; k短路 单源点最短路跑反向边 高级搜索A* A*算法 结合了启发式方法和形式化方法; 启发式方法通过充分利用图给出的信息来动态地做出决定而使搜索次数大大降低; 形式化方法不利用图给出的信息,而仅通过数学的形式分析; 算法思路&#xff1a; 算法通过一…...

编程日记 2024/10/31 0:08:44

wordpress后台账号密码/河南搜索引擎优化

微信重大更新&#xff0c;mac版可刷朋友圈&#xff01;可以看&#xff0c;可以评论&#xff01;微信Mac电脑版是官方推出的针对Mac用户设计的客户端产品&#xff0c;Mac上有六亿多庞大用户群体在使用微信客户端聊天工具&#xff0c;可以发送文字、语音、图片和视频&#xff0c;…...

编程日记 2024/10/30 23:49:34