Dropdowns

Bootstrap 下拉菜单（Dropdowns）是Bootstrap框架提供的一个组件，它允许你将链接、文本或其他内容隐藏在一个可点击的按钮下，当用户点击这个按钮时，下拉菜单会显示出来。这种组件在网页设计中非常常见，用于创建导航栏、工具栏等。

基本使用

要使用Bootstrap下拉菜单，你需要包含以下元素：

1. 一个包含dropdown类的容器。
2. 一个按钮，通常使用btn和dropdown-toggle类，并包含data-toggle="dropdown"属性。
3. 一个<ul>元素，包含dropdown-menu类，它包含了下拉菜单的项。
4. 下拉菜单项，通常是<li>元素，包含链接<a>。

HTML结构

以下是一个基本的下拉菜单的HTML结构：

<div class="dropdown">
    <!-- 下拉触发按钮 -->
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
        主题
        <!-- 下拉箭头 -->
        <span class="caret"></span>
    </button>
    <!-- 下拉菜单 -->
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
        </li>
    </ul>
</div>

样式和行为

• .dropdown类为下拉菜单提供了基本的布局。
• .btn和.dropdown-toggle类为按钮提供了样式和下拉触发功能。
• .dropdown-menu类为下拉菜单项提供了样式。
• caret类提供了下拉箭头的样式。
• divider类可以添加一个分隔线，用于区分不同的菜单组。

对齐方式

你可以通过添加.pull-right类到.dropdown-menu中来改变下拉菜单的对齐方式，使其向右对齐。

<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
    <!-- 菜单项 -->
</ul>

JavaScript 插件

Bootstrap的下拉菜单依赖于JavaScript插件来控制显示和隐藏的行为。确保你的页面已经加载了Bootstrap的JavaScript文件，通常是通过在<head>标签中包含以下代码：

<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!-- 引入Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>