bootstrap下拉菜单(Dropdowns)

时间：2022-10-17 20:56:33

本章将重点讲解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下拉菜单的使用&lpar;附源码文件&rpar;--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. 第八篇&period;Bootstrap下拉菜单

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

  9. &lbrack;moka同学笔记&rsqb;yii2&period;0的下拉菜单与bootstrap下拉菜单

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

随机推荐

  1. Linux主机上使用交叉编译移植u-boot到树莓派

    0环境 Linux主机OS:Ubuntu14.04 64位,运行在wmware workstation 10虚拟机 树莓派版本:raspberry pi 2 B型. 树莓派OS: Debian Jes ...

  2. ArcGIS Engine开发之TocControl

    TocControl控件简介 TocControl控件的主要作用是显示当前加载的图层有哪些.采用什么样的符号等,目的是使用户对当前加载的数据有一个总体的把握.与之相关联的伙伴控件有:MapContro ...

  3. 【Cocos2d-x游戏开发】浅谈游戏中的坐标系

    无论是开发2D还是开发3D游戏,首先必须弄清楚坐标系的概念.在Cocos2d-x中,需要了解的有OpenGL坐标系.世界坐标系和节点坐标系.  1.UI坐标系 IOS/Android/Windows ...

  4. PHP排序函数

    /** * 对查询结果集进行排序 * http://www.onethink.cn * /Application/Common/Common/function.php * * @access publ ...

  5. PHP中include&lpar;&rpar;与require&lpar;&rpar;的区别

    require 的使用方法如 require("MyRequireFile.php"); .这个函数通常放在 PHP 程序的最前面,PHP 程序在执行前,就会先读入 require ...

  6. android 学习笔记&lpar;1&rpar;

    内容来源:高成珍.钟元生<Android编程经典案例>学习笔记 表格布局——TableLayout 表格布局以行和列的方式来管理界面的布局,但并不能明确声明包含几行几列.可通过TableR ...

  7. qt中创建进程

    进程:1.QProcess 进程类 QProcess *a=new QProcess(); 2.启动void QProcess::start(const QString & command, ...

  8. Ubuntu18&period;04上安装Docker CE

    建立 REPOSITORY 1.更新索引包 更新 /etc/apt/sources.list 和 /etc/apt/sources.list.d 中列出的源的地址,这样才能获取到最新的软件包 sudo ...

  9. dwr学习（一）：简单dwr实例

    博客分类:  dwr   最近写ajax写烦了,想着能不能有个更简单的“ajax”,一问就问到这个dwr了.赶紧去官网学习了下,这里写个博客记录一下实例. 测试环境:tomcat6.0 1.新建一个w ...

  10. L305 发邮件15分钟

    发个邮件-不用那么纠结-把事情讲清楚就好-限制在15分钟写完-长的邮件25分钟-难点是讲清楚细节-比如软件调试bug-DFM-这里有些专业词汇 发现问题:发给客户的There are some qua ...

相关文章