Bootstrap内容分类使用方法(tab)
来源:互联网 发布:感情洁癖 知乎 编辑:程序博客网 时间:2024/06/06 04:24
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>
- Bootstrap内容分类使用方法(tab)
- 浅析Bootstrap中Tab(标签页)的使用方法
- Bootstrap Tab
- Bootstrap 标签页(Tab)插件
- Bootstrap 标签页(Tab)插件
- Bootstrap 标签页(Tab)插件
- Bootstrap 标签页(Tab)插件
- Bootstrap 之 tab 改
- bootstrap tab页
- 改造BOOTSTRAP的TAB
- Bootstrap tab left css
- bootstrap双重tab嵌套
- $().tab() bootStrap中Tab页签切换
- Tab control控件使用方法
- MFC Tab控件使用方法
- jQueryTools Tab页使用方法
- Tab Control使用方法
- bootstrap 3 nav-tab 用法
- Mongoose初体验
- deque容器基本操作
- 【caffe学习】caffe第二个比较典型的识别例子CIFAR_10的运行详解
- 【java】制造工厂里的开发工作
- poi workbook 的 cellstyle 创建不能超过4000的解决方法
- Bootstrap内容分类使用方法(tab)
- gets和fgets函数的区别
- 前端学习笔记-HTML(一)
- 微信小程序开发基础篇之安装(一)
- Spring入门之bean装配
- 【jQuery】管理包装集
- Hive概述
- qml文件如何查看效果
- 【c++】复合类型