- 按钮组用
<div>
包含,样式为btn-group
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<title>Button Groups</title>
<script>
function showHTMLContent(showElement, codeElement) {
$(showElement).html($('<div/>').text($(codeElement).html()).html());
}
$(function() {
showHTMLContent('#showBasicStyle', '#basicStyle');
showHTMLContent('#showJustifiedStyle', '#justifiedStyle');
showHTMLContent('#showDropdownStyle', '#dropdownStyle');
showHTMLContent('#showSplitDropdownStyle', '#splitDropdownStyle');
$(":radio").click(function() {
$("#btnGroup").attr("class", $(this).val());
showHTMLContent('#showBasicStyle', '#basicStyle');
});
});
</script>
</head>
<body>
<div class="container">
<h1> 基本样式 </h1>
<h2> 选择样式 </h2>
<form>
<input type="radio" name="style" value="btn-group" checked>btn-group<br>
<input type="radio" name="style" value="btn-group btn-group-lg">btn-group btn-group-lg<br>
<input type="radio" name="style" value="btn-group btn-group-sm">btn-group btn-group-sm<br>
<input type="radio" name="style" value="btn-group-vertical">btn-group-vertical<br>
</form>
<h2> 代码 </h2>
<pre id="showBasicStyle"></pre>
<h2> 样式 </h2>
<div id="basicStyle">
<div class="btn-group" id="btnGroup">
<button type="button" class="btn btn-primary">C++</button>
<button type="button" class="btn btn-primary">Java</button>
<button type="button" class="btn btn-primary">Python</button>
</div>
</div>
<br><br>
<h1> Justified 样式 </h1>
<h2> 代码 </h2>
<pre id="showJustifiedStyle"></pre>
<h2> 样式 </h2>
<div id="justifiedStyle">
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">C++</a>
<a href="#" class="btn btn-primary">Java</a>
<a href="#" class="btn btn-primary">Python</a>
</div>
</div>
<br><br>
<h1> 下拉菜单 </h1>
<h2> 代码 </h2>
<pre id="showDropdownStyle"></pre>
<h2> 样式 </h2>
<div id="dropdownStyle">
<div class="btn-group">
<button type="button" class="btn btn-primary">C++</button>
<button type="button" class="btn btn-primary">Java</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Python <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Python2</a></li>
<li><a href="#">Python3</a></li>
</ul>
</div>
</div>
</div>
<br><br>
<h1> Split下拉菜单 </h1>
<h2> 代码 </h2>
<pre id="showSplitDropdownStyle"></pre>
<h2> 样式 </h2>
<div id="splitDropdownStyle">
<div class="btn-group">
<button type="button" class="btn btn-primary">C++</button>
<button type="button" class="btn btn-primary">Java</button>
<button type="button" class="btn btn-primary">Python</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Python2</a></li>
<li><a href="#">Python3</a></li>
</ul>
</div>
</div>
<br><br><br><br>
</div>
</body>
</html>