bootstrap3导航
1.表格导航栏或标签
(1)以一个带有.nav的无序列表为开始
(2)添加.nav-tabs样式
胶囊式导航:将(2)的.nav-tabs样式改为.nav-pills样式
2.胶囊式导航垂直模式
在其基础样式后添加.nav-stacked
3.导航栏状态
active hover disabled
4.自适应导航
.nav-justified
5.导航栏的下拉菜单
(1)以一个带有.nav的无序列表为开始,并添加.nav-tabs
(2)再添加带有.dropdown-menus的无序列表
6.面包屑导航
以.breadrumb为开始的无序列表
7.导航条
(1)向<nav> 添加.navbar navbar-default
(2)向上面的<nav>添加role=“navigation”以增加可访问性
(3)在<nav>里嵌入一个<div>加标题样式.navbar-header,在其内部嵌入一个带有.navbar-brand的<a>
(4)为了向导航栏添加链接,只需要简明的添加带有class .nav .navbar-nav的无序列表即可
8.响应式导航栏
(1)给导航栏添加响应式特性,折叠内容必须包裹在一个带有.collapse .navbar-collapse的<div>中
(2)折叠起来的导航栏实际上是一个带有.navbar-toggle以及2个data-元素的<button>。第一个data-toggle,用于告诉js需要对按钮做什么,第二个data-target,指的是要切换到哪一个元素
(3)三个带有class=“icon-bar”的<span>
附加内容组 取反色<nav>中添加.navbar-inverse样式
9.内嵌图片
在内部一个包含<a>标签且带有.navbar-brand后面添加.brand-img
10.导航栏表单
在导航条中内嵌一个<form>样式为.navbar-form
位置调节.navbar-right .navbar-left
11.导航栏的文本和链接
文本:<p calss="navbar-text"></p>
链接:<a calss="navbar-link"></a>
12.固定导航条
.navbar-fixed-top
.navbar-fixed-bottom
.navbar-static-top
13.分页导航
使用<ul><li>,在<ul>中使用.pagination
大小:.pagination-lg .pagination-sm
14.标签和徽章
用一个<span class="label label-*" ==>标签 *:deafult primary success info warning danger
<span class="badge">==>徽章