代码结构:

<div class='container-fluid'>
<h2 class='page-header'>Bootstrap 选项卡</h2>
<!--
选项卡:通过BS的类来控制选项卡的样式
     ?处可以换成以下几个类
     .nav-tabs:如图1
     .nav-pills:如图2
     .nav-tabs nav-stacked:如图3
-->
<ul class='nav ?'>
<li class='active'><a href='#'>选项一</a></li>
<li><a href='#'>选项二</a></li>
<li><a href='#'>选项三</a></li>
<li><a href='#'>选项四</a></li>
<li><a href='#'>选项五</a></li>
</ul>
</div>

图1:      .nav-tabs

图2:      .nav-pills

图3:      .nav-tabs nav-stacked

选项卡内容部分的代码:

<div class='container-fluid'>
<h2 class='page-header'>Bootstrap 选项卡</h2>
<!--
选项卡:通过BS的类来控制选项卡的样式
-->
<ul class='nav nav-tabs'>
<li class='active'><a href='#tab1' data-toggle='tab'>选项一</a></li>
<li><a href='#tab2' data-toggle='tab'>选项二</a></li>
<li><a href='#tab3' data-toggle='tab'>选项三</a></li>
<li><a href='#tab4' data-toggle='tab'>选项四</a></li>
<li><a href='#tab5' data-toggle='tab'>选项五</a></li>
</ul> <!--
选项卡的内容定义
-->
<div class='tab-content'>
<div class='tab-pane active' id='tab1'><p>我是选项卡一的内容</p></div>
<div class='tab-pane' id='tab2'><p>我是选项卡二的内容</p></div>
<div class='tab-pane' id='tab3'><p>我是选项卡三的内容</p></div>
<div class='tab-pane' id='tab4'><p>我是选项卡四的内容</p></div>
<div class='tab-pane' id='tab5'><p>我是选项卡五的内容</p></div>
</div> </div>

如图

选项卡居右(居左):

<div class='container-fluid'>
<h2 class='page-header'>Bootstrap 选项卡</h2> <div class='tabbable tabs-left'> <!--
选项卡:通过BS的类来控制选项卡的样式
-->
<ul class='nav nav-tabs'>
<li class='active'><a href='#tab1' data-toggle='tab'>选项一</a></li>
<li><a href='#tab2' data-toggle='tab'>选项二</a></li>
<li><a href='#tab3' data-toggle='tab'>选项三</a></li>
<li><a href='#tab4' data-toggle='tab'>选项四</a></li>
<li><a href='#tab5' data-toggle='tab'>选项五</a></li>
</ul> <!--
选项卡的内容定义
-->
<div class='tab-content'>
<div class='tab-pane active' id='tab1'>我是选项卡一的内容</div>
<div class='tab-pane' id='tab2'>我是选项卡二的内容</div>
<div class='tab-pane' id='tab3'>我是选项卡三的内容</div>
<div class='tab-pane' id='tab4'>我是选项卡四的内容</div>
<div class='tab-pane' id='tab5'>我是选项卡五的内容</div>
</div>
</div> </div>

选项卡居左:

  添加一个div且 class='tabbable tabs-left' ,如图1:

选项卡居右:

  添加一个div且 class='tabbable tabs-right',如图2:

选项卡居下:

  添加一个div且 class='tabbable tabs-below',且 .tab-content 与 .nav nav-tabs互换位置,如图3:

图1:

图2:

图3:

注意:

  如果在运用bootstrap2的时候有些地方通过以上代码无法得到对应的效果,那么也许是bs的版本问题,重新下载一个可以解决战斗!

