Bootstrap导航元素

2016-01-08

表& 26684;导航或标签使用ul,li无序列表，给ul加上class nav和 nav-tabs demo body{padding: 20px;}

表格导航或标签

使用ul,li无序列表，给ul加上class .nav和.nav-tabs

点击某个导航时，给其li加上class .active

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {

color: #555;

cursor: default;

background-color: #fff;

border: 1px solid #ddd;

border-bottom-color: transparent;

}

如果需要把标签改成胶囊的样式，只需要使用 class .nav-pills 代替 .nav-tabs 即可。

.nav-pills > li {

float: left;

}

.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {

color: #FFF;

background-color: #337AB7;

}

在使用 class .nav、.nav-pills 的同时使用 class .nav-stacked，让胶囊垂直堆叠。

加上.nav-stacked能使得胶囊垂直的原因：

.nav-stacked > li {

float: none;

}

您可以在屏幕宽度大于 768px 时，通过在分别使用.nav、.nav-tabs 或.nav、.nav-pills的同时使用 class .nav-justified，让标签式或胶囊

式导航菜单与父元素等宽。在更小的屏幕上，导航链接会堆叠。

为了更好的看出效果，给.container加上背景色

小屏幕时：

li可以添加.active可以显示目前是此菜单的状态，同样可以给其添加.disabled，使其显示为不可用状态，同时会禁用该链接

的:hover状态。

该 class 只会改变的外观，不会改变它的功能。在这里，需要使用自定义的 JavaScript 来禁用链接，尽管此处外观看起来不可