005-按钮
1. 向任意HTML元素設定class="layui-btn", 建立一個基礎按鈕。通過追加格式為layui-btn-{type}的class來定義其它按鈕風格。內置的按鈕class可以進行任意組合, 從而形成更多種按鈕風格。
2. 用法
<button type="button" class="layui-btn">一個標準的按鈕</button> <a href="#" class="layui-btn">一個可跳轉的按鈕</a>3. 主題
| 主題 | 組合 |
| 原始 | 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" |
4. 尺寸
| 尺寸 | 組合 |
| 大型 | class="layui-btn layui-btn-lg" |
| 默認 | class="layui-btn" |
| 小型 | class="layui-btn layui-btn-sm" |
| 迷你 | class="layui-btn layui-btn-xs" |
| 流體按鈕 | class="layui-btn layui-btn-fluid" |
5. 圓角按鈕
| 名稱 | 組合 |
| 默認 | class="layui-btn layui-btn-radius" |
6. 圖標按鈕
6.1. 實例
<button class="layui-btn"><i class="layui-icon"></i></button> <a href="#" class="layui-btn"><i class="layui-icon"></i></a>7. 按鈕組
7.1. 將按鈕放入一個class="layui-btn-group"元素中, 即可形成按鈕組:
<div class="layui-btn-group"><button type="button" class="layui-btn">增加</button><button type="button" class="layui-btn">編輯</button><button type="button" class="layui-btn">刪除</button> </div>8. 按鈕容器
8.2. 盡管按鈕在同節點并排時會自動拉開間距, 但在按鈕太多的情況, 效果并不是很美好。因為你需要用到按鈕容器:
<div class="layui-btn-container"><button type="button" class="layui-btn">按鈕一</button> <button type="button" class="layui-btn">按鈕二</button> <button type="button" class="layui-btn">按鈕三</button> </div>9. 例子
9.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>按鈕 - layui</title><link rel="stylesheet" href="layui/css/layui.css"><script type="text/javascript" src="layui/layui.js"></script><style>body { padding: 10px 50px; }</style></head><body><h2>按鈕主題:</h2><button class="layui-btn layui-btn-primary">原始按鈕</button><button class="layui-btn">默認按鈕</button><button class="layui-btn layui-btn-normal">百搭按鈕</button><button class="layui-btn layui-btn-warm">暖色按鈕</button><a href="#" class="layui-btn layui-btn-danger">警告按鈕</a><a href="#" class="layui-btn layui-btn-disabled">禁用按鈕</a><br /><br /><h2>按鈕尺寸:</h2><button class="layui-btn layui-btn-lg">大型按鈕</button><button class="layui-btn">默認按鈕</button><button class="layui-btn layui-btn-sm">小型按鈕</button><button class="layui-btn layui-btn-xs">迷你按鈕</button><br /><br /><button class="layui-btn layui-btn-fluid">流體按鈕(最大化適應)</button><br /><br /><button class="layui-btn layui-btn-primary layui-btn-fluid">流體按鈕(最大化適應)</button><br /><br /><h2>按鈕圓角:</h2><button class="layui-btn layui-btn-primary layui-btn-radius">原始按鈕</button><button class="layui-btn layui-btn-radius">默認按鈕</button><button class="layui-btn layui-btn-normal layui-btn-radius">百搭按鈕</button><button class="layui-btn layui-btn-warm layui-btn-radius">暖色按鈕</button><button class="layui-btn layui-btn-danger layui-btn-radius">警告按鈕</button><button class="layui-btn layui-btn-disabled layui-btn-radius">禁用按鈕</button><br /><br /><h2>按鈕圖標：</h2><button class="layui-btn"><i class="layui-icon"></i></button><button class="layui-btn"><i class="layui-icon"></i></button><button class="layui-btn"><i class="layui-icon"></i></button><button class="layui-btn"><i class="layui-icon"></i></button><button class="layui-btn"><i class="layui-icon"></i></button><a href="#" class="layui-btn"><i class="layui-icon"></i></a><a href="#" class="layui-btn"><i class="layui-icon"></i></a><br /><br /><h2>按鈕圖文:</h2><button class="layui-btn"><i class="layui-icon"></i>添加</button><button class="layui-btn"><i class="layui-icon"></i>向左</button><button class="layui-btn"><i class="layui-icon"></i>向右</button><button class="layui-btn"><i class="layui-icon"></i>添加</button><button class="layui-btn"><i class="layui-icon"></i>編輯</button><a href="#" class="layui-btn"><i class="layui-icon"></i>刪除</a><a href="#" class="layui-btn"><i class="layui-icon"></i>分享</a><br /><br /><h2>按鈕組:</h2><div class="layui-btn-group"><button class="layui-btn layui-btn-sm"><i class="layui-icon"></i>添加</button><button class="layui-btn layui-btn-sm"><i class="layui-icon"></i>編輯</button><button class="layui-btn layui-btn-sm"><i class="layui-icon"></i>刪除</button><button class="layui-btn layui-btn-sm"><i class="layui-icon"></i>分享</button></div><br /><br /><h2>按鈕容器:</h2><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> <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> <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> <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> <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> <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> <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> <button class="layui-btn">按鈕三十六</button> <button class="layui-btn">按鈕三十七</button> <button class="layui-btn">按鈕三十八</button> <button class="layui-btn">按鈕三十九</button> </div> </body> </html>9.2. 效果圖
總結
- 上一篇： 004-CSS3动画类
- 下一篇： 006-导航相关