Bootstrap页面布局17 - BS选项卡的更多相关文章

  1. Bootstrap页面布局3 - BS布局以及流动布局

    1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示 ...

  2. Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单

    代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...

  3. Bootstrap页面布局9 - BS列表

    列表: 无序列表(列表中项目内容没有固定的顺序), 有序列表(通常使用在一组有前后顺序的内容上), 描述列表(定义解释一组词汇) 无序列表: <ul> <li>Ueditor编 ...

  4. Bootstrap页面布局24 - BS旋转木马功能

    代码: <div class='container-fluid'> <h3 class='page-header'>Bootstrap 旋转木马</h3> < ...

  5. Bootstrap页面布局23 - BS折叠内容

    <div class='container-fluid'> <h3 class='page-header'>Bootstrap 折叠内容</h3> <!--如 ...

  6. Bootstrap页面布局22 - BS工具提示

    当鼠标点击在一个a连接上时,显示提示文字的效果 ----------------  tooltip <div class='container-fluid'> <h3 class=' ...

  7. Bootstrap页面布局20 - BS缩略图

    <div class='container-fluid'> <h2 class='page-header'>Bootstrap 缩略图</h2> <ul cl ...

  8. Bootstrap页面布局19 - BS提示信息

    提示信息的设计 提示信息的类: .alert:提示信息类 .alert alert-danger: .alert alert-error: .alert alert-success: .alert a ...

  9. Bootstrap页面布局18 - BS导航路径以及分页器

    导航路径:又叫“面包屑”,功能是让用户知道所处的位置. <!--面包屑--> <ul class='breadcrumb'> <li><a href='#'& ...

随机推荐

  1. ***微信公众平台开发: 获取用户基本信息+OAuth2.0网页授权

    本文介绍如何获得微信公众平台关注用户的基本信息,包括昵称.头像.性别.国家.省份.城市.语言.本文的方法将囊括订阅号和服务号以及自定义菜单各种场景,无论是否有高级接口权限,都有办法来获得用户基本信息, ...

  2. ThinkPHP实现移动端访问自动切换主题模板

    ThinkPHP的模板主题机制,如果只是在PC,只要需修改 DEFAULT_THEME (新版模板主题默认是空,表示不启用模板主题功能)配置项就可以方便的实现多模板主题切换. 但对于移动端和PC端,也 ...

  3. C++的那些事:const用法面面观

    一.const是什么 在 C/C++ 语言中,const关键字是一种修饰符.所谓“修饰符”,就是在编译器进行编译的过程中,给编译器一些“要求”或“提示”,但修饰符本身,并不产生任何实际代码.就 con ...

  4. Hark的数据结构与算法练习之臭皮匠排序

    算法说明 个人感觉是没有意义的算法,只是用来作为学术研究.或者说开拓一下思维. 从wikipedia copy来的一句解释的话:Stooge排序是一种低效的递归排序算法,甚至慢于冒泡排序.在<算 ...

  5. 浅谈C/C++中的顺序点和副作用

    一.副作用(side effect) 表达式有两种功能:每个表达式都产生一个值( value ),同时可能包含副作用( side effect ).副作用是指改变了某些变量的值. 如: 1:20    ...

  6. QUnit使用笔记-3测试用户操作

    模拟操作: elem.trigger(event); elem.triggerHandler(event); triggerHandler的不同: 不会引起事件的默认行为 .trigger() 会操作 ...

  7. ember.js:使用笔记6 子项目的前进与后退

    如下代码会根据model产生不同的table项,在进行其他设置后,一般是根据id来跳转到相应项目子项中: {{#each}} {{#link-to "tabls" this}}{{ ...

  8. Xamarin Android提示找不到资源属性定义

    Xamarin Android提示找不到资源属性定义 错误信息:”Resource.Attribute”未包含”actonBarSize”的定义Xamarin Android经常会出现找不到资源属性的 ...

  9. json学习系列(1)-使用json所要用到的jar包下载

    内容来源于互联网. json是个非常重要的数据结构,在web开发中应用十分广泛.每个开发者都应该好好的去研究一下json的底层实现.在使用json之前首先要明白需要哪些jar文件,初次使用的时候很容易 ...

  10. SCU3109 Space flight(最大权闭合子图)

    嗯,裸的最大权闭合子图. #include<cstdio> #include<cstring> #include<queue> #include<algori ...