吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:按钮组
生活随笔
收集整理的這篇文章主要介紹了
吴裕雄 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 按钮:按钮组的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 克罗谈投资策略10
- 下一篇: Java复习(四)类的重用