一 element ui常用布局使用 （阁瑞钛伦特软件—九耶实训）

最新推荐文章于 2024-07-09 14:45:48 发布
最新推荐文章于 2024-07-09 14:45:48 发布
阅读量319 收藏 1
点赞数 5
分类专栏： 九耶丨钛伦特-Java学院 文章标签： elementui vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69234258/article/details/124727713
版权

1.1.1 基础布局

使用分栏创建基础的栅格布局。

通过row和col组件，并通过col组件的span属性可以自由地组合布局。

    示例代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<!-- 引入样式 -->

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<!-- import Vue before Element -->

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<!-- 引入组件库 -->

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

<body>

<div id="app">

<el-row>

<el-col :span="24">

<div style="background-color: red;">1</div>

</el-col>

</el-row>

<el-row>

<el-col :span="12">

<div style="background-color: red;">1</div>

</el-col>

<el-col :span="12">

<div style="background-color: blue;">2</div>

</el-col>

</el-row>

<el-row>

<el-col :span="8">

<div style="background-color: red;">1</div>

</el-col>

<el-col :span="8">

<div style="background-color: blue;">2</div>

</el-col>

<el-col :span="8">

<div style="background-color: green;">3</div>

</el-col>

</el-row>

<el-row>

<el-col :span="6">

<div style="background-color: red;">1</div>

</el-col>

<el-col :span="6">

<div style="background-color: blue;">2</div>

</el-col>

<el-col :span="6">

<div style="background-color: green;">3</div>

</el-col>

<el-col :span="6">

<div style="background-color: #cccccc;">4</div>

</el-col>

</el-row>

<el-row>

<el-col :span="4">

<div style="background-color: red;">1</div>

</el-col>

<el-col :span="4">

<div style="background-color: blue;">2</div>

</el-col>

<el-col :span="4">

<div style="background-color: green;">3</div>

</el-col>

<el-col :span="4">

<div style="background-color: #cccccc;">4</div>

</el-col>

<el-col :span="4">

<div style="background-color: #bbbbbb;">5</div>

</el-col>

<el-col :span="4">

<div style="background-color: #aaaaaa;">6</div>

</el-col>

</el-row>

</div>

<script>

new Vue({

el: "#app"

});

</script>

</body>

</html>

    运行效果如图1-xx所示。

 

