1.步骤

(1)要做为下拉菜单的li增加class="dropdown"

(2)为li中文字添加超链接<a data-toggle="dropdown" class="dropdown-toggle" href="#">书籍<b class="caret"></b></a>

(3)li>ul添加<ul class="dropdown-menu">

(4)li>ul>li添加：<li><a data-toggle="tab" href="#java">Java核心技术</a></li>或<li><a data-toggle="tab" data-target="#java">Java核心技术</a></li>

(5)各子菜单对就的div添加：<div id="java" class="tab-pane fade"><p>Java核心技术：50元</p></div>

2.代码

<!DOCTYPE html>

<html>

   <head>

		<title>dropdown</title>

		<meta charset="UTF-8">

		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<!-- 新 Bootstrap 核心 CSS 文件 -->

		<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

		<!-- 可选的Bootstrap主题文件（一般不使用） -->

		<!--		<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script>-->

		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

		<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

		<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

		<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->

		<!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->

		<!--[if lt IE 9]>

		   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

		   <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

		<![endif]-->

   </head>

   <body>

		<ul class="nav nav-tabs" id="my_tab">

			<li class="active"><a data-toggle="tab" href="#home">首页</a></li>

			<li class=""><a data-toggle="tab" href="#movie">电影</a></li>

			<li class="dropdown">

				<a data-toggle="dropdown" class="dropdown-toggle" href="#">书籍<b class="caret"></b></a>

				<ul class="dropdown-menu">

					<li><a data-toggle="tab" href="#java">Java核心技术</a></li>

					<li><a data-toggle="tab" href="#bootstrap">Bootstrap用户手册</a></li>

					<li><a data-toggle="tab" data-target="#jquery">锋利的jQuery</a></li>

				</ul>

			</li>

		</ul>

		<div class="tab-content" id="my_tab_content">

			<div id="home" class="tab-pane fade active in"><p>这是首页这是首页这是首页这是首页这是首页这是首页这是首页</p></div>

			<div id="movie" class="tab-pane fade"><p>这是电影：《速度与激情7》《煎饼侠》</p></div>

			<div id="java" class="tab-pane fade"><p>Java核心技术：50元</p></div>

			<div id="bootstrap" class="tab-pane fade"><p>Bootstrap用户手册：39元</p></div>

			<div id="jquery" class="tab-pane fade"><p>锋利的jQuery：45元</p></div>

		</div>

   </body>

</html>

　　

3.运行结果

Bootstrap下拉菜单dropdown-menu的更多相关文章

  1. Bootstrap 下拉菜单(dropdown)插件

    使用下拉菜单的插件,您可以向任何组件(比如:导航栏,标签页,胶囊式导航,按钮)添加下拉菜单 用法 您可以切换下拉菜单(dropdown)插件隐藏内容 1.通过data属性,向链接或按钮添加data-t ...

  2. Bootstrap下拉菜单

    前面的话 网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换.有上下文的菜单.而且在各种交互状态下的菜单展示需要和javascript插件配合 ...

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

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

  4. bootstrap下拉菜单(Dropdowns)

    本章将重点讲解bootstrap下拉菜单(Dropdowns),下拉菜单是可切换的,是以列表格式显示链接的上下文菜单. <!DOCTYPE html><html><hea ...

  5. 8.bootstrap下拉菜单、按钮组、按钮式下拉菜单

    下拉菜单 dropdown 对齐方式: .dropdown-menu-right     .dropdown-menu-left <div class="container" ...

  6. Bootstrap下拉菜单的使用(附源码文件)--Bootstrap

    1.Bootstrap下拉菜单的使用,源代码如下:(如有不当之处,还望大佬们指出哈……) <!DOCTYPE html> <html lang="en"> ...

  7. 第二百四十四节，Bootstrap下拉菜单和滚动监听插件

    Bootstrap下拉菜单和滚动监听插件 学习要点: 1.下拉菜单 2.滚动监听 本节课我们主要学习一下 Bootstrap 中的下拉菜单插件,这个插件在以组件的形式我们 已经学习过,那么现在来看看怎 ...

  8. bootstrap 下拉菜单不显示的解决办法

    bootstrap 下拉菜单不显示,最后改成如下正常显示: <div class="btn-group open"> <ul class="dropdo ...

  9. Unity3D 重写下拉菜单/Dropdown组件、开启每个按钮可用

    Override Dropdown Component 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) ...

  10. 第八篇.Bootstrap下拉菜单

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

随机推荐

  1. mini2440 linuxi2c驱动

    #include <linux/kernel.h> #include <linux/init.h> #include <linux/module.h> #inclu ...

  2. datawindow直接导入导出xml

    long dwcontrol.ImportFile ( XML!, filename ) dw_.Modify("DataWindow.Export.XML.UseTemplate = 't ...

  3. 桥接模式和NAT模式

    linux的目录结构 配置ip三种 模式 桥接模式 nat模式(VMnet8) 配置网关 DHCP动态分配IP设置 linux的目录结构 配置ip三种 模式 桥接模式 (1) 设置主系统的" ...

  4. Linux下安装Firefox以及更新Adobe flash

    一直无法舍弃Firefox浏览器,老是提示更新,但包管理器中的版本又不是最新版,只能自己手动安装了(一下是在Ubuntu14.04环境中进行的). 1.去官网下载最新版本 2.进入下载目录,解压文件 ...

  5. [转载]Nginx如何处理一个请求

    http://nginx.org/cn/docs/http/request_processing.html 对我的扫盲文章 基于名字的虚拟主机 Nginx首先选定由哪一个虚拟主机来处理请求.让我们从一 ...

  6. Could not load file or assembly 'Microsoft.Office.Interop.Word, Version=14.0

    参考地址一:点击这里 参考地址二:点击这里 解决方法: 使用office COM元件,电脑里必须要有相对应的版本,比如 Excel 14.0是对应Excel 2010 Excel 12.0是对应Exc ...

  7. udp 视频包网络传输花屏

    视频数据传输在传输层可以选择TCP或者UDP,TCP面向连接,传输中断,发送端是知道的.TCP传输的好处是不丢包,坏处是网络不太好的情况下会越堵越严重.UDP非面向连接,发送端只管发送数据,接收端有没 ...

  8. poj 1113 Wall

    题目链接:http://poj.org/problem?id=1113 题目大意:给出点集和一个长度L,要求用最短长度的围墙把所有点集围住,并且围墙每一处距离所有点的距离最少为L,求围墙的长度. 解法 ...

  9. Noip2015总结

    Noip2015战役总结 [游记部分] Day0 考前说是可以放松一下,下午呢就在机房打了几盘杀,一起玩了玩狼人.不过晚上觉得还是要有点氛围了,于是稍稍打了几个模板,觉得正确率还不错,给自己一点自信的 ...

  10. 【POJ】【1821】Fence

    DP/单调队列优化 题意:k个人粉刷总长为n的墙壁(或者说栅栏?),每个人有一个必刷点s[i](这个人也可以一点也不刷,如果刷就必须刷这个点),最大粉刷长度l[i](必须是连续粉刷一段),和粉刷一格的 ...