<!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. [Xcode 实际操作]八、网络与多线程-(24)社会化分享功能开发包的安装和配置：微信、QQ、微博

    目录:[Swift]Xcode实际操作 本文将演示如何在开放平台注册应用,并获得相关的密钥信息,用于实现后面文章的微博分享功能. 一.新浪微博开放平台 [登录]->[微服务]->[粉丝服务 ...

  2. 15.split分割注意事项

    1.v = 'k1,v1- k2,v2- k3,v3-'变成一个字典{'k1':'v1','k2':'v2','k3:'v3'...} 变成一个字典 {'k1':'v1','k2':'v2','k3: ...

  3. AVAudioPlayer 如何在页面呈现之后按需初始化

    在页面中按需初始化 AVAudioPlayer 很多时候我们需要根据页面上内容的情况创建 AVAudioPlayer 对象,已达到降低无谓资源占用等目的.下面我们来看一段代码看起来正确的代码: ove ...

  4. 新装centos 6.5 基本配置

    开机自动联网 vi /etc/sysconfig/network-scripts/ifcfg-eth0; 将ONBOOT=no,改为ONBOOT=yes,保存退出 开机直接进入命令行模式 vi /et ...

  5. 学习Mahout(三)

    开发+运行第一个Mahout的程序 代码: /** * Licensed to the Apache Software Foundation (ASF) under one or more * con ...

  6. MyBatis嵌套Collection

    站在巨人的肩膀上 https://blog.csdn.net/liaoxiaohua1981/article/details/6862466 聚集元素用来处理“一对多”的关系.需要指定映射的Java实 ...

  7. SpirngMVC-JSON

    Springmvc默认用MappingJacksonHttpMessageConverter对json数据进行转换,需要加入jackson的包,如下: 配置json转换器 在注解适配器中加入messa ...

  8. RESTful架构搜集

    今天才知道RESTful这个词,感觉好落后呀.自从5月份后很少学习新知识,这是个不好的信号. RESTful是Representational State Transfer的缩写.怎么理解Repres ...

  9. Unity里面两种单例模式的实现

    using System; public class Singleton<T> where T : class, new() { private static T m_instance; ...

  10. js 跨浏览器实现事件

    我们知道不同的浏览器实现事件是不同的,就比如说我们常见的有三种方法: 1,dom0处理事件的方法,以前的js处理事件都是这样写的. (function () { var p=document.getE ...