九耶（钛伦特）
关注
  • 5
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
element ui常用布局使用（一）（阁瑞钛伦特软件—九耶实训）
m0_69234258的博客
06-08 322
1.1.1 基础布局使用分栏创建基础的栅格布局。通过row和col组件，并通过col组件的span属性可以自由地组合布局。 示例代码如下：
二 element ui常用布局使用 （阁瑞钛伦特软件—九耶实训）
m0_69234258的博客
05-13 127
二 element ui常用布局使用 （阁瑞钛伦特软件—九耶实训）
代码写布局-九宫格
04-01
在代码中直接写的布局，模仿微信朋友圈相片显示
VUE-ELEMENT-UI组件 LAYOUT布局（网格系统）
weixin_42594143的博客
03-08 1137
https://www.freesion.com/article/110081469/
【Element入门】4、Element UI 布局组件详解
weixin_52938153的博客
05-22 1323
Element UI 是一款基于 Vue.js 的高效、简洁的前端组件库，专为开发者和设计师提供丰富的 UI 组件。它不仅易于上手，还具备高度的可定制性，能够满足多样化的项目需求。通过使用 Element UI，开发者可以快速构建高质量的现代 Web 应用，实现优雅且一致的用户界面，从而显著提升开发效率和用户体验。本系列文章深入探讨了 Element UI 的各项功能及最佳实践，帮助你在实际项目中更好地应用和优化这一强大的工具。
element 实现自定义 宫格 布局
qq_39927511的博客
10-13 1865
vue element 自定义 宫格 布局
九宫格布局的几种实现方法
LongYuTianTang的博客
11-17 1790
js实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; list-style: none; }
看完这个，九宫格布局小菜一碟
qq_45473786的博客
03-14 698
文章目录九宫格布局描述效果展示页面加载完点击【三列按钮】算法思想（以三列为例）原理算法HTML代码CSS样式JS实现代码JS详解-----封装JS详解----九宫格算法实现函数 九宫格布局描述 在浏览器中有n张图片（我这里是是十一张图片），兰兰其顶部有三个button(内容分别是三列、四列、五列)，点击任和一个按钮，图片将会以该列的形式展现在浏览器上 效果展示 页面加载完 点击【三列按钮】 点...
九耶logo最终.ai
06-29
九耶logo最终.ai
伦特
02-15
【伦特】(Lentl) 是一个与JavaScript相关的项目，但具体的项目详情在提供的信息中没有详述。通常，一个以"master"命名的压缩包文件可能包含了某个开源项目的主分支代码。JavaScript是一种广泛应用于网页和网络应用...
伦特雷斯
02-10
"伦特雷斯"，在IT领域中，很可能是对一个特定软件、库或者技术的简称。考虑到提供的标签为“R”，我们可以推测这可能与R语言有关。R是一种广泛用于统计分析、图形绘制以及数据科学的编程语言和环境。在R社区中，...
伦特拉
02-18
运行ng generate component component-name生成一个新的组件。 您还可以使用ng generate directive|pipe|service|class|guard|interface|enum|module 。 建造 运行ng build来构建项目。 构建工件将存储在dist/目录中...
伦特雷斯：生物学432作业5
02-13
在本主题中，我们将深入探讨"伦特雷斯：生物学432作业5"这一话题，该作业可能涉及了使用HTML（超文本标记语言）来呈现和组织生物学相关的数据或信息。HTML是创建网页的标准标记语言，它允许我们将文本、图像、视频等...
vue3利用渲染函数实现格子布局（九宫格）
u014050961的博客
01-05 3619
前言 因为工作中需要用到类似九宫格的布局，而element-plus里没有类似的组件，因此自己实现了一个格子布局的组件 思路 其实格子布局目前我更多的是在手机端使用，而目前手机端开发使用的是vant组件库，这个组件库本身就有九宫格布局组件，它大致是由一个父组件grid，若干子组件grid-item组成来实现，然后我的实现方式也是如此，一个父组件+若干子组件，利用渲染函数主要是可以过滤掉其他非子组件的内容，约束使用方式 实现 宫格布局核心在于限制每行的格子数量，实现方式有很多种，我这里使用的是无序列表，约束u
【vue】弹性布局和九宫格
当白的技术小窝 ( git : https://github.com/canwhite )
12-07 8491
实现的九宫格效果：     一、使用   .box{     display: -webkit-flex; /*在webkit内核的浏览器上使用要加前缀*/     display: flex; //将对象作为弹性伸缩盒显示 }     二、容器属性.box{...}   flex-direction:row|column //默认，主轴水平方向，起点在左端，...
vue+elementUi——实现后台管理系统的布局(sideBar+header+appMain)
yehaocheng520的博客
08-06 8351
在做后台管理系统时，最常见的系统布局就是：左右布局。左侧是菜单栏，右侧是内容区，内容区又分为头部和展示区。如下： 因此分析一下这个页面的结构： 1.html部分 <template> <div class="app-wrapper"> <div class="layout-aside" :class="{collapse:isCollapse}"> <div class="layout-logo"> <router-link to=
ElementUI之基础布局及混合布局
算法与编程之美
01-16 2387
1引言这次简单介绍Element-ui的基础布局，让同学们初步了解element-ui。2方法通过基础的 24 分栏，迅速简便地创建布局。基础布局的定义：使用单一分栏创建基础的栅格布局...
element-ui 首页布局
℡メ㏑╭ァ小凯
05-07 3699
效果 代码 <template> <div class="app-container home"> <el-row> <el-col :span="5"> <el-card shadow="hover" style="height:280px;"> <div class="text item"> {{'列表内容 ' + o }} .
第六章 Element UI
weixin_43352648的博客
12-04 2737
第六章 Element UI
解决树形表格 第一列中文字没有对齐
最新发布
weixin_49352307的博客
07-09 301
二级分类与一级分类的文字没有对齐。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值