Bootstrap 带下拉的导航

下拉菜单（dropdown）是一个独立的组件，它可以与页面上任何元素（如，按钮、导航等）捆绑使用。可以为导航捆绑下拉菜单，来制作带下拉的导航。

如果要给导航的某个列表项添加下拉菜单，只需给相应的列表项添加 .dropdown 类，再给它嵌套一个下拉菜单即可。如，带下拉的标签导航：

<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Help</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>

效果如图 4‑21所示：

图4-21 Bootstrap带下拉的标签导航

同理，如果想得到带下拉菜单的胶囊式导航，只要把 .nav-tabs 类，替换成 .nav-pills 即可。如：

<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Help</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>

效果如图 4‑22所示：

图4-22 Bootstrap带下拉的胶囊导航

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

Bootstrap 带下拉的导航相关推荐

Bootstrap带下拉的胶囊导航
带下拉的胶囊导航下拉菜单组件(dropdown)是一个独立的组件,它可以和页面上的任何元素(如,按钮.导航等)进行组合,让相应的元素具有下拉功能. 如果把导航和下拉菜单进行组合,并让导航链接充当下拉 ...
bootstrap悬停下拉导航的实现
为了减轻用户操作行为,提升用户体验,往往会将点击下拉导航改为悬停下拉的效果. 本文就讲述一下,bootstrap悬停下拉导航的实现先不说那么详细,围观先: 1. css代码设置如下: /*悬停下拉导 ...
HTML下拉菜单怎么做成横向,css导航条横向带下拉菜单
css+div导航下拉二级菜单竖排效果如何改为横排? ,在"下一站"有三个二级竖排菜单,如何能变为横排?困扰了我一天了,让二级菜单变成一行,只需要在竖排的效果上,让二级菜单都浮动起 ...
个人HTML期末大作业~ 个人网页(HTML+CSS)6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码
HTML期末大作业~ 个人网页6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码作品介绍下面介绍一下我的个人小网站吧,我的网站背景稍微单调一点白色,主要个人比较喜欢白色了,布局上面使用 ...
个人HTML期末大作业~ 个人网页(HTML+CSS)6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码...
HTML期末大作业~ 个人网页6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码作品介绍下面介绍一下我的个人小网站吧,我的网站背景稍微单调一点白色,主要个人比较喜欢白色了,布局上面使用 ...
html 下拉列表模糊查询,JS实现模糊查询带下拉匹配效果
"搜索"可以使我们更快的找到某一个关键词或者某一个商品,所以"模糊查询"和"下拉匹配"也成了前端必备的一个小技能,开门见山,希望对朋友们有帮 ...
【MFC】带下拉菜单的工具栏
00. 目录文章目录 00. 目录 01. 案例概述 02. 开发环境 03. 关键技术 04. 程序设计 05. 秘笈心法 06. 源码下载 07. 附录 01. 案例概述本实例是对工具栏功能的 ...
实现带下拉菜单的工具栏按钮
在工具栏中使用真彩色图标实现带下拉菜单的工具栏按钮 20050916
Bootstrap mouseover 下拉菜单 Enable Hover for Bootstrap Nav Dropdowns
Bootstrap v3′s navigation has menus toggle enabled by default - you have to click to have them open/ ...

Bootstrap 带下拉的导航

Bootstrap 带下拉的导航相关推荐

最新文章

热门文章