Bootstrap组件_下拉菜单

最新推荐文章于 2024-08-22 20:17:40 发布
最新推荐文章于 2024-08-22 20:17:40 发布
阅读量449 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Leon_Jinhai_Sun/article/details/88356208
版权 
下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>下拉菜单</title>
  <link rel="stylesheet" href="bootstrap.min.css">
  <script src="jquery-1.12.1.js"></script>
  <script src="bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="dropdown">
      <button type="button" class="btn btn-default dropdown-toggle" 
        data-toggle="dropdown" aria-expanded="false">
        地铁线路
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>下拉菜单</title>
  <link rel="stylesheet" href="bootstrap.min.css">
  <script src="jquery-1.12.1.js"></script>
  <script src="bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="dropdown">
      <button type="button" class="btn btn-default dropdown-toggle" 
        data-toggle="dropdown" aria-expanded="false">
        地铁线路
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu dropdown-menu-right" >
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>下拉菜单</title>
  <link rel="stylesheet" href="bootstrap.min.css">
  <script src="jquery-1.12.1.js"></script>
  <script src="bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="dropdown pull-right">
      <button type="button" class="btn btn-default dropdown-toggle" 
        data-toggle="dropdown" aria-expanded="false">
        地铁线路
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu dropdown-menu-right" >
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
</body>
</html>
标题

在任何下拉菜单中均可通过添加标题来标明一组动作。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>下拉菜单</title>
  <link rel="stylesheet" href="bootstrap.min.css">
  <script src="jquery-1.12.1.js"></script>
  <script src="bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="dropdown pull-right">
      <button type="button" class="btn btn-default dropdown-toggle" 
        data-toggle="dropdown" aria-expanded="false">
        地铁线路
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" >
        <li><a href="#">Action</a></li>
        <li class="dropdown-header">标题</li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
</body>
</html>
分割线

为下拉菜单添加一条分割线，用于将多个链接分组。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>下拉菜单</title>
  <link rel="stylesheet" href="bootstrap.min.css">
  <script src="jquery-1.12.1.js"></script>
  <script src="bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="dropdown">
      <button type="button" class="btn btn-default dropdown-toggle" 
        data-toggle="dropdown" aria-expanded="false">
        地铁线路
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
</body>
</html>
禁用的菜单项

为下拉菜单中的 <li> 元素添加 .disabled 类，从而禁用相应的菜单项。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>下拉菜单</title>
  <link rel="stylesheet" href="bootstrap.min.css">
  <script src="jquery-1.12.1.js"></script>
  <script src="bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="dropdown">
      <button type="button" class="btn btn-default dropdown-toggle" 
        data-toggle="dropdown" aria-expanded="false">
        地铁线路
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li class="disabled"><a href="#">2</a></li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
</body>
</html>

 

