15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 CSS

Layui按钮样式

闫志林| 发布于 2021-12-02 20:46:53| 718阅读| 0点赞| 0评论
举报

Layui入门

创建按钮最基本的用法:layui-btn;

<button class="layui-btn">按钮button>

加上相关颜色定义,则可以设置按钮:layui-btn-*(代表颜色或类型)

<button class="layui-btn layui-btn-primary">按钮button>
<button class="layui-btn layui-btn-normal">按钮button>
<button class="layui-btn layui-btn-warm">按钮button>
<button class="layui-btn layui-btn-danger">按钮button>
<button class="layui-btn layui-btn-disabled">按钮button>

可以设置其它三种大小方案,跟格栅参数一样;

<button class="layui-btn layui-btn-lg">按钮button>
<button class="layui-btn layui-btn-sm">按钮button>
<button class="layui-btn layui-btn-xs">按钮button>

 支持 流体按钮;

<button class="layui-btn layui-btn-fluid">按钮button>

 给按钮加上图标;

<br><br>
  <button class="layui-btn">
    <i class="layui-icon layui-icon-add-1">i>
  button>
  <button class="layui-btn">
    <i class="layui-icon layui-icon-edit">i>
  button>
  <button class="layui-btn">
    <i class="layui-icon layui-icon-delete">i>
  button>


 按钮组;

<div class="layui-btn-group">
<button class="layui-btn">增加button>
<button class="layui-btn">删除button>
<button class="layui-btn">修改button>
<button class="layui-btn">


 按钮容器;屏幕变化时会相应布局

<div class="layui-btn-container">
<button class="layui-btn">按钮button>
<button class="layui-btn">按钮button>
<button class="layui-btn">按钮button>
<button class="layui-btn">按钮button>
<button class="layui-btn">按钮button>
div>

0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

闫志林
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部