bootstrap下拉菜单(Dropdowns)
本章将重点讲解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)的更多相关文章
- bootstrap 下拉菜单不显示的解决办法
bootstrap 下拉菜单不显示,最后改成如下正常显示: <div class="btn-group open"> <ul class="dropdo ...
- Bootstrap下拉菜单
前面的话 网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换.有上下文的菜单.而且在各种交互状态下的菜单展示需要和javascript插件配合 ...
- Bootstrap下拉菜单的使用(附源码文件)--Bootstrap
1.Bootstrap下拉菜单的使用,源代码如下:(如有不当之处,还望大佬们指出哈……) <!DOCTYPE html> <html lang="en"> ...
- Bootstrap -- 下拉菜单、输入框组、导航菜单
Bootstrap -- 下拉菜单.输入框组.导航菜单 1. 下拉菜单 可以使用带有各种大小按钮的下拉菜单:.btn-lg..btn-sm 或 .btn-xs. 实现下拉菜单: <!DOCTYP ...
- 第二百四十四节，Bootstrap下拉菜单和滚动监听插件
Bootstrap下拉菜单和滚动监听插件 学习要点: 1.下拉菜单 2.滚动监听 本节课我们主要学习一下 Bootstrap 中的下拉菜单插件,这个插件在以组件的形式我们 已经学习过,那么现在来看看怎 ...
- 详解Bootstrap下拉菜单组件
bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,他对应的文件: less 对应的源码文件为:dropdowns.less sass对应的源码文件为:_dropdowns.scs ...
- bootstrap——下拉菜单右对齐
通过向 .dropdown-menu 添加 .pull-right 类来向右对齐下拉菜单. Bootstrap默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度. 为 .dropd ...
- 第八篇.Bootstrap下拉菜单
给div一个class “dropdown”,将下拉菜单放在这个div里就可以显示bootstrap的下拉菜单. <div class="dropdown"> < ...
- [moka同学笔记]yii2.0的下拉菜单与bootstrap下拉菜单
1.yii2下拉菜单 <li class="dropdown"><a href="#" class="dropdown-toggle ...
随机推荐
- 渲染路径-u3d渲染路径比较
Unity支持不同的渲染路径.应具体取决于你的游戏内容和目标平台/硬件来选择使用哪一个.不同的渲染路径有不同的特点和性能特点,主要影响灯光和阴影. 项目所使用的渲染路径在Player S ...
- perl 安装LOG4perl 模块
环境信息 ubuntu 12.04 64位 桌面版 Log-Log4perl 的介绍网址:http://search.cpan.org/~mschilli/Log-Log4perl-1.49/lib/ ...
- Spring事件机制详解
一.前言 说来惭愧,对应Spring事件机制之前只知道实现 ApplicationListener 接口,就可以基于Spring自带的事件做一些事情(如ContextRefreshedEvent),但 ...
- shell学习（7）- linux权限管理及修改权限命令chmod
文件系统权限基本介绍 1.文件基本权限 总共10个字符,可以分为四组, 第一组,就一个字符-,代表是文件类型,是一个常规文件,还有其他的类型如下所示 d--目录 l--符号链接,软连接 c--字符专门 ...
- 测试 | 代码覆盖测试工具 | Eclemma
安装: 打开eclipse,点击Help菜单下的Install New Software 在弹出的对话框中,点击Add 输入Name,如EclEmma 输入Location: http://updat ...
- HDU6440（费马小定理）
其实我读题都懵逼--他给出一个素数p,让你设计一种加和乘的运算使得\[(m+n)^p = m^p+n^p\] 答案是设计成%p意义下的加法和乘法,这样:\[(m+n)^p\ \%\ p = m+n\] ...
- JAVA常用知识总结（九）——线程
sleep和wait的区别? sleep()来自Thread类,和wait()来自Object类.调用sleep()方法的过程中,线程不会释放对象锁.而 调用 wait 方法线程会释放对象锁 slee ...
- 牛客网Java刷题知识点之调用线程类的start（）方法和run（）方法的区别
不多说,直接上干货! 前期博客 牛客网Java刷题知识点之四种不同的方式创建线程 这里很简单 首先,系统通过调用线程类的start()方法来启动一个线程,此时这个线程处于就绪状态,而非运行状态,也就意 ...
- jupyter notebook dead kernel问题解决
背景: 我在刚安装好的tensorflow环境下启动jupyter notebook,无论是浏览器还是控制台,提示都是关于dead kernel.然后就查嘛,更新大发好. 但是我在控制台里按照其他人说 ...
- Python临时笔记
动态语言python的特性 python2 输入一个匿名函数直接执行 # coding=utf-8 def Test(a, b, func): result = func(a, b) return ...