Leon_Jinhai_Sun
关注
bootstrap 下拉菜单
BigaDemo的专栏
12-03 969
一、下拉菜单 用于显示链接列表的可切换、有上下文的菜单。 案例 将下拉菜单触发器和下拉菜单都包裹在.dropdown里，然后添加组成菜单的HTML代码。 div class="dropdown"> button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Bootstrap下拉菜单
weixin_34347651的博客
07-02 450
前面的话 　　网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项，Bootstrap默认提供了用于显示链接列表的可切换、有上下文的菜单。而且在各种交互状态下的菜单展示需要和javascript插件配合才能使用。本文将详细介绍Bootstrap下拉菜单   使用方法 　　在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件。当然，如果...
Bootstrap 下拉菜单（Dropdown）插件
最新发布
2402_83140078的博客
08-22 438
这一章讲解了下拉菜单，但是没有涉及到交互部分，本章将具体讲解下拉菜单的交互。使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。如果您想要单独引用该插件的功能，那么您需要引用。或者，正如一章中所提到，您可以引用或压缩版的。
Bootstrap 下拉菜单
博客
05-31 219
&lt;div class="dropdown"&gt; &lt;button data-toggle="dropdown"&gt;按钮&lt;/button&gt; &lt;ul class="dropdown-menu"&gt; &lt;li&gt;简单的下拉菜单&lt;/li&gt; &lt;/ul&gt; &lt
3.2 Bootstrap 下拉菜单(Dropdowns)
梁辰兴的博客
07-13 1023
本章将重点介绍 Bootstrap 下拉菜单。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown） JavaScript 插件 的互动来实现。您可以使用 class dropdown-header 向下拉菜单的标签区域添加标题。内加上下拉菜单即可。来向右对齐下拉菜单。如需使用下拉菜单，只需要在 class。
bootstrap 导航栏下拉菜单，居右下拉菜单
09-05
在Bootstrap中，导航栏（Navbar）是网站头部导航的重要组成部分，而下拉菜单（Dropdown Menu）则为导航栏增加了更多交互性。本实践将详细介绍如何在Bootstrap中创建一个居右的下拉菜单。 首先，为了创建一个基本的...
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
08-31
Bootstrap的下拉菜单功能依赖于jQuery库，因为其JavaScript组件是构建在jQuery之上的。在上述示例中，开发者在尝试创建一个简单的下拉菜单时遇到了问题，即点击按钮后下拉菜单没有弹出。开发者参考教程编写HTML代码...
Bootstrap实现下拉菜单多级联动
08-28
Bootstrap 实现下拉菜单多级联动 Bootstrap 是一个非常流行的前端框架，它提供了许多实用的组件和工具，使得开发者可以快速构建漂亮的网页。今天，我们将讨论如何使用 Bootstrap 实现下拉菜单多级联动。 在 ...
bootstrap实现二级下拉菜单效果
08-28
Bootstrap 实现二级下拉菜单效果 Bootstrap 是一个流行的前端框架，提供了许多实用的 UI 组件，包括按钮、导航、 Alerts 等。今天，我们将详细介绍如何使用 Bootstrap 实现二级下拉菜单效果。 首先，让我们了解...
Bootstrap 下拉菜单（Dropdowns）
12-13
Bootstrap 下拉菜单（Dropdowns） 本章将重点介绍 Bootstrap 下拉菜单。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 结果如下所示： 选项 对齐 通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。下面的实例演示了这点： 实例 主题 Java 数据挖掘 数据通信/网络 分离的链接
16Bootstrap5下拉菜单
醉瑾_的博客
12-10 1052
16Bootstrap5下拉菜单 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>菜鸟教程Bootstrap5下拉菜单</title> <link rel=
Bootstrap组件——下拉菜单
xun__xing的博客
07-29 1546
下拉菜单一、下拉菜单1.单一按钮的下拉菜单1.btn菜单2.``菜单 一、下拉菜单 1.单一按钮的下拉菜单 1.btn菜单 任何一个 .btn块都可以定义变更为下拉菜单。 <div> <div class="col-2"> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">button标签下拉</but
Bootstrap的下拉菜单
天高任鸟飞
06-27 397
下拉菜单 引入Boostrap的CSS和JS &lt;div class="dropdown"&gt; &lt;a data-toggle="dropdown" href="#"&gt;下拉菜单&lt;/a&gt; &lt;ul class="dropdown-menu" role="menu" aria-labelledby=&quot
BootStrap下拉菜单
秋城落叶的博客
03-31 411
Bootstrap 下拉菜单将具体讲解下拉菜单的交互,使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单 菜单div <divclass="dropdown"> 菜单li <liclass="dropdown"> 下拉按钮，id用来给下拉菜单指向用...
bootstrap下拉菜单
m0_51281306的博客
03-29 727
<div class="container"> <div class="dropdown"> <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> ...
Bootstrap下拉菜单深度解析
在Bootstrap中，下拉菜单的实现基于其组件系统，为开发者提供了便捷的样式和交互功能。在不同版本的Bootstrap中，下拉菜单的源码文件有所不同： 1. 对于使用LESS的Bootstrap版本，对应的源代码文件是`dropdowns....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值