當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮组

發布時間：2025/4/16 HTML 30 豆豆

生活随笔收集整理的這篇文章主要介紹了吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮组小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>Bootstrap 實例 - 按鈕（Button）插件單選按鈕</title><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body><div class="container"><h2>按鈕組</h2><p>.btn-group 類用于創建按鈕組：</p><div class="btn-group"><button type="button" class="btn btn-primary">Apple</button><button type="button" class="btn btn-primary">Samsung</button><button type="button" class="btn btn-primary">Sony</button></div> </div></body> </html>

<!DOCTYPE html> <html><head><meta charset="utf-8"> <title>Bootstrap 實例 - 按鈕組</title><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body><div class="container"><h2>Button 按鈕組 - 設置按鈕大小</h2><p>通過 .btn-group-* 類來控制按鈕組中使用按鈕的大小。</p><h3>大按鈕:</h3><div class="btn-group btn-group-lg"><button type="button" class="btn btn-primary">Apple</button><button type="button" class="btn btn-primary">Samsung</button><button type="button" class="btn btn-primary">Sony</button></div><h3>默認大小按鈕:</h3><div class="btn-group"><button type="button" class="btn btn-primary">Apple</button><button type="button" class="btn btn-primary">Samsung</button><button type="button" class="btn btn-primary">Sony</button></div><h3>小按鈕:</h3><div class="btn-group btn-group-sm"><button type="button" class="btn btn-primary">Apple</button><button type="button" class="btn btn-primary">Samsung</button><button type="button" class="btn btn-primary">Sony</button></div><h3>超級小按鈕:</h3><div class="btn-group btn-group-xs"><button type="button" class="btn btn-primary">Apple</button><button type="button" class="btn btn-primary">Samsung</button><button type="button" class="btn btn-primary">Sony</button></div></div></body> </html>

<!DOCTYPE html> <html><head><meta charset="utf-8"> <title>Bootstrap 實例 - 按鈕</title><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body><div class="container"><h2>垂直按鈕組</h2><p>如果要設置垂直方向的按鈕可以通過 .btn-group-vertical 類來設置：</p><div class="btn-group-vertical"><button type="button" class="btn btn-primary">Apple</button><button type="button" class="btn btn-primary">Samsung</button><button type="button" class="btn btn-primary">Sony</button></div></div></body> </html>

轉載于:https://www.cnblogs.com/tszr/p/10888900.html

總結

以上是生活随笔為你收集整理的吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮组的全部內容，希望文章能夠幫你解決所遇到的問題。

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