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>

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

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

Bootstrap<基础十四> 按钮下拉菜单
使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...
Bootstrap历练实例：带有下拉菜单的标签和胶囊导航
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
用bootstrap和css3制作按钮式下拉菜单
利用bootstrap框架的字体图标和下拉菜单效果,以及css3的动画效果,可以做出比较优雅的按钮式下拉菜单样式 <style> .myBtnStyle .dropdown-menu sp ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：内嵌下拉菜单的按钮组
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
Bootstrap之样式风格与下拉菜单
背景颜色 bg-primary 字体颜色 text-primary 文字居中 text-center 按钮 btn btn-primary btn-default默认 btn-link链接按钮大小 ...
⑨bootstrap组件按钮式下拉菜单输入框使用基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...
Bootstrap <基础十二>下拉菜单（Dropdowns）
Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与下拉菜单(Dropdown) JavaScript 插件的互动来实现. 如需使用下列菜单,只需要在 ...
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来. Bootstrap提供了不少的前端UI组件.带下拉 ...
Bootstrap-CL：按钮下拉菜单
ylbtech-Bootstrap-CL:按钮下拉菜单 1.返回顶部 1. Bootstrap 按钮下拉菜单本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉 ...

随机推荐

Android音频系统之AudioFlinger(二)
1.1.1 音频设备的管理虽然AudioFlinger实体已经成功创建并初始化,但到目前为止它还是一块静态的内存空间,没有涉及到具体的工作. 从职能分布上来讲,AudioPolicyService是 ...
Android源码之Gallery专题研究（1）
前言时光飞逝,从事Android系统开发已经两年了,总想写点什么来安慰自己.思考了很久总是无法下笔,觉得没什么好写的.现在终于决定写一些符合大多数人需求的东西,想必使用过Android手机的人们一定 ...
pcap filter
今天用tshark抓包,本以为wireshark能用的filter,如“mysql”它也应该能用,其实不然:tshark -f只认识pcap filter,用-R的话,说要用-2,加上-2的话又说什么 ...
iOS之Alcatraz常见插件
转发:http://blog.csdn.net/pingchangtan367/article/details/26689497 对于Xcode是我们的开发环境,ok,怎样提高我们的效率呢,当然是使我 ...
javascript 中的闭包
在 javascript 中,函数可以当做参数传递,也可以当做返回值返回. 当一个函数内部返回值为一个函数时, 就形成了闭包.(闭包里面的 this 问题) 如下面代码 Function.protot ...
2016"百度之星" - 资格赛（Astar Round1） Problem E
简单模拟题,耐心写就能过. #include <stdio.h> #include <math.h> #include<cstring> #include<c ...
Java中Date对象与String互转
package com.java.test; import java.text.ParseException; import java.text.SimpleDateFormat; import ja ...
转 Could not create the view: An unexpected exception was thrown.问题解决
转自:http://blog.csdn.net/shuangzixing520/article/details/35225105 今天打开Myeclipse10的时候,发现server窗口出现一堆问题 ...
C程序编译执行过程
C程序编译执行过程认识C编译执行过程,是C学习的开端. 简单说C语言从编码编译到执行要经历一下过程: C源代码编译---->形成目标代码,目标代码是在目标机器上运行的代码. 连接-- ...
[Unity Socket]在Unity中如何实现异步Socket通信技术
在刚刚开发Unity项目的过程中,需要用到即时通信功能来完成服务器与客户端自定义的数据结构封装. 现在将部分主要功能的实现代码抽取出来实现了可以异步Socket请求的技术Demo. 客户端脚本Clie ...

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

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

随机推荐

热门专题