Bootstrap 快速入门之第五章组件之图标&下拉菜单&按钮组&按钮式下拉菜单

最新推荐文章于 2026-05-28 09:46:27 发布

原创最新推荐文章于 2026-05-28 09:46:27 发布 · 1.8k 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文详细介绍了Bootstrap中的图标使用，包括内嵌、Sprite和作为外部图片文件引用的方式。接着，讨论了下拉菜单组件的基本格式和各种定制选项，如设置菜单方向、标题、分割线和禁用项。然后，讲解了按钮组组件的创建和不同布局，以及如何在按钮组中嵌套下拉菜单。最后，阐述了按钮式下拉菜单的实现，包括单按钮和分裂式，并展示了向上弹出的效果。

一：图标

Bootstrap 图标库的所有图标都是 SVG 格式的，因此你可以通过以下几种方式将它们添加到你的 HTML 中，具体使用哪种方式取决于你的项目是如何设置的。我们建议设置 width: 1em（以及可选的 height: 1em），便于你通过 font-size 属性重置图标的大小。

用法：

1.内嵌

将图标嵌入你的 HTML 页面中（与引用外部图像文件相反）。如下例子中我们对 width 和 height 属性进行了重新设置。

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>

2.Sprite

利用 SVG sprite 和 <use> 元素即可插入任何图标。使用图标的文件名作为片段标识符（例如 toggles 就是 #toggles）。SVG sprites 允许你像 <img> 元素一样引用外部文件，并支持 currentColor 的功能以便主题化。

注意！ 在 chrome 浏览器中，<use> 不能跨域使用。

<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#toggles"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#shop"/>
</svg>

3.作为外部图片文件引用

将 Bootstrap 图标库的 SVG 文件复制到你所选择的目录中，并像引用普通图片一样通过 <img> 元素引入 SVG 图标。

<img src="/assets/img/bootstrap.svg" alt="Bootstrap" width="32" height="32">

二：下拉菜单组件

①：基本下拉菜单组件格式

<div class="dropdown">
   <button class="btn btn-default" data-toggle="dropdown">
       下拉菜单
       <span class="caret"></span>
   </button>

   <ul class="dropdown-menu">
       <li><a href="#">菜单1</a></li>
       <li><a href="#">菜单2</a></li>
       <li><a href="#">菜单3</a></li>
       <li><a href="#">菜单4</a></li>
   </ul>
</div>

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

注意事项：

按钮和菜单需要包裹在.dropdown容器中
作为被点击的元素按钮需要设置data-toggle="dropdown"才能有效
被点击的元素按钮设置class="caret"表示箭头
对于菜单部分，需要设置class="dropdown-menu"才能自动隐藏并添加固定样式

②：下拉菜单向上触发

class="dropup"

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

③：设置菜单的标题

添加标题以标记任何下拉菜单中的操作部分

<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>

④：设置菜单的分割线

<li class="divider"></li>

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

⑤：设置菜单的禁用项

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

⑥：设置菜单默认显示(打开)

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

三：按钮组组件

按钮组就是多个按钮集成在一个容器里形成独有的效果

①：基本按钮组

<div class="btn-group">
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
</div>

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

②：多个按钮组整合【效果不明显】

<div class="btn-toolbar">
<div class="btn-group"><button>按钮1</button></div>
<div class="btn-group"><button>按钮1</button></div>
</div>

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-secondary">8</button>
  </div>
</div>

③：设置按钮组大小

<div class="btn-group btn-group-lg">
<div class="btn-group(默认)">
<div class="btn-group btn-group-sm">
<div class="btn-group btn-group-xs">

④：按钮组中嵌套下拉菜单

<div class="btn-group">
 	<button>按钮1</button>
 	<button>按钮2</button>
 	<div class="btn-group">  
  		<button class="btn btn-default dropdown-toggle"> 
     			下拉菜单
  		</button>
  		<ul class="dropdown-menu">
  		</ul>
  	</div>
	<button>按钮3</button>
</div>

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

⑤：设置按钮组垂直排列

<div class="btn-group-vertical">

<div class="btn-group-vertical">
  ...
</div>

⑥：设置两端对齐按钮组

方式1：使用<a>【推荐使用】

<div class="btn-group btn-group-justified">
  	<a type="button" class="btn btn-default">按钮1</a>
  	<a type="button" class="btn btn-default">按钮2</a>
</div>

方式2：使用<button>

<div class="btn-group btn-group-justified">
   <div class="btn-group">
      	<button>按钮1<button/>
   </div>
   <div class="btn-group">
   	<button>按钮2<button/>
   </div>
</div>

四：按钮式下拉菜单

①：单按钮下拉菜单

<div class="btn-group"> 
     <button class="btn btn-default dropdown-toggle">
	下拉菜单
     </button>
     <ul class="dropdown-menu">
    </ul>
</div>

【dropdown-toggle可以将样式变好看】

②：分裂式按钮下拉菜单

<div class="btn-group"> 
    <button>下拉菜单</button>
    <button class="btn btn-default dropdown-toggle">
         <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
    </ul>
</div>