CSS组件

最新推荐文章于 2025-06-03 23:42:32 发布

见面时的呼吸都曾反复练习

最新推荐文章于 2025-06-03 23:42:32 发布

阅读量554

点赞数

CC 4.0 BY-SA版权

分类专栏： Bootstrap 文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/wstpa/article/details/50404892

Bootstrap 专栏收录该内容

6 篇文章

订阅专栏

本文介绍Bootstrap框架中下拉菜单与按钮组的使用方法，包括不同样式、尺寸及组合方式，还涉及按钮式下拉菜单、分裂式按钮下拉菜单及输入框组的应用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、字体

bootstrap自带的Glyphicons 字体图标，还有是font awesome

2、下拉菜单

.dropdown 最大作用给了父级position: relative; 菜单向下弹出
.dropup 菜单向上弹出
.dropdown-toggle data-target=”dropdown” .caret 按钮及下拉图标
.dropdown-menu 下拉菜单
.dropdown-header 标题
.divider 分割线
.disabled 禁用项
为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" >
    <li class="dropdown-header">Dropdown header</li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li class="disabled"><a href="#">Separated link</a></li>
  </ul>
</div>

默认下：下拉菜单是隐藏的，如果给父元素加上一个.open的类，就会显示。

3、按钮组 btn-group

3.1 、基本实例
这里写图片描述

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

3.2、按钮工具栏
把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中做成更复杂的组件。

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

3.3、尺寸
只要给 .btn-group 加上 .btn-group-* 类，

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

3.4、按钮组嵌入下拉菜单
只须把 .btn-group 放入另一个 .btn-group 中

<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">  //类名必须为btn-group，如果是dropdown则会布局错乱
    <button type="button" 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>

3.5、按钮组垂直排列

.btn-group-vertical

4、按钮式下拉菜单

外部容器的样式.dropdown换为了.btn-group

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

4.2、分裂式按钮下拉菜单
这里写图片描述

<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

4.3、尺寸
不管是组合式下拉菜单还是分离式下拉下单，都可以使用.btn原来的附加样式.btn-lg,.btn-sm,.btn-xs；

4.4、向上弹起的下拉菜单
在.btn-group里附加一个.dropup即可；

5、输入框组

输入框组可以嵌套到表单组或栅格相关元素的内部，反之不行！！
5.1、基本用法
在容器上应用.input-group，然后在个性元素上应用.input-group-addon
。
这里写图片描述

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

5.2、尺寸大小
只有input-group-lg和input-group-sm

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

5.3、复选框与单选框作为addon
只要在.input-group-addon样式内放置checkbox和radio类型的input即可。

<div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" />
      </span>
      <input type="text" class="form-control" />
</div>

5.4、按钮作为addon
需要用.input-group-btn 替换 .input-group-addon

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

5.5、下拉菜单作为addon