了解bootstrap导航条

Author Avatar
Max Zhang 1月 05, 2017

导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式。
两端对齐的导航条导航链接已经被弃用了。

注意 .nav-tabs 类依赖 .nav 基类。
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

导航组件

`bash






### js
​```bash
$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab a:first').tab('show') // Select first tab
$('#myTab a:last').tab('show') // Select last tab
$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)

event

1.hide.bs.tab (on the current active tab)
2.show.bs.tab (on the to-be-shown tab)
3.hidden.bs.tab (on the previous active tab, the same one as for the hide.bs.tab event)
4.shown.bs.tab (on the newly-active just-shown tab, the same one as for the show.bs.tab event)

添加 .navbar-fixed-top 类可以让导航条固定在顶部,还可包含一个 .container 或 .container-fluid 容器,从而让导航条居中,并在两侧添加内补(padding)。

通过添加 .navbar-inverse 类可以改变导航条的外观。

你还可以将 active 或 disabled 状态应用于 标签,或者在向前/向后的箭头处省略 标记,即替换 标签,这样就可以让其保持需要的样式而不能被点击。​