[bootstrap] 下拉菜单

最新推荐文章于 2022-05-03 15:56:14 发布
最新推荐文章于 2022-05-03 15:56:14 发布
阅读量174 收藏
点赞数
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GYK0812/article/details/109276805
版权

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1-15 下拉菜单</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                    <div class="dropdown">  <!--dropdown 下拉菜单-->
                        <!--aria-haspopup='true'允许鼠标悬停， aria-expanded='true' 默认为展开状态 -->
                        <button type="button" class="btn btn-info dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false">
                        公司产品
                            <span class="caret"></span>  <!-- 倒三角符号  -->
                        </button>

                        <!-- 当想要的标签文本已经在其他元素中存在时， 可以使用aria-labelledby(标签引动)， 并将其值为所有读取的元素的id。
                        如下：
                        当ul获取到焦点时，屏幕阅读器是会读button 标签的文本： “新闻动态” -->
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <li><a href="#">国内新闻</a></li>
                            <li><a href="#">国际新闻</a></li>
                            <li><a href="#">行业动态</a></li>
                            <li role="separator" class="divider"></li>   <!-- 分割线 -->
                            <li class="disabled"><a href="#">公司新闻</a></li>
                        </ul>
                    </div>

                    <br>
                    <br>
                    <hr>
                    <br>
                    <br>
                    
                    <div class="dropup">  <!-- dropup 上拉菜单 -->
                        <!-- <button type="button" class="btn btn-default dropup-toggle" id=dropdownMenu2 data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false"> -->
                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        产品信息
                        <span class="caret"></span>    
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
                            <li><a href="#">电影</a></li>
                            <li><a href="#">电视剧</a></li>
                            <li><a href="#">体育</a></li>
                            <li role="separator" class="divider"></li>   <!-- 分割线 -->
                            <li class="disabled"><a href="#">公司新闻</a></li>
                        </ul> 

                    </div>

            </div>
        </div>
    </div>
    
</body>
</html>

 

