當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

005-按钮

發(fā)布時間：2025/4/17 编程问答 47 豆豆

生活随笔收集整理的這篇文章主要介紹了 005-按钮小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

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. 實例

7. 按鈕組

7.1. 將按鈕放入一個class="layui-btn-group"元素中, 即可形成按鈕組:

8. 按鈕容器

8.2. 盡管按鈕在同節(jié)點并排時會自動拉開間距, 但在按鈕太多的情況, 效果并不是很美好。因為你需要用到按鈕容器:

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. 效果圖

總結

以上是生活随笔為你收集整理的005-按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。

按钮