ELement按钮

最新推荐文章于 2023-11-21 19:25:10 发布

A.简单精彩

最新推荐文章于 2023-11-21 19:25:10 发布

阅读量978

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zhouzilongqwe/article/details/94451567

本文介绍响应式布局的概念，借鉴Bootstrap预设的五种响应尺寸：xs、sm、md、lg和xl，以及使用Element UI实现不同样式按钮的方法，包括默认、主要、成功、信息、警告和危险等类型。

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

响应式布局
参照了 Bootstrap 的响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。
Container 布局容器
用于布局的容器组件，方便快速搭建页面的基本结构：

：外层容器。当子元素中包含或时，全部子元素会垂直上下排列，否则会水平左右排列。

：顶栏容器。

：侧边栏容器。

：主要区域容器。

：底栏容器。

Button 按钮
常用的操作按钮。

在这里插入代码片<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>

<el-row>
  <el-button plain>朴素按钮</el-button>
  <el-button type="primary" plain>主要按钮</el-button>
  <el-button type="success" plain>成功按钮</el-button>
  <el-button type="info" plain>信息按钮</el-button>
  <el-button type="warning" plain>警告按钮</el-button>
  <el-button type="danger" plain>危险按钮</el-button>
</el-row>

<el-row>
  <el-button round>圆角按钮</el-button>
  <el-button type="primary" round>主要按钮</el-button>
  <el-button type="success" round>成功按钮</el-button>
  <el-button type="info" round>信息按钮</el-button>
  <el-button type="warning" round>警告按钮</el-button>
  <el-button type="danger" round>危险按钮</el-button>
</el-row>

<el-row>
  <el-button icon="el-icon-search" circle></el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>