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>
目录
相关文章
|
1月前
|
机器学习/深度学习 算法框架/工具 计算机视觉
swapRB
【9月更文挑战第15天】
32 2
|
1月前
|
API Android开发 开发者
NavigableListDetailPaneScaffold
【9月更文挑战第12天】
18 5
|
3天前
|
供应链 物联网 区块链
新技术潮流之巅:区块链、物联网与虚拟现实的融合与创新
【10月更文挑战第9天】在数字化浪潮中,新兴技术如区块链、物联网(IoT)和虚拟现实(VR)正逐步渗透至我们生活的方方面面。本文将深入探讨这些技术的发展趋势,以及它们如何相互交织,共同塑造未来。我们将从技术原理出发,分析其在金融、医疗、教育和娱乐等行业的应用实例,并展望未来可能带来的变革。通过实际案例,我们将揭示这些技术如何提升效率、增强体验,并推动社会进步。
|
10天前
|
运维 自然语言处理 Cloud Native
云栖实录 | 智能运维年度重磅发布及大模型实践解读
阿里云大数据运维团队重磅发布云原生大规模集群场景的 GitOps 方案,该方案基于 OAM 云原生模型,促进研发与运维人员协作,同时兼顾变更的过程管理和终态管理,可实现变更的自动化、代码化、透明化。此外,阿里云大数据运维团队分享了大模型在大数据智能运维场景的应用实践,通过引入检索增强生成(RAG)方法和其他优化策略,大幅提高了在智能问答和智能诊断方面知识的关联性和检索精度,并基于多智能体框架建立高效的数据分析和决策支持系统。
|
1月前
|
Java 应用服务中间件 测试技术
Maven学习笔记(一):Maven基础(基于命令行的学习和应用)
Maven 是一款 Java 项目构建工具,主要用于管理 jar 包及其依赖关系。 本文主要了解Maven基础知识及基础应用,旨在为之后的进一步学习奠定基础。 内容上几近全为学习《尚硅谷2022版Maven教程》整理所得。 仅供参考。
216 80
Maven学习笔记(一):Maven基础(基于命令行的学习和应用)
|
1月前
|
Linux
linux目录结构
bin 存放常用的命令 sbin 系统管理员使用的系统管理程序 home 用户名账户目录 lib 开机基本的动态连接共享库 lost+found 非法关机后会存放一些文件 etc 所有管理所需要的配置文件和子目录 usr 用户很多应用和程序都放在这个目录 boot 系统启动核心文件 media 自动识别设备 mnt 挂载文件系统 opt 默认安装软件存放目录
237 95
|
1月前
IP地址
地址是指用于标识在网络上的设备或节点的一组数字,它是Internet协议(IP)中使用的一种地址格式。 IP地址通常由32位二进制数表示,被分成4个8位的十进制数
238 95
|
1月前
|
Android开发 Kotlin
Android经典面试题之Kotlin的==和===有什么区别?
本文介绍了 Kotlin 中 `==` 和 `===` 操作符的区别:`==` 用于比较值是否相等,而 `===` 用于检查对象身份。对于基本类型,两者行为相似;对于对象引用,`==` 比较值相等性,`===` 检查引用是否指向同一实例。此外,还列举了其他常用比较操作符及其应用场景。
179 93
|
1月前
|
云计算 开发者
aliyun开博第一篇20240917
这是阿里云开博的第一篇文章,发布于2024年9月17日。本文标志着阿里云在技术分享与交流领域的新起点,将深入探讨前沿科技、云计算趋势及实践应用,为开发者和行业专家提供有价值的洞察与见解。
178 90
|
1月前
|
SQL 监控 druid
Druid连接池学习
Druid学习笔记,使用Druid进行密码加密。参考文档:https://github.com/alibaba/druid
291 84