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>
目录
相关文章
|
前端开发 JavaScript 小程序
Taro框架使用canvas生成图片-附带源码和效果
Taro框架使用canvas生成图片-附带源码和效果
1507 0
Taro框架使用canvas生成图片-附带源码和效果
invalid-app-id(无效的AppID)参数问题自查方案
1.首先检查支付宝网关     沙箱环境网关为: [url]https://openapi.alipay[/url]dev.com/gateway.do     正式环境网关为: [url]https://openapi.
9203 12
|
机器学习/深度学习 传感器 编解码
一文详解视觉Transformer在CV中的现状、趋势和未来方向(分类/检测/分割/多传感器融合)(中)
本综述根据三个基本的CV任务和不同的数据流类型,全面调查了100多种不同的视觉Transformer,并提出了一种分类法,根据其动机、结构和应用场景来组织代表性方法。由于它们在训练设置和专用视觉任务上的差异,论文还评估并比较了不同配置下的所有现有视觉Transformer。此外,论文还揭示了一系列重要但尚未开发的方面,这些方面可能使此类视觉Transformer能够从众多架构中脱颖而出,例如,松散的高级语义嵌入,以弥合视觉Transformer与序列式之间的差距。最后,提出了未来有前景的研究方向。
一文详解视觉Transformer在CV中的现状、趋势和未来方向(分类/检测/分割/多传感器融合)(中)
|
开发者
移动端UI名词 - AxureMost
该文档介绍了多种UI组件的分类和功能,包括按钮、图标、宫格等基础组件,头像、徽标、轮播图等数据展示类组件,复选框、日期选择器、输入框等数据输入类组件,以及对话框、加载、消息通知等反馈类组件。此外,还涵盖了下拉菜单、导航栏、分页器等导航类组件。每个组件都有具体的应用场景和作用,帮助开发者快速构建界面。
646 28
|
JavaScript
Vue学习之--------路由的query、params参数、路由命名(3)(2022/9/5)
这篇文章详细介绍了Vue路由中的query参数、命名路由、params参数以及props配置的使用方式,并通过实际项目案例展示了它们在开发中的应用和测试结果,同时解释了`<router-link>`的`replace`属性如何影响浏览器历史记录。
Vue学习之--------路由的query、params参数、路由命名(3)(2022/9/5)
|
缓存
vue2进阶篇:vue-router之路由的query参数
vue2进阶篇:vue-router之路由的query参数
479 2
|
存储 移动开发 算法
分布式数据库系统期末复习
分布式数据库系统期末复习
524 0
|
人工智能 监控 Java
Command ‘nohub‘ not found, did you mean: command ‘nohup‘ from deb coreutils (8.32-4.1ubuntu1)
Command ‘nohub‘ not found, did you mean: command ‘nohup‘ from deb coreutils (8.32-4.1ubuntu1)

热门文章

最新文章