<div> <button type="button">Search</button> <button type="button" data-toggle="dropdown"> <span></span> </button> <ul> <li><a href="javascript:;">link1</a></li> <li><a href="javascript:;">link2</a></li> <li><a href="javascript:;">link3</a></li> </ul> </div>
按钮组控件本身也支持下拉菜单的触发，所以不需要class=dropdown了
同理，在button-group上加上dropup代表向上弹出。
五.输入框组——input-group系列
用于单行文本输入框和其它小的组件（比如说span）进行排列。只支持文本输入框<input type="text">。
1. input-group-addon——直接添加到span标签
<div> <span>Email</span> <input type="email" placeholder="Enter your Email"> </div>
你也可以为span里面加单选框（radio）和复选框（checkbox），但是样式相当难看。
看上去好神奇的样子，那能为span加诸如<span><i></i></span>的图标字体吗？——抱然而真的不能用。
2. input-group-btn——直接添加到span标签，但是里面包了一个按钮
为什么要额外设置多一个input-group-addon？
.btn的样式过于复杂了。为了避免冲突，需要额外指定一个类。
<div> <span>Email</span> <input type="email" placeholder="Enter your Email"> <span><button>GO</button></span> </div>
注意：
（1） input-group-btn不是直接用，button按钮上面，同时，button按钮至少要加个btn的class，三者是配合使用的。
（2）input输入框组支持定义大小——和btn-group一样，支持input-group-lg/sm/xs+默认 四个大小样式。
【例4.2】
在上面代码的基础上，当输入正确邮箱时（if(this.value!="" && !( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ))），按钮变为可用（移除.disabled），点击可以为此地址法邮件（通常用于提交验证邮件）。用脚本实现之。
唯一需要注意的是，这里的button按钮应使用location.href作为跳转。
$(function(){ $('.form-control:input').keyup(function(){ if(this.value!="" && !( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) )){ $('button').removeClass().addClass('btn btn-success'); var address=this.value; $('button').click(function(){ location.href='mailto:'+address; }) }else{ $('button').html('GO').removeClass().addClass('btn btn-warning').addClass('disabled'); } }) })
3.与其它组件结合
（1）下拉菜单结合addon
把上面的代码修改以下，直接给按钮加上一个data-toggle="dropdown"，然后把容器由span改成div。
<div> <input type="email" placeholder="Enter your Email"> <div><button data-toggle="dropdown">GO <span></span> </button> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </div>
（2）分裂式按钮
在input-gro
<li><a href="#">Pofile</a></li>
up-btn下，组合的按钮也是可以分裂式的。无需再给父级容器加btn-group。同时应该注意到，不同点在于按钮的圆角被去掉了。
六. 导航（基本）