Dropdowns

简介: 【10月更文挑战第19天】【10月更文挑战第19天】

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

基本使用

要使用Bootstrap下拉菜单,你需要包含以下元素:

  1. 一个包含dropdown类的容器。
  2. 一个按钮,通常使用btndropdown-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>
目录
相关文章
|
24天前
|
JavaScript 数据库
事件循环
【10月更文挑战第28天】
35 3
|
28天前
|
JavaScript 前端开发
require
【10月更文挑战第24天】
26 5
|
26天前
|
JavaScript
异步编程
【10月更文挑战第26天】
27 2
|
28天前
|
IDE 开发工具 开发者
通义灵码一周年:灵码编码搭子新功能有奖测评
通义灵码一周年:灵码编码搭子新功能有奖测评 【10月更文挑战第24天】
40 4
|
28天前
|
JavaScript
router.js
【10月更文挑战第24天】
23 1
|
28天前
|
程序员 Python
踢球程序
【10月更文挑战第24天】
31 3
踢球程序
|
21天前
|
Ubuntu Shell Linux
docker command
【10月更文挑战第31天】
23 6
|
19天前
|
SQL 数据库
Result Set
【11月更文挑战第02天】
30 1
|
23天前
|
传感器 JavaScript 前端开发
Event Loop
【10月更文挑战第29天】
32 4
|
24天前
|
JavaScript Linux 开发者
JXcore
【10月更文挑战第28天】
10 1