吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮组
生活随笔
收集整理的這篇文章主要介紹了
吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮组
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"> <title>Bootstrap 實(shí)例 - 按鈕（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 類用于創(chuàng)建按鈕組：</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 實(shí)例 - 按鈕組</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 按鈕組 - 設(shè)置按鈕大小</h2><p>通過(guò) .btn-group-* 類來(lái)控制按鈕組中使用按鈕的大小。</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>默認(rèn)大小按鈕:</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>超級(jí)小按鈕:</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 實(shí)例 - 按鈕</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>如果要設(shè)置垂直方向的按鈕可以通過(guò) .btn-group-vertical 類來(lái)設(shè)置：</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>
?
轉(zhuǎn)載于:https://www.cnblogs.com/tszr/p/10888900.html
總結(jié)
以上是生活随笔為你收集整理的吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮组的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 克罗谈投资策略10
- 下一篇： Java复习(四)类的重用