Bootstrap内容分类使用方法

yibin 2015-09-20 网站运营 608

如果我们需要在一块区域中显示不同的内容,那么就可能需要用到内容分类样式,通过标题对内容进行归类,点击某个标题后显示出对应的内容。
关于这个功能,Bootstrap提供了对应的样式,他们称之为nav样式,让我们看看Bootstrap内容分类样式应该如何使用。


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>


写在文章最后

不管使用tab样式还是用胶囊样式,Bootstrap分类样式都能够给你提供足够方便快捷的组件调用形式,赶紧将它们用到你的网站建设项目中去吧!


扫码添加微信

13013082126 扫描微信 建站咨询 优化咨询