尉迟海棠
关注
专栏目录
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
08-31
在使用Bootstrap构建网页时，下拉菜单是一种常见的交互元素，它允许用户在单个按钮下访问多个选项。然而，有时可能会遇到下拉菜单点击后无法显示的问题，这通常是由于JavaScript库加载顺序错误导致的。本篇文章将...
bootstrap和JS实现下拉菜单
weixin_30390075的博客
08-21 99
// bootstrap下拉菜单 <div class="btn-group"> <button id="button_text" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="f...
详解Bootstrap中JS插件实现下拉菜单效果
热门推荐
wyhstars的博客
11-27 1万+
在编写网站过程中，导航条中下拉菜单功能十分常见。那么，今天就分享一下关于如何通过Bootstrap中JS插件来实现下拉菜单功能。 在官方文档中是这么形容下拉菜单插件的 翻译过来就是： 通过此插件您可以为几乎所有东西添加下拉菜单，包括导航条、标签页、胶囊式按钮。 接下来，我们就按照官方文档所描述的那样，为大家演示， 我们如何通过JS插件为导航条、标签页以及胶囊式按钮添加下
Bootstrap布局组件教程之Bootstrap下拉菜单
09-02
Bootstrap下拉菜单是网页设计和开发中常用的交互元素，它为用户提供了一种简洁的方式来展示一组相关的链接或操作。在Bootstrap框架中，下拉菜单的实现依赖于JavaScript插件，特别是Dropdown组件，它使得用户能够通过...
Bootstrap下拉菜单样式
08-31
下面我们将详细讨论Bootstrap下拉菜单的样式及其创建方法。 首先，Bootstrap下拉菜单的基础结构包括以下几个关键部分： 1. **添加`dropdown`父级**：这是创建下拉菜单的基本容器，通常是一个`div`元素，带有`....
JS模拟bootstrap下拉菜单效果实例
10-22
JS模拟bootstrap下拉菜单效果的实例重点在于利用JavaScript来动态地控制页面元素，以实现类似bootstrap框架中的下拉菜单功能。在这个过程中，开发者需要掌握的关键知识点包括DOM操作、事件处理、CSS样式的动态应用等...
Bootstrap 下拉菜单.dropdown的具体使用方法
08-29
Bootstrap 下拉菜单.dropdown 的具体使用方法 Bootstrap 下拉菜单.dropdown 是一个常用的前端组件，用于提供用户交互式的菜单选项。在 Bootstrap 框架中，下拉菜单.dropdown 是一个非常重要的组件，广泛应用于各种 ...
[bootstrap] 创建水平表单 - form-horizontal
GYK0812的博客
10-08 1773
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>1-9 创建垂直表单</title> <link rel="stylesheet" href="css...
Laravel 框架 - Eloquent ORM中新增数据
GYK0812的博客
03-13 1563
1. 插入数据 // 使用ORM新增数据 $student = new Student(); $student->name = 'yingkun'; $student->age = 18; $bool = $student->save(); dd($bool); //其中module...
[bootstrap] 在html中引入bootstrap
GYK0812的博客
10-06 1540
1. 引入bootstrap样式表 2. 引入jquery 3. 引入bootstrap自身的 .js文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>1-3 引入b.
Laravel 框架 - 模板中的url
GYK0812的博客
03-13 1526
在模板中获取url 有三种方式，url() / action() /route() <a href="{{ url('url') }}">url()</a> <a href=" {{ action('StudentController@urlTest') }}">action()</a> <a href="{{ route('urltest1') }}">route()</a> 路由配置如下： Ro.
Laravel 框架 - 模板继承
GYK0812的博客
03-13 1393
1. 父模板中用到的关键字： section -> 可以包含一些内容，这些内容页可以被子模板继承 yield -> 相当于一个占位符，在父模板中可以不定义任何内容， 如果定义了内容，子模版如果没有对应的定义，则显示父模板，如果有定义，则显示子模版 2. 子模版继承时，首行需要使用关键字 extentds 继承父模板 3. 子模版重写时，用到的关键字： 3-1. 重写section： 其中@parent为父模板中的内容 @section('header') @par..
laravel 框架 - 模板的基础语法以及include的使用
GYK0812的博客
03-13 1348
1. 在模板中输出php变量 -> 双大括号 {{ $name }} 2. 在模板中调用php 代码 @section('content') {{-- 模板中调用php代码--}} <p>{{ time() }}</p> {{ date('Y-m-d H:i:s', time()) }} {{ in_array('sean',$arr) ? 'true' : 'false'}} {{-- $name 变量如果不等于nu...
laravel 框架 - Controller 之 Session
GYK0812的博客
04-05 1328
session 可以用于存储用户数据，支持多种后端驱动，比如file， redis， memcached等。默认使用file进行驱动。 session 的配置文件在config/session.php中。 操作session的三种方法： 1. HTTP request类中的session()方法 request->session()->put() // 存数据 request->session()->get() // 取数据 2. session() ...
[Laravel] 如何使用PHP实现前端分页
GYK0812的博客
05-03 1301
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、用到的一些要点二、HTML中居中对其的几种方式1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、用到的一些要点 浮动对齐pull-right(bs3)， float-right (bs4) 分页 列表组 面板 表格 网格.
[bootstrap] 插入图标
GYK0812的博客
10-25 1076
<!--使用图标需要注意： 1.图标对应的类必须放在不含文本的span标签内 2.将这个span嵌套在其他元素中使用--> 效果图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal...
xampp 配置多个项目
GYK0812的博客
02-05 955
下载并安装xampp（可参考其他资料） 在 /xampp/apache/conf/extra 中创建一个新文件，比如文件名为 httpd-platform.conf 内容如下，其中第二行和第三行需替换成自己的project下的public文件夹： <IfModule alias_module> Alias /platform "D:\2_laravel\laravel55\platform\public" <Directory "D:\2_laravel\l...
[bootstrap] 制作用户登陆表单
GYK0812的博客
10-07 925
制作用户登陆表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>1-9 创建垂直表单</title> <link rel="styles..
laravel 框架 - Controller 之 Request
GYK0812的博客
03-28 851
1. 获取某个关键字对应的值： $request->input(key); 2. 获取所有值： $request->all(); 3. 获取method： $request->method(); 4. 获取url ： $request->url(); public function request1(Request $request) { // 1. 取值 echo $request->input('name');
Bootstrap下拉菜单深度解析
一个基本的Bootstrap下拉菜单结构如下： ```html 下拉菜单 <span class="caret"></span> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <!-- 更多菜单项... ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值