Bootstrap 导航

Bootstrap中的导航都是基于列表实现的，可以使用无序列表（<ul>）和有序列表（<ol>）来定义导航结构，暂不支持描述列表（<dl>）。

所有导航组件都具有相同的结构，并公用一个 .nav 的类，只需再为它们添加额外的类，就能实现不同风格的导航，包括标签导航、胶囊式导航、导航列表等。可以某为 <li> 元素添加 .active 类，让它高亮显示。

1、标签导航

只要给一个列表添加额外的 .nav-tabs 类，就可以创建一个标签导航（又称Tab导航、选项卡导航）。如：

<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>

效果如图 4‑16所示：

图4-16 Bootstrap标签导航

2、胶囊导航

只需把 .nav-tabs 类换成 .nav-pills 类，就可以创建一个胶囊式导航。如：

<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>

效果如图 4‑17所示：

图4-17 Bootstrap胶囊导航

3、导航列表

同理，把 .nav-pills 类换成 .nav-list 类，就可以创建一个导航列表。导航列表经常被用在侧栏位置，就像OS X中的Finder。

在导航列表中，使用带 .nav-header 类的 <li> 元素来创建表头，使用带 .divider 类的空 <li> 元素创建水平分隔线。如：

<ul class="nav nav-list">
<li class="nav-header">List header</li>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li><a href="#">Applications</a></li>
<li class="nav-header">Another list header</li>
<li><a href="#">Profile</a></li>
<li><a href="#">Settings</a></li>
<li class="divider"></li>
<li><a href="#">Help</a></li>
</ul>

效果如图 4‑18所示：

图4-18 Bootstrap导航列表

关于作者

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

Bootstrap 导航相关推荐

bootstrap导航
HTML <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UT ...
BootStrap导航栏的使用
默认的导航栏创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="naviga ...
Bootstrap 导航条的组件
Bootstrap的导航条组件有站点名称.导航链接.表单.搜索表单.下拉菜单等,可以根据需要选择使用. 所有导航组件默认按照在HTML中定义的顺序,从左到右依次排列.如果需要,可以使用 .pull-l ...
Html 5/CSS 的学习（二） —— Bootstrap 导航栏
参考 Bootstrap 导航栏 0. 导航栏类别 (1)默认导航栏:class="navbar navbar-default": (2)响应式导航栏:要折叠的内容必须包裹在cla ...
Bootstrap导航栏实例讲解
导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...
Bootstrap 导航元素（ tab导航）标签页
1.基本的导航元素:标签导航.基于ul.li而来,给ul添加 class="nav nav-tabs" 即可.选中的li添加 class="active"即可. ...
bootstrap导航窗格响应式二级菜单
这次碰到的需求是响应式二级导航窗格,默认的导航窗格只有点击下拉框的二级窗格,会有如下问题:一级菜单无法添加超链接,二级菜单展示要多点一下. 实现目标: 1.滑动到指定区域,展示二级菜单. 2.一级菜单 ...
笔记:Bootstrap导航与router-link 不和谐
原始版本: <ul class="nav nav-tabs" > <li v-if="is_material_check&quo ...
Bootstrap导航条鼠标悬停下拉菜单
Bootstrap导航条鼠标悬停下拉菜单 Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态,都是点击弹出下拉菜单,为了适应一般网站使用,我稍作了一些修改,鼠标hover时就弹 ...

Bootstrap 导航

Bootstrap 导航相关推荐

最新文章

热门文章