Bootstrap 按钮组
按钮组
Bootstrap 让您可以将一系列按钮组合在一个按钮组中（在一行上）:
使用一个带有 .btn-group 样式的 <div> 元素来创建一个按钮组:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>Button 组</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>
提示：不要将按钮大小样式应用于按钮组中的每个按钮，而是使用 .btn-group-lg|sm|xs 设置组中所有按钮的大小:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>Button 组 - 设置大小</h2><p>使用 <code class="marked">.btn-group-lg|sm|xs</code> 设置组中所有按钮的大小</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>
垂直按钮组
Bootstrap 也支持垂直按钮组:
使用 .btn-group-vertical 来创建一个垂直按钮组:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></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>
两端对齐的按钮组
要撑满屏幕的整个宽度，请使用 .btn-group-justified 样式:
使用 <a> 元素的实例:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>两端对齐的按钮组</h2><p>要撑满屏幕的整个宽度，请使用 .btn-group-justified 样式:</p><div class="btn-group btn-group-justified"><a href="#" class="btn btn-primary">Apple</a><a href="#" class="btn btn-primary">Samsung</a><a href="#" class="btn btn-primary">Sony</a></div></div></body></html>
注意：对于 <button> 元素，必须将每个按钮都用一个 .btn-group 样式包裹
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>两端对齐的按钮组</h2><div class="btn-group btn-group-justified"><div class="btn-group"><button type="button" class="btn btn-primary">Apple</button></div><div class="btn-group"><button type="button" class="btn btn-primary">Samsung</button></div><div class="btn-group"><button type="button" class="btn btn-primary">Sony</button></div></div></div></body></html>
嵌套按钮组 & 下拉目录
嵌套按钮组创建下拉菜单:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>嵌套按钮组</h2><p>嵌套按钮组创建下拉菜单:</p><div class="btn-group"><button type="button" class="btn btn-primary">Apple</button><button type="button" class="btn btn-primary">Samsung</button><div class="btn-group"><button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Sony <span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li><a href="#">Tablet</a></li><li><a href="#">Smartphone</a></li></ul></div></div></div></body></html>
按钮下拉列表
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>按钮下拉列表</h2><div class="btn-group"><button type="button" class="btn btn-primary">Sony</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="#">Tablet</a></li><li><a href="#">Smartphone</a></li></ul></div></div></body></html>