Bootstrap内容分类使用方法（tab）

Bootstrap内容分类tab样式

说到内容分类，或许tab形式是我们最常用的分类方式了，在一个区域中通过tab对标题进行标注，然后对应的tab对应不同的内容，Bootstrap中同样引入了nav的tab样式，让我们看看如何使用：<ul class="nav nav-tabs">  <li class="active"><a href="#">杭州网站建设</a></li>  <li><a href="#">杭州网站设计</a></li>  <li><a href="#">杭州网站制作</a></li></ul>我们通过nav nav-tabs的样式引入到ul标签中，然后在里面通过li标签对标题进行设置，一目了然。

Bootstrap内容分类胶囊样式

Bootstrap为内容分类同样提供了其他样式以供选择，结构与上面的tab一样，不过引入的样式名称变为了nav nav-pills：<ul class="nav nav-pills">  <li class="active"><a href="#">杭州网站建设</a></li>  <li><a href="#">杭州网站设计</a></li>  <li><a href="#">杭州网站制作</a></li></ul>

Bootstrap内容分类适应屏幕样式

不管你采用了tab的样式还是胶囊的样式，当你需要适应屏幕的时候，你就要引入适应屏幕样式，写法也很简单，在上述的样式中加入nav-justified即可：<ul class="nav nav-pills nav-justified">  <li class="active"><a href="#">杭州网站建设</a></li>  <li><a href="#">杭州网站设计</a></li>  <li><a href="#">杭州网站制作</a></li></ul>

Bootstrap内容分类引入禁用链接

倘若你需要对内容分类的某个标题采用禁用样式，那么直接在li标签中引入disabled样式即可：<ul class="nav nav-pills nav-justified">  <li class="active"><a href="#">杭州网站建设</a></li>  <li><a href="#">杭州网站设计</a></li>  <li class="disabled"><a href="#">杭州网站制作</a></li></ul>