在输入框组中添加带有下拉菜单按钮的分割按钮,使用与下拉菜单按钮按钮大致相同的样式,但是对下拉菜单按钮添加了主要的下拉菜单按钮演示,如下面的实例所示:
作为额外元素的分裂式按钮下拉菜单按钮
<div class="row"> <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> <button class="btn btn-default" tabindex="-1" type="button">下拉菜单按钮</button>
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1" type="button">
<span class="caret"> </span>
<span class="sr-only">切换下拉菜单按钮</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">下拉菜单按钮演示</a></li>
<li><a href="#">另一个下拉菜单按钮演示</a></li>
<li><a href="#">其他</a></li>
<li class="divider"> </li>
<li><a href="#">分离的下拉菜单按钮</a></li>
</ul> </div> <!-- /btn-group --> <input class="form-control" type="text"></div> <!-- /input-group --> </div> <!-- /.col-lg-6 --> <div class="col-lg-6"> <div class="input-group"> <input class="form-control" type="text"> <div class="input-group-btn"> <button class="btn btn-default" tabindex="-1" type="button">下拉菜单按钮</button> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1" type="button"> <span class="caret"> </span> <span class="sr-only">切换下拉菜单按钮</span> </button> <ul class="dropdown-menu pull-right"> <li><a href="#">下拉菜单按钮演示</a></li> <li><a href="#">另一个下拉菜单按钮演示</a></li> <li><a href="#">其他</a></li> <li class="divider"> </li> <li><a href="#">分离的下拉菜单按钮</a></li> </ul> </div><!-- /btn-group --> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div>