本章将重点讲解bootstrap下拉菜单(Dropdowns),下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：下拉菜单</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="dropdown">
<button type="button" id="dropdownMenu1" class="btn dropdown-toggle" data-toggle="dropdown">
选择课程
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">下拉菜单标题</li>
<li role="presentation">
<a role="menuitem" href="#">Html5</a>
</li>
<li role="presentation">
<a role="menuitem" href="#">Css3</a>
</li>
<li role="presentation">
<a role="menuitem" href="#">JavaScript</a>
</li>
<li role="presentation">
<a role="menuitem" href="#">jQuery</a>
</li>
<li role="presentation">
<a role="menuitem" href="#">jQuery easyUI</a>
</li>
<li role="presentation">
<a role="menuitem" href="#">Bootstrap</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">下拉菜单标题</li>
<li role="presentation">
<a role="menuitem" href="#">C#.Net</a>
</li>
<li role="presentation">
<a role="menuitem" href="#">MsSql</a>
</li>
</ul>
</div>
</div>

<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

bootstrap下拉菜单(Dropdowns)的更多相关文章

  1. bootstrap 下拉菜单不显示的解决办法

    bootstrap 下拉菜单不显示,最后改成如下正常显示: <div class="btn-group open"> <ul class="dropdo ...

  2. Bootstrap下拉菜单

    前面的话 网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换.有上下文的菜单.而且在各种交互状态下的菜单展示需要和javascript插件配合 ...

  3. Bootstrap下拉菜单的使用(附源码文件)--Bootstrap

    1.Bootstrap下拉菜单的使用,源代码如下:(如有不当之处,还望大佬们指出哈……) <!DOCTYPE html> <html lang="en"> ...

  4. Bootstrap -- 下拉菜单、输入框组、导航菜单

    Bootstrap -- 下拉菜单.输入框组.导航菜单 1. 下拉菜单 可以使用带有各种大小按钮的下拉菜单:.btn-lg..btn-sm 或 .btn-xs. 实现下拉菜单: <!DOCTYP ...

  5. 第二百四十四节，Bootstrap下拉菜单和滚动监听插件

    Bootstrap下拉菜单和滚动监听插件 学习要点: 1.下拉菜单 2.滚动监听 本节课我们主要学习一下 Bootstrap 中的下拉菜单插件,这个插件在以组件的形式我们 已经学习过,那么现在来看看怎 ...

  6. 详解Bootstrap下拉菜单组件

    bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,他对应的文件: less 对应的源码文件为:dropdowns.less sass对应的源码文件为:_dropdowns.scs ...

  7. bootstrap——下拉菜单右对齐

    通过向 .dropdown-menu 添加 .pull-right 类来向右对齐下拉菜单. Bootstrap默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度. 为 .dropd ...

  8. 第八篇.Bootstrap下拉菜单

    给div一个class “dropdown”,将下拉菜单放在这个div里就可以显示bootstrap的下拉菜单. <div class="dropdown"> < ...

  9. [moka同学笔记]yii2.0的下拉菜单与bootstrap下拉菜单

    1.yii2下拉菜单 <li class="dropdown"><a href="#" class="dropdown-toggle ...

随机推荐

  1. 多线程Demo1 了解

      首先演示一下主线程的阻塞   //  DYFViewController.m //  623-01-阻塞多线程 // //  Created by dyf on 14-6-23. //  Copy ...

  2. Codeforces Round #532(Div. 2) B.Build a Contest

    链接:https://codeforces.com/contest/1100/problem/B 题意: 给n,m. 给m个数,每个数代表一个等级,没给一个将其添加到题目池中,当题目池中有难度(1-n ...

  3. Codeforces 1142E（图、交互）

    题目传送 官方题解说的很好了,剩下的就是读大佬代码了,前面是tarjan求SCC缩点图.我图论没学过,接下来删点是怎么操作看得有点头秃,直到我看到了%%%安德鲁何神仙的代码. 按照题面连通紫线以后,我 ...

  4. .classpath文件的内容（MyEclipse通过添加External Jar生成）

    <?xml version="1.0" encoding="UTF-8"?> <classpath> <classpathentr ...

  5. python入门之迭代器

    迭代器 已知,可以直接作用于for循环的数据类型有: 一类是集合数据类型,如list.tuple.dict.set.str 一类是generator,包括生成器和带yield的generator fu ...

  6. csu 1552: Friends 二分图 + Miller_Rabin

    http://acm.csu.edu.cn/csuoj/problemset/problem?pid=1552 把那n个数写两次,分成相同的两堆,判断相加是质数的,连一条边,然后找最大匹配,ans = ...

  7. HDU 5869 Different GCD Subarray Query 树状数组 + 一些数学背景

    http://acm.hdu.edu.cn/showproblem.php?pid=5869 题意:给定一个数组,然后给出若干个询问,询问[L, R]中,有多少个子数组的gcd是不同的. 就是[L, ...

  8. Java微信公众平台开发(七)--多媒体消息回复之图片回复

    之前我们在做消息回复的时候我们对回复的消息简单做了分类,前面也有讲述如何回复[普通消息类型消息],这里将讲述多媒体消息的回复方法,[多媒体消息]包含回复图片消息/回复语音消息/回复视频消息/回复音乐消 ...

  9. 解析Javascript事件冒泡机制(转)

    本文转自:http://blog.csdn.net/luanlouis/article/details/23927347 1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然 ...

  10. Apache is running a threaded MPM, but your PHP module is not compiled to be threadsafe. you need to recompile php. pre-configuration failed

    手动配置想要组合版本的wamp环境时,在服务器上直接下载的几个安装包怎么都组合安装不成功,纠结很久,终于找到原因.配置apache支持php后apache一直无法成功启动.后来发现php是nts的版本 ...