Bootstrap组件 - 按钮组
2017-06-14 本文已影响143人
蝴蝶结199007
知识点
类 | 描述
- | :-: | -:
.btn-group | 形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。
.btn-toolbar | 该 class 有助于把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中，一般获得更复杂的组件。
.btn-group-lg, .btn-group-sm, .btn-group-xs | 对按钮的尺寸进行调整，可以用在.btn上，也可以用在.btn-group上，对一组按钮进行大小调整
.btn-group-vertical | 让一组按钮垂直堆叠排列显示而不是水平排列。分列式按钮下拉菜单不支持这种方式。
.btn-group-justified | 两端对齐，让一组按钮拉长为相同的尺寸，填满父元素的宽度。
基本按钮组
<div class="btn-group">
<input type="button" value="1" name="" class="btn btn-default"/>
<button type="button" value="" class="btn">1</button>
</div>
按钮工具栏 .btn-toolbar
<div class="btn-toolbar">
<div class="btn-group">
<input type="button" value="1" name="" class="btn btn-lg"/>
<input type="button" value="2" name="" class="btn btn-primary"/>
<input type="button" value="3" name="" class="btn btn-default"/>
</div>
<div class="btn-group">
<input type="button" value="4" name="" class="btn btn-default btn-lg"/>
<input type="button" value="5" name="" class="btn btn-primary"/>
<input type="button" value="6" name="" class="btn btn-default"/>
</div>
</div>
垂直排列
btn-group-vertical
<div class="btn-group-vertical" role="group" aria-label="">
<button type="button" value="" class="btn btn-default">1</button>
<button type="button" value="" class="btn btn-default">2</button>
<div class="btn-group-vertical"><!--这里使用btn-group，连接更贴合；使用btn-group-vertical，会产生圆角边框-->
<button value="Dropdown" type="button" value="" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
3
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
<button type="button" value="" class="btn btn-default">4</button>
</div>
两端对齐排列的按钮组
让一组按钮拉长为相同的尺寸，填满父元素的宽度。对于按钮组中的按钮式下拉菜单也同样适用。
btn-group-justified
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group">
<button type="button" value="" class="btn btn-default">1</button>
</div>
<div class="btn-group">
<button type="button" value="" class="btn btn-default">2</button>
</div>
<div class="btn-group">
<button value="Dropdown" type="button" value="" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
3
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
由于对两端对齐的按钮组使用了特定的 HTML 和 CSS （即
display: table-cell），两个按钮之间的边框叠加在了一起。在普通的按钮组中，margin-left: -1px用于将边框重叠，而没有删除任何一个按钮的边框。然而，margin 属性不支持display: table-cell。因此，根据你对 Bootstrap 的定制，你可以删除或重新为按钮的边框设置颜色。
IE8 不支持在两端对齐的按钮组中绘制边框，无论是<a>或<button>元素。为了照顾 IE8，把每个按钮放入另一个.btn-group中即可。
实践
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Resource-type" content="Document"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>组件-按钮组</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<style>
<!--
.line{border-top:1px solid #afd9ee;margin:20px 0;}
-->
</style>
</head>
<body>
<div class="container">
<!--基础的按钮组合 btn-group-->
<div class="btn-group">
<input type="button" value="1" name="" class="btn btn-default"/>
<button type="button" value="" class="btn">1</button>
<input type="button" value="2" name="" class="btn btn-default"/>
<input type="button" value="3" name="" class="btn btn-default"/>
</div>
<div class="line"></div>
<!--按钮组合-->
<div class="btn-toolbar">
<div class="btn-group">
<input type="button" value="1" name="" class="btn btn-lg"/>
<input type="button" value="2" name="" class="btn btn-primary"/>
<input type="button" value="3" name="" class="btn btn-default"/>
</div>
<div class="btn-group">
<input type="button" value="4" name="" class="btn btn-default btn-lg"/>
<input type="button" value="5" name="" class="btn btn-primary"/>
<input type="button" value="6" name="" class="btn btn-default"/>
</div>
</div>
<div class="line"></div>
<!--按钮尺寸 btn-group-lg btn-group-sm btn-group-xs-->
<div class="btn-group btn-group-lg">
<input type="button" value="1" name="" class="btn btn-default"/>
<input type="button" value="2" name="" class="btn btn-default"/>
<input type="button" value="3" name="" class="btn btn-default"/>
</div>
<div class="line"></div>
<!--嵌套-->
<div class="btn-group" role="group" aria-label="">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<!--在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本，而其他浏览器将提交 value 属性的内容-->
<button value="Dropdown" type="button" value="" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
<div class="line"></div>
<!--垂直排列的按钮组-->
<div class="btn-group-vertical" role="group" aria-label="">
<button type="button" value="" class="btn btn-default">1</button>
<button type="button" value="" class="btn btn-default">2</button>
<div class="btn-group"><!--使用btn-group，连接更贴合；使用btn-group-vertical，会产生圆角边框-->
<button value="Dropdown" type="button" value="" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
3
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
<button type="button" value="" class="btn btn-default">4</button>
</div>
<div class="line"></div>
<!--两端对齐-->
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group">
<button type="button" value="" class="btn btn-default">1</button>
</div>
<div class="btn-group">
<button type="button" value="" class="btn btn-default">2</button>
</div>
<div class="btn-group">
<button value="Dropdown" type="button" value="" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
3
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
