layui按鈕總結
阿新 • • 發佈:2018-12-07
layui按鈕總結
按鈕類設定:class="layui-btn" ;不設定其它任何二級類名就是普通按鈕
1 主題類 :layui-btn-primary 原始主題。
原始 | class="layui-btn layui-btn-primary" |
預設 | class="layui-btn" |
百搭 | class="layui-btn layui-btn-normal" |
暖色 | class="layui-btn layui-btn-warm" |
警告 | class="layui-btn layui-btn-danger" |
禁用 | class="layui-btn layui-btn-disabled" |
2 尺寸 layui-btn-lg 大型
尺寸 | 組合 |
---|---|
大型 | class="layui-btn layui-btn-lg" |
預設 | class="layui-btn" |
小型 | class="layui-btn layui-btn-sm" |
迷你 | class="layui-btn layui-btn-xs" |
3 圓角 layui-btn-radius
主題 | 組合 |
---|---|
原始 | class="layui-btn layui-btn-radius layui-btn-primary" |
預設 | class="layui-btn layui-btn-radius" |
百搭 | class="layui-btn layui-btn-radius layui-btn-normal" |
暖色 | class="layui-btn layui-btn-radius layui-btn-warm" |
警告 | class="layui-btn layui-btn-radius layui-btn-danger" |
禁用 | class="layui-btn layui-btn-radius layui-btn-disabled" |
PS:各種型別可疊加:
<button class="layui-btn layui-btn-radius layui-btn-normal layui-btn-sm">圓角百搭小型按鈕</button>
PS:流體按鈕:
<button class="layui-btn layui-btn-fluid">流體按鈕(最大化適應)</button>
PS:連結按鈕:
<a href="http://www.layui.com" class="layui-btn">一個可跳轉的按鈕</a>
總結只要類設定了layui-btn就是個按鈕
按鈕組:
將按鈕放入一個class="layui-btn-group"元素中,即可形成按鈕組,按鈕本身仍然可以隨意搭配
<div class="layui-btn-group">
<button class="layui-btn">增加</button>
<button class="layui-btn">編輯</button>
<button class="layui-btn">刪除</button>
</div>
圖示 :按鈕裡可設定圖示區分功能
更多圖示見:https://www.layui.com/doc/element/icon.html
通過對一個內聯元素(一般推薦用 i標籤)設定 class="layui-icon",來定義一個圖示,然後對元素加上圖示對應的 font-class
<button class="layui-btn">
//兩種方法
<i class="layui-icon"></i> 贊
<i class="layui-icon" class="layui-icon-praise"></i> 贊
</button>
自定義它的顏色或者大小,大小要注意不能大於父元素
<button class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon" style="color: red;font-size: 30px;"></i>
</button>
按鈕容器
<div class="layui-btn-container">
<button class="layui-btn">按鈕一</button>
<button class="layui-btn">按鈕二</button>
<button class="layui-btn">按鈕三</button>
</div>