代码结构:
Bootstrap 选项卡
图1: .nav-tabs
图2: .nav-pills
图3: .nav-tabs nav-stacked
选项卡内容部分的代码:
Bootstrap 选项卡
我是选项卡一的内容
我是选项卡二的内容
我是选项卡三的内容
我是选项卡四的内容
我是选项卡五的内容
如图
选项卡居右(居左):
Bootstrap 选项卡
我是选项卡一的内容我是选项卡二的内容我是选项卡三的内容我是选项卡四的内容我是选项卡五的内容
选项卡居左:
添加一个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的版本问题,重新下载一个可以解决战斗!