BootStrap实现左侧或右侧竖式tab选项卡

代码如下：



<div style="height: 100px;">

    <div class="col-xs-2">

        <ul class="nav nav-tab vertical-tab" role="tablist">

            <li role="presentation" class="active">

                <a href="#tab1" aria-controls="home" role="tab"

                   data-toggle="tab">本地</a>

            </li>

            <li role="presentation">

                <a href="#tab2" aria-controls="inbox" role="tab"

                   data-toggle="tab">系统</a>

            </li>

            <li role="presentation">

                <a href="#tab3" aria-controls="outbox" role="tab"

                   data-toggle="tab">网络</a>

            </li>

            <li role="presentation">

                <a href="#tab4" aria-controls="inbox1" role="tab"

                   data-toggle="tab">视音频</a>

            </li>

            <li role="presentation">

                <a href="#tab5" aria-controls="outbox1" role="tab"

                   data-toggle="tab">图像</a>

            </li>

            <li role="presentation">

                <a href="#tab6" aria-controls="outbox1" role="tab"

                   data-toggle="tab">事件</a>

            </li>

            <li role="presentation">

                <a href="#tab7" aria-controls="outbox1" role="tab"

                   data-toggle="tab">存储</a>

            </li>

        </ul>

    </div>

		<div class="tab-content vertical-tab-content col-xs-10">

				<div role="tabpanel" class="tab-pane active">这是.本地..</div>

				<div role="tabpanel" class="tab-pane">这是.系统..</div>

				<div role="tabpanel" class="tab-pane">这是..网络.</div>

				<div role="tabpanel" class="tab-pane">这是.视音频..</div>

				<div role="tabpanel" class="tab-pane">这是..图像.</div>

				<div role="tabpanel" class="tab-pane">这是..事件.</div>

				<div role="tabpanel" class="tab-pane">这是..存储.</div>

		</div>

</div>

效果如下：



将上面的二者对调可以实现右侧竖式选项卡：



<div style="height: 100px;">

	<div class="tab-content vertical-tab-content col-xs-10">

			<div role="tabpanel" class="tab-pane active">这是.本地..</div>

			<div role="tabpanel" class="tab-pane">这是.系统..</div>

			<div role="tabpanel" class="tab-pane">这是..网络.</div>

			<div role="tabpanel" class="tab-pane">这是.视音频..</div>

			<div role="tabpanel" class="tab-pane">这是..图像.</div>

			<div role="tabpanel" class="tab-pane">这是..事件.</div>

			<div role="tabpanel" class="tab-pane">这是..存储.</div>

	</div>

    <div class="col-xs-2">

        <ul class="nav nav-tab vertical-tab" role="tablist">

            <li role="presentation" class="active">

                <a href="#tab1" aria-controls="home" role="tab"

                   data-toggle="tab">本地</a>

            </li>

            <li role="presentation">

                <a href="#tab2" aria-controls="inbox" role="tab"

                   data-toggle="tab">系统</a>

            </li>

            <li role="presentation">

                <a href="#tab3" aria-controls="outbox" role="tab"

                   data-toggle="tab">网络</a>

            </li>

            <li role="presentation">

                <a href="#tab4" aria-controls="inbox1" role="tab"

                   data-toggle="tab">视音频</a>

            </li>

            <li role="presentation">

                <a href="#tab5" aria-controls="outbox1" role="tab"

                   data-toggle="tab">图像</a>

            </li>

            <li role="presentation">

                <a href="#tab6" aria-controls="outbox1" role="tab"

                   data-toggle="tab">事件</a>

            </li>

            <li role="presentation">

                <a href="#tab7" aria-controls="outbox1" role="tab"

                   data-toggle="tab">存储</a>

            </li>

        </ul>

    </div>

</div>

来源：https://blog.csdn.net/qq_39905917/article/details/85157669

