本章将重点讲解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. hdoj1253

    一题简直模板的 BFS,只是三维遍历而已. #include <stdio.h> #include <iostream> #include <sstream> #i ...

  2. 微信小程序取消button边框线

    先给button定义个class属性 <button class="an"> 按钮 </button> 然后再css上加上 .an::after { bor ...

  3. opencv 缩放旋转

    如果100*50的图要转成50*100 角度90或-90 旋转中心应该为 Point2f(image.rows / 2, image.rows / 2); // 图像旋转与缩放 // Author: ...

  4. [Xcode 实际操作]八、网络与多线程-(25)实现ShareSdk的社会化分享功能

    目录:[Swift]Xcode实际操作 完成开发包的安装和配置之后,本文将演示社会化分享功能的具体开发步骤. 在项目导航区,打开并编辑程序代理文件[AppDelegate.swift] import ...

  5. icekingdom(2018.10.17)

    一句话题意:给你一颗n个点的树,节点初始状态下都是白色,有q次修改,每次修改会把[li,ri]区间内的点染成黑色,并且问黑色点能形成几个联通块,然后会将所有点染回白色.(也就是说每次都只有[li,ri ...

  6. 并发编程协程(Coroutine)之Gevent

    并发编程协程之Gevent Gevent官网文档地址:http://www.gevent.org/contents.html 基本概念 我们通常所说的协程Coroutine其实是corporate r ...

  7. Tinghua Data Mining 4

    贝叶斯 决策树 知道三文鱼和金枪鱼颜色 让你去猜 B命中的概率不能直接减去四分之三 因为有可能同时命中 A B 命中不是互斥事件 即便体检报告是阳性,真正得癌症的概率也很小,只有0.21 绝大多数的阳 ...

  8. 模拟ssh、黏包、hashlib模块(MD5)

    待补充..... 一.模拟ssh 二.黏包 1.黏包现象 让我们基于tcp先制作一个远程执行命令的程序(命令ls -l ; lllllll ; pwd) res=subprocess.Popen(cm ...

  9. Spark Mllib里如何删除每一条数据中所有的双引号“”（图文详解）

    不多说,直接上干货! 具体,见 Hadoop+Spark大数据巨量分析与机器学习整合开发实战的第13章 使用决策树二元分类算法来预测分类StumbleUpon数据集

  10. node+express第一次实战踩坑记录

    读万卷书不如行万里路,必须实践出真理! 问题1:项目结构该搭建成什么样? 我一个node.js小白,完全没有想法!再见! 找找别人的项目看看别人放的什么项目结构,再结合自己的项目需求我来想想!