<!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">
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Html5</a></li>
<li><a href="#">Css3</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQueryUI</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">C#.Net</a></li>
<li><a href="#">MsSql</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">html5前端
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Html5</a></li>
<li><a href="#">Css3</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQueryUI</a></li>
<li><a href="#">Bootstrap</a></li>
<li class="divider"></li>
<li><a href="#">C#.Net</a></li>
<li><a href="#">MsSql</a></li>
</ul>
</li>
<li><a href="#">后续</a></li>
</ul>
<br /><br /><br />
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Html5</a></li>
<li><a href="#">Css3</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQueryUI</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">C#.Net</a></li>
<li><a href="#">MsSql</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
html5前端
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Html5</a></li>
<li><a href="#">Css3</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQueryUI</a></li>
<li><a href="#">Bootstrap</a></li>
<li class="divider"></li>
<li><a href="#">C#.Net</a></li>
<li><a href="#">MsSql</a></li>
</ul>
</li>
<li><a href="#">后续</a></li>
</ul> </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历练实例：带有下拉菜单的标签和胶囊导航的更多相关文章

  1. Bootstrap历练实例：下拉菜单插件方法的使用

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  2. Bootstrap <基础十二>下拉菜单（Dropdowns）

    Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 ...

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

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

  4. BootStrap学习(2)_下拉菜单&按钮组

    一.下拉菜单 1.基本下拉菜单 如需使用下列菜单,只需要在class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <ht ...

  5. 随手记一次用C#正则表达式获取下拉菜单html标签<select>以及相关属性值

    随手记一次用C#正则表达式获取下拉菜单html标签<select>以及相关属性值 1:有如下html: .................. <select id="aaa ...

  6. Bootstrap 字体图标、下拉菜单、按钮组

    Bootstrap 字体图标(Glyphicons) 需要引入fonts文件夹中的文件,而且该文件夹必须命名为fonts,然后引进css文件,jQuery文件,以及bootstrap的js文件. 用法 ...

  7. 简单叨叨bootstrap按钮无限层级下拉菜单的实现

    0.写在前面的话 最近看书都懈怠了,又正值新项目,虽说并不是忙得不可开交,好吧我老实交待,我就是偷懒了其实,博客也没更.言归正传,对于前端的不熟悉现在确实是个让我头疼的事情,以至于一些功能要在网络上漫 ...

  8. Bootstrap单按钮的下拉菜单

    简介 把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了. 插件依赖 按钮式下拉菜单依赖下拉菜单插件 ,因此需要将此插件包含在你所使用的 Bootst ...

  9. bootstrap和JS实现下拉菜单

    // bootstrap下拉菜单 <div class="btn-group"> <button id="button_text" type= ...

随机推荐

  1. thinkphp5.0 页面缓存

    在application\config.php里加 //以下为静态缓存配置 'app_debug' => false,//false为开启静态缓存模式 'html_cache_on' => ...

  2. 选择Go语言的12个理由

    编者按:多核化和集群化是互联网时代的典型特征,那语言需要哪些特性来应对这些特征呢?多数语言在语法层面并不直接支持协程,而通过库的方式支持的协程的功能也并不完整,比如仅仅提供协程的创建.销毁与切换等能力 ...

  3. [Xcode 实际操作]八、网络与多线程-(23)多线程的同步与异步的区别

    目录:[Swift]Xcode实际操作 本文将演示线程的同步与异步的区别. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] 异步线程的运行,是没有按照顺序执行的. ...

  4. IT兄弟连 JavaWeb教程 JSP语法

    在JSP页面中,脚本标识使用的最为频繁,因为他们能够方便.灵活地生成页面中的动态内容,特别是JSP程序代码块.JSP中的脚本标识包括3部分,即JSP声明区.JSP表达式和JSP程序代码块.通过这些标识 ...

  5. 2.Python基础认识(格式化输出,while语句,运算符,编码,单位转化)

    Python基础认识 1.字符串的格式化初识及占位符的简单应用 字符串的格式化 按照既定的要求进行有规定排版的一种输出方式. #我们想要输出的格式如下: ----------------------- ...

  6. 利用Web服务生成产品编号 执行添加操作

    为什么我想要执行添加操作,却添加不成功,系统提示我comm.ExecuteNonQuery有错误 已找到原因 在 string strsql = "insert into tb_goods( ...

  7. [洛谷3935]Calculating

    题目链接:https://www.luogu.org/problemnew/show/P3935 首先显然有\(\sum\limits_{i=l}^rf(i)=\sum\limits_{i=1}^rf ...

  8. Codeforces 1136E（转化+线段树维护）

    题目传送 虽然线段树比较显然但是发现a数组并不好维护.考虑将a转化为好维护的数组b. 方法 这里我将k[1]设为0,对应着\[a[1] + k[1] <= a[2]\]不难得出\[a[i] + ...

  9. bzoj 5449 序列

    https://www.lydsy.com/JudgeOnline/problem.php?id=5449 话说很早以前做过..算是IDA*的板子吧,一个简单的估价函数就可以过去了 %:pragma ...

  10. Hive_Hive的数据模型_数据存储

    Hive的数据模型_数据存储 web管理工具察看HDFS文件系统:http://<IP>:50070/ 基于HDFS没有专门的数据存储格式,默认使用制表符存储结构主要包括:数据库,文件,表 ...