BootStrap实现左侧或右侧竖式tab选项卡的更多相关文章

  1. bootstrap实现左侧图片右侧文字布局

    效果图 代码 通过class="media-left"来控制相对位置 <!DOCTYPE html> <html> <head lang=" ...

  2. 响应式Tab选项卡

    在线演示 本地下载

  3. 左侧点击后右侧添加tab标签栏以及内容

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. bootstrap建立响应式网站——tab选项卡

    1.bootstrap给我们提供了标签页 细细看了一下bootstrap的标签页源码,对tab选项卡有了更深的理解.其实说来也简单,以前自己写js和css时没有意识到整体的划分.就是分为两部分:一部分 ...

  5. bootstrap的常用组件和栅格式布局

    Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目. 因为Bootstrap需要jquery的支持,所以在使用Bootstrap之前要 ...

  6. 怎样用MathType创建竖式算法

    在使用MathType编辑公式时,有时将最简单的表达式变成Word文档也会出现一些问题.比如MathType竖式.下面介绍MathType竖式的一些编辑方法. 步骤如下: 步骤一:在MathType底 ...

  7. ionic js 侧栏菜单 把主要内容区域从一边拖动到另一边，来让左侧或右侧的侧栏菜单进行切换

    ionic 侧栏菜单 一个容器元素包含侧边菜单和主要内容.通过把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换. 效果图如下所示: 用法 要使用侧栏菜单,添加一个父元素<ion ...

  8. Bootstrap栅格系统详解,响应式布局

    Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...

  9. acdream 小晴天老师系列——竖式乘法（简单穷举）

    小晴天老师系列——竖式乘法 Time Limit: 4000/2000MS (Java/Others)    Memory Limit: 128000/64000KB (Java/Others)   ...

随机推荐

  1. script 标签 幼儿园级别的神坑。居然还让我踩到了。

    这样的写法,会导致页面出现问题,就类似被中断了一样,百思不得其解还以为是代码出了问题. <script src="./Components/ProcessLine/ProcessLin ...

  2. 使用rsa进行http传输加密

    目录 1. RSA算法 2. HTTPS 2.1 HTTPS优点 2.2 HTTPS缺点 3. RSA传输加密实现 3.1 所需插件 3.1.1 JS插件 3.1.2 所需JAR 3.1.3 代码 4 ...

  3. Android各种模拟器使用笔记

    [√]天天模拟器 优点: 缺点: 个人经验 ADB 版本过低的解决办法 去启动时的广告方法 去除多余进程方法 ADB无法连接到模拟器 原因分析: 解决方案: 安装APP(APK)时非常非常慢TTMNQ ...

  4. 解决Windows平台通过cURL上传APP到蒲公英pgyer平台时无法使用中文升级描述的问题

    解决Windows平台通过cURL上传APP到蒲公英pgyer平台时无法使用中文升级描述的问题 官方上传命令 curl -F file=@"315.apk" -F uKey=XXX ...

  5. Java内存模型FAQ（一） 什么是内存模型

    原文:http://www.cs.umd.edu/~pugh/java/memoryModel/jsr-133-faq.html 第一章 译者:方腾飞 在多核系统中,处理器一般有一层或者多层的缓存,这 ...

  6. [译]GLUT教程 - 整合代码6

    Lighthouse3d.com >> GLUT Tutorial >> Extras >> The Code So Far VI 下面代码以窗体模式启动.你可以在 ...

  7. 线性判别函数-Fisher 线性判别

    这是我在上模式识别课程时的内容,也有参考这里. 线性判别函数的基本概念 判别函数为线性的情况的一般表达式 式中x是d 维特征向量,又称样本向量, 称为权向量, 分别表示为 是个常数,称为阈值权. 设样 ...

  8. wamp 两个不同的php.ini

    最近在本地开发的windows wamp环境安装一个vld 扩展,碰见一个奇怪的问题,phpinfo() 有 而cli 命令模式里面却没有 最后发现wamp phpinfo()和cli命令模式指向的p ...

  9. 零基础学python-2.7 列表与元组

    事实上,能够把列表和元组看成普通的数组.可是这个数组能够存储不同的数据类型(对象) 列表和元组的差别   列表 元组 使用的符号 [] () 元素数量 可变 不可变 改动元素 不能够 能够 假设大家有 ...

  10. js自己定义插件-选项卡

    该功能比較简单.巩固一下jquery插件写法,注意引入的jquery.js  . 自己定义插件路径代码例如以下: 页面: <!doctype html> <html> < ...