输入框组带有下拉菜单的按钮

W3CSchool > bootstrap3中文手册 > Bootstrap 输入框组 > 输入框组带有下拉菜单的按钮

输入框组带有下拉菜单的按钮

在输入框组中添加带有下拉菜单的按钮,只需要简单地在一个 .input-group-btn class 中包裹按钮和下拉菜单即可。

如下面的实例所示:

作为额外元素的按钮式下拉菜单

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">按钮式下拉菜单 <span class="caret"></span></button>
        <ul class="dropdown-menu" role="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 type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">按钮式下拉菜单 <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right" role="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 -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

CTRL + D 收藏本页

学习导航


Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)