博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Bootstrap页面布局17 - BS选项卡
阅读量:4652 次
发布时间:2019-06-09

本文共 1500 字,大约阅读时间需要 5 分钟。

代码结构:

图1:      .nav-tabs

图2:      .nav-pills

图3:      .nav-tabs nav-stacked

选项卡内容部分的代码:

我是选项卡一的内容

我是选项卡二的内容

我是选项卡三的内容

我是选项卡四的内容

我是选项卡五的内容

如图

 

选项卡居右(居左):

我是选项卡一的内容
我是选项卡二的内容
我是选项卡三的内容
我是选项卡四的内容
我是选项卡五的内容

选项卡居左:

  添加一个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的版本问题,重新下载一个可以解决战斗!

转载于:https://www.cnblogs.com/Zell-Dinch/p/3888379.html

你可能感兴趣的文章
Python小技巧
查看>>
fragment Activity之间传值的方法 之------------接口回调
查看>>
OSS研究
查看>>
Leetcode 116 Populating Next Right Pointers in Each Node
查看>>
Angular 1.63 双向数据绑定 通过 $http 发送数据
查看>>
php以及前端的一些小小的技术要点
查看>>
【Android实战开发】3G技术和Android发展简介
查看>>
【精解】EOS标准货币体系与源码实现分析
查看>>
AFore.NET 翻译
查看>>
[大牛翻译系列]Hadoop(8)MapReduce 性能调优:性能测量(Measuring)
查看>>
What to do when the Chinese Characters are messed up when extracting from zip archive?
查看>>
SQLYog快捷键大全
查看>>
(转载)DLL动态链接库编程入门之三:MFC规则DLL(上)
查看>>
隐藏Nginx或Apache以及PHP的版本号的方法
查看>>
N32926之jlink调试配置
查看>>
ASP.NET ACCESS 分页
查看>>
HashMap
查看>>
Android广播机制概述
查看>>
mysql触发器
查看>>
我是怎么让全国最大的儿童失踪预警平台流量掉底的
查看>>