每日一bootstrap 下拉菜单

秒速五厘米 2022-07-27 13:46 203阅读 0赞

下拉菜单要使用JS插件，bootstrap的JS插件是基于jquery的，所以我们同时需要加载jquery

代码很简单。下面贴出来

<div class="dropdown">
              <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
                前端学习
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">jquery</a></li>
              </ul>
            </div>

dropdown是告诉这是下拉菜单。button的样式前面提过。caret是一个图像，一个向下的三角。我们的下拉菜单中的内容在ul中，dropdown-menu翻译过来就是下拉菜单，这里面重要的一行代码是button上的

data-toggle="dropdown"

这是调用js插件，下面来说一下这个代码  
在调用js插件是我们可以使用那种动画就引入那种插件，我们也可以一次性引入所有插件。我便是一次性引入了所有插件，虽然这个例子更适合引入单个插件。

Data 属性  
你可以仅仅通过data属性API就能使用所有Bootstrap中的插件，而且不用写一行JavaScript代码。这是Bootstrap中的一等API，并且是你的首选方式。

我是用的是通过data属性  
当然也支持使用jq来写

$('.dropdown-toggle').dropdown()

发表评论取消回复

表情：

评论列表（有 0 条评论，203人围观）

还没有评论，来说两句吧...

相关阅读

相关 Bootstrap下拉菜单

dropdown 类用来指定一个下拉菜单；使用一个按钮或链接来打开下拉菜单，按钮或链接需要添加 .dropdown-toggle 和 data-toggle=“drop

亦凉/ 2023年09月24日 16:57/ 0 赞/ 95 阅读

相关 Bootstrap教程(19)--下拉菜单、按钮式下拉菜单

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 概述 2. 下拉菜单 2.1 普通下拉菜单 2.

Bertha 。/ 2022年11月03日 11:28/ 0 赞/ 117 阅读

相关 Bootstrap下拉菜单插件

1.用法 (1)通过data属性，向链接或按钮添加data-toggle=”dropdown”来切换下拉菜单如果需要保持链接完整（在浏览器不启用JavaScript时

梦里梦外;/ 2022年08月23日 09:54/ 0 赞/ 278 阅读

相关每日一bootstrap 下拉菜单

下拉菜单要使用JS插件，bootstrap的JS插件是基于jquery的，所以我们同时需要加载jquery 代码很简单。下面贴出来 <div class="drop

秒速五厘米/ 2022年07月27日 13:46/ 0 赞/ 204 阅读

相关 Bootstrap 自定义下拉菜单

原因有 `三角形` ![这里写图片描述][70] 代码 html <span data-toggle="dropdown" class="

快来打我*/ 2022年05月18日 01:42/ 0 赞/ 297 阅读

相关 bootstrap下拉菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

亦凉/ 2022年01月14日 14:01/ 0 赞/ 377 阅读

相关 bootstrap38-Bootstrap 下拉菜单-标题

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 下拉菜单-标题</title

古城微笑少年丶/ 2022年01月09日 15:49/ 0 赞/ 352 阅读

相关 BootStrap 下拉多级菜单

<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <t

野性酷女/ 2021年12月05日 16:54/ 0 赞/ 441 阅读

相关 bootstrap-按钮下拉菜单

1.运行效果如图所示 [![wKiom1klPKGh8gRbAAAg9x1p0iM566.png-wh\_50][wKiom1klPKGh8gRbAAAg9x1p0iM5

Myth丶恋晨/ 2021年09月19日 05:00/ 0 赞/ 442 阅读

相关 Bootstrap的下拉菜单dropdown

.dropdown 类用来指定一个下拉菜单。我们可以使用一个按钮或链接来打开下拉菜单，按钮或链接需要添加 .dropdown-toggle 和 data-toggle="

深碍√TFBOYSˉ_/ 2021年09月15日 01:44/ 0 赞/ 781 阅读