Bootstrap下拉菜单dropdown-menu
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的更多相关文章
- Bootstrap 下拉菜单(dropdown)插件
使用下拉菜单的插件,您可以向任何组件(比如:导航栏,标签页,胶囊式导航,按钮)添加下拉菜单 用法 您可以切换下拉菜单(dropdown)插件隐藏内容 1.通过data属性,向链接或按钮添加data-t ...
- Bootstrap下拉菜单
前面的话 网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换.有上下文的菜单.而且在各种交互状态下的菜单展示需要和javascript插件配合 ...
- Bootstrap -- 下拉菜单、输入框组、导航菜单
Bootstrap -- 下拉菜单.输入框组.导航菜单 1. 下拉菜单 可以使用带有各种大小按钮的下拉菜单:.btn-lg..btn-sm 或 .btn-xs. 实现下拉菜单: <!DOCTYP ...
- bootstrap下拉菜单(Dropdowns)
本章将重点讲解bootstrap下拉菜单(Dropdowns),下拉菜单是可切换的,是以列表格式显示链接的上下文菜单. <!DOCTYPE html><html><hea ...
- 8.bootstrap下拉菜单、按钮组、按钮式下拉菜单
下拉菜单 dropdown 对齐方式: .dropdown-menu-right .dropdown-menu-left <div class="container" ...
- Bootstrap下拉菜单的使用(附源码文件)--Bootstrap
1.Bootstrap下拉菜单的使用,源代码如下:(如有不当之处,还望大佬们指出哈……) <!DOCTYPE html> <html lang="en"> ...
- 第二百四十四节，Bootstrap下拉菜单和滚动监听插件
Bootstrap下拉菜单和滚动监听插件 学习要点: 1.下拉菜单 2.滚动监听 本节课我们主要学习一下 Bootstrap 中的下拉菜单插件,这个插件在以组件的形式我们 已经学习过,那么现在来看看怎 ...
- bootstrap 下拉菜单不显示的解决办法
bootstrap 下拉菜单不显示,最后改成如下正常显示: <div class="btn-group open"> <ul class="dropdo ...
- Unity3D 重写下拉菜单/Dropdown组件、开启每个按钮可用
Override Dropdown Component 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) ...
- 第八篇.Bootstrap下拉菜单
给div一个class “dropdown”,将下拉菜单放在这个div里就可以显示bootstrap的下拉菜单. <div class="dropdown"> < ...
随机推荐
- Asp.Net Web API开发微信后台
如果说用Asp.Net开发微信后台是非主流,那么Asp.Net Web API的微信后台绝对是不走寻常路. 需要说明的是,本人认为Asp.Net Web API在开发很多不同的请求方法的Restful ...
- [shell练习]——awk练习题
1. sed和awk有什么区别? (1)awk:按列(域)操作:sed:按行操作(2)awk:文本处理语言,适合对文本进行抽取处理:sed:非交互式的编辑器,适合对文本进行编辑 2. awk要处理域的 ...
- ThinkPHP运算符与PHP运算符对照表
ThinkPHP运算符与PHP运算符对照表 ThinkPHP标签 说明及对应PHP标签 备注 eq 等于(=)(==:用于模板判断时) 可用于查询条件与模板判断 neq 不等于(!=) 可用于查询条件 ...
- Iphone5s 通话质量差 问题解决
从某段时间开始,我的手机出现通话质差的情况.而且与信号电平有密切关系,只要覆盖稍差的地方,通话就劣化. 具体症状是我时常听不清对方说话,但对方能够清晰听到我说话. 因为本人也是从事无线网络优化软件产品 ...
- ibatis查找date类型
ibatis从oracle查询的时候,返回的类型是java.sql.Date,这个类型是不带时分秒的,我们只有在写sql的时候用to_char来转换.
- Java 7 中 NIO.2 的使用——第二节 元数据文件的属性
如果你有很多疑问关于一个文件或目录,它是否是隐藏的,它的大小是多少,谁拥有它,你可以从元数据中得到这些信息.所谓的元数据,就是描述数据的数据. NIO.2组织了这些原数据的属性的概念,并提供了java ...
- ExtJS登陆页面涉及到的几个问题
1.如何在文本框中增加提示信息 输入框中无法直接使用tooltip,需要使用单独的代码 var tip = Ext.create('Ext.tip.ToolTip', { target : ...
- C实现面向对象封装、继承、多态
参考资料: http://blog.chinaunix.net/uid-26750235-id-3102371.html http://www.eventhelix.com/rea ...
- 【转载】在程序中动态改变static text控件的caption值
方法1,给STATIC控件取个名字叫IDC_STATICTITLE 然后在ClassWizard中设定一个控件变量给它叫m_statictitle 然后用m_statictitle.SetWindow ...
- smaa github iryoku
dx10 demo 这东西我没法跑nsight ...这就坑大了 里面有个 RenderTargetCollection这个东西里面有很多 rendertargets 最让我苦恼的就是 sceneRT ...