Bootstrap入门（八）组件2：下拉菜单

先引入本地的CSS文件和JS文件（注：1.bootstrap是需要jQuery支持的。2.需要在<body>当中添加）

<link href="css/bootstrap.min.css" rel="stylesheet">

<script src="jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>

下拉菜单，首先，在容器div中创建一个class为dropdown的div

        <div class="dropdown">
          ...
        </div>

1.为下拉菜单添加内容

点击的下拉菜单，触发器是一个按钮，而下拉菜单的详细内容有<ul><li> 标签的组合来完成

　　　　<div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
                Dropdown
                <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>

效果

2.有时候我们希望分类放，那就需要一条线来分割，新添加

<li role="presentation" class="divider"></li>

效果：（可能看的不清楚，可以先尝试）

3.下拉菜单的对齐

比如说希望按钮和按钮内容都在右边，可以在<div>和<button>的class添加一个pull-right 属性，在<ul>标签中的class添加一个 dropdown-menu-right属性。（在<button> 中添加pull-right 属性是为了让按钮移动到右边，，在<ul>添加一个 dropdown-menu-right属性是为了把内容移动到右边，而如果没有在<div>添加pull-right 属性会使点击后，会出现内容遮挡住按钮的情况）

修改为：

　　　 　<div class="dropdown pull-right">
            <button class="btn btn-default dropdown-togglet" type="button" id="dropdownMenu1" data-toggle="dropdown">
                右边显示
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-right" 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 role="presentation" class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>

效果为：

4.给下拉菜单内容添加标题

当下拉菜单内容多了之后，希望添加标题对他进行说明或者引导，可以添加标题

新添加

<li role="presentation" class="dropdown-header">标题内容</li>

操作：

　　　　<div class="dropdown">
            <button class="btn btn-default dropdown-togglet" type="button" id="dropdownMenu1" data-toggle="dropdown">
                带标题显示
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <li role="presentation" class="dropdown-header">标题1</li>
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="presentation" class="dropdown-header">标题2</li>
                <li><a href="#">Action2</a></li>
                <li><a href="#">Another action2</a></li>
                <li><a href="#">Something else here2</a></li>
                <li role="presentation" class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>

效果为：

5.部分下拉菜单不可用

只需要在需要禁用的内容添加disabled

<li class="disabled"><a href="#">内容</a></li>

操作：

　　　　<div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
                一些不可用
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <li class="disabled"><a href="#">Action</a></li>
                <li class="disabled"><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="presentation" class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>

效果为，禁用内容显示淡灰色，鼠标移动上去显示一个禁止的符号

时间： 2024-10-13 09:29:13

Bootstrap入门（八）组件2：下拉菜单的相关文章

Bootstrap<基础十四> 按钮下拉菜单

使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class="caret"></span> 来指示按钮作为下拉菜单. 下面的实例演示了一个基本的简单的按钮下拉菜单: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的按钮下拉菜单&

Bootstrap历练实例：带有下拉菜单的标签和胶囊导航

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:带有下拉菜单的标签和胶囊导航</title> <meta charset="utf-8" /> <meta name=&quo

Bootstrap 3 & 4 的多级下拉菜单示例

Bootstrap 虽好,但对于复杂的界面,还是有N多组件需要自己扩展,并且要往简洁.大气的Bootstrap界面上靠,着实要费一些功夫.下面分享一个Bootstrap 3的多级下拉菜单,无需第三方Js脚本,复制后直接可用. Bootstrap 3 的多级下拉菜单示例 <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title&

用bootstrap和css3制作按钮式下拉菜单

利用bootstrap框架的字体图标和下拉菜单效果,以及css3的动画效果,可以做出比较优雅的按钮式下拉菜单样式 <style> .myBtnStyle .dropdown-menu span{ margin:5px; } .myBtnStyle .dropdown-menu { animation: 0.5s linear fadeIn; //css3新特性animation } @keyframes fadeIn { //通过keyframes规则创建动画特效,原理为将一套css样式逐渐转

bootstrap的下拉菜单

本文章将重点介绍 Bootstrap 下拉菜单.下拉菜单是可切换的,用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性. 1.将下拉菜单触发器和下拉菜单都包裹在放在class.dropdown 里,或者另一个声明了 position: relative; 的元素. 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me

创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件

Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来. Bootstrap提供了不少的前端UI组件.带下拉菜单的文本框就是其中之一,效果图如下(真要自己完全设计,还得费一番功夫) 关于该组件的详情参看Bootstrap官网.带下拉菜单的文本框看到上面的效果图,使我想到WinForm编程中的DropDownList控件.不过,和DropDownList控件相比,还缺少以下内容 1.当点击菜单中的

Bootstrap入门（十）组件4：按钮组与下拉菜单结合

先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="jquery-3.1.0.min.js" type="text/javascript"></script> <script

初学者--bootstrap（六）组件中的下拉菜单----在路上（10）

组件---下拉菜单用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性. 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 position: relative; 的元素.然后加入组成菜单的 HTML 代码.代码与效果如下: <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type=

Bootstrap 学习之js插件（下拉菜单（Dropdown）插件）

Bootstrap 下拉菜单(Dropdown)插件 Bootstrap 下拉菜单这一章讲解了下拉菜单,但是没有涉及到交互部分,本章将具体讲解下拉菜单的交互.使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏.标签页.胶囊式导航菜单.按钮等)添加下拉菜单. 用法您可以切换下拉菜单(Dropdown)插件的隐藏内容: 通过 data 属性:向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单,如下所示: <div class="