LayUI中的基本元素之按钮

最新推荐文章于 2024-07-02 23:55:52 发布

daimeijin

最新推荐文章于 2024-07-02 23:55:52 发布

阅读量7.8k

点赞数 1

分类专栏： LayUI 前端技术

本文链接：https://blog.csdn.net/daimeijin/article/details/119655987

版权

本文介绍了LayUI框架中的按钮元素，包括基础用法、主题、尺寸、圆角、图标、按钮组和按钮容器的设置。通过这些属性的组合，可以创建多种样式的按钮，适应不同场景需求。

摘要由CSDN通过智能技术生成

前言

最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。

按钮

向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。

用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本元素</title>
    <!-- 引入LayUId的核心CSS-->
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
</head>
<body>
    <button type="button" class="layui-btn">一个标准的按钮</button>
    <a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
    <div class="layui-btn">一