引导程序(第5部分)|下拉菜单和响应式标签

Bootstrap是一种流行的前端框架，目的在于帮助开发者快速构建响应式站点和应用程序。本文将着重介绍Bootstrap中的下拉菜单和响应式标签。

下拉菜单

在Bootstrap中，下拉菜单是一种常见的导航组件。下拉菜单可以通过点击或悬停触发展开，并且可以包含链接、按钮、复选框等，视情况而定。

基本结构

下拉菜单的基本结构如下所示：

<div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" 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 元素。然后放一个 button 元素作为触发器，并为其添加 dropdown-toggle 类。接着在 button 元素上设置一些自定义属性，如 data-toggle="dropdown" 用来告诉浏览器该元素可以展开下拉菜单，aria-haspopup="true" 用来将下拉菜单和 button 元素相关联，aria-expanded="false" 表示下拉菜单当前没有展开。最后，使用 .dropdown-menu 类创建下拉菜单，并赋予其 aria-labelledby 属性，值应该是触发器的id。

下拉菜单的方向

Bootstrap允许您控制下拉菜单的方向。通过 dropdown-menu-right 可以将下拉菜单右对齐，而 dropdown-menu-left 则将下拉菜单左对齐。示例如下：

<div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu dropdown-menu-right" 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>

下拉菜单的分裂按钮

Bootstrap还支持下拉菜单的分裂按钮功能。分裂按钮由两个元素组成：第一个是一个按钮，第二个是一个下拉菜单，当单击按钮上的部分时，将触发某些操作，而单击小箭头时将显示下拉菜单。示例如下：

<div class="btn-group dropdown">
  <button type="button" class="btn btn-secondary">Split button</button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </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>
</div>

响应式标签

Bootstrap提供了一系列响应式标签，这些标签可以根据屏幕大小改变其样式或显示方式，以实现响应式设计。

基本结构

基本的响应式标签如下所示：

<span class="d-sm-none">This text is hidden on small screens and visible on larger screens.</span>
<span class="d-none d-md-block">This text is hidden on medium and smaller screens and visible on large screens.</span>

在上面的代码中，我们使用 .d-sm-none 将第一个 span 标签隐藏在小屏幕上，并使用 .d-none .d-md-block，将第二个 span 标签隐藏在中等和更小的屏幕上，同时在大屏幕上显示它。

类似地，您还可以使用 d-sm-block, d-md-none, d-lg-inline, d-xl-table-cell 等类来灵活控制标签在不同屏幕上的显示效果。

组合使用

在实际应用中，您还可以组合使用这些类，以便更好地控制元素在响应式布局中的表现：

<div class="d-sm-flex justify-content-between align-items-center">
  <span>Left</span>
  <span>Right</span>
</div>

在上述代码中，我们使用 d-sm-flex让屏幕宽度小于sm时这个 <div> 元素变为块级元素并水平排列子元素。使用 justify-content-between 即在左右两边各显示一个 span 标签，同时使用 align-items-center 居中对齐这两个元素。

总结

本文介绍了Bootstrap下拉菜单和响应式标签的使用。通过合理的使用，您可以快速开发出符合预期的响应式站点和应用程序。