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. ubuntu 14.04 anaconda安装

    Python的准备工作 Python 一个备受欢迎的点是社区支持很多,有非常多优秀的库或者模块.但是某些库之间有时候也存在依赖,所以要安装这些库也是挺繁琐的过程.但总有人忍受不了这种 繁琐,都会开发出 ...

  2. 使用程序修改系统(IE)代理设置

    文章都是发布在github再转到这边的,这边格式可能会乱掉.博客地址:benqy.com 这是本人在做的一个前端开发调试工具(HttpMock),功能是web服务器+http日记+http代理(类似f ...

  3. Hibernate学习之一级缓存

    © 版权声明:本文为博主原创文章,转载请注明出处 Hibernate缓存: - 缓存是为了降低应用程序对物理数据源访问的频次,从而提供应用程序的运行性能的一种策略 - Hibernate缓存是提升和优 ...

  4. Maven的pom文件内容详细理解

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  5. Trie|如何用字典树实现搜索引擎的关键词提示功能

    Trie字典树 Trie字典树又称前缀树,顾名思义,是查询前缀匹配的一种树形数据结构 可以分为插入(创建) 和 查询两部分.参考地址极客时间 下图为插入字符串的过程: 创建完成后,每个字符串最后一个字 ...

  6. spring 事件驱动模型简介

    事件驱动模型简介 事件驱动模型也就是我们常说的观察者,或者发布-订阅模型:理解它的几个关键点: 首先是一种对象间的一对多的关系:最简单的如交通信号灯,信号灯是目标(一方),行人注视着信号灯(多方): ...

  7. MySQL_使用时遇到的问题汇总

    一.data too long for column 'name' at row 1 1.现象:把数据库的字符集编码设置为utf-8,通过DOS界面向表的某一列插入汉字时会遇到类似 data too ...

  8. freemarker在xml文件中遍历list数据

    delete   from pub_channelpackage   where channelcode = :channelcode   and channeltype = :channeltype ...

  9. 如何玩转最新的项目的搭配springmvc+mybatis+Redis+Nginx+tomcat+mysql

    上一次完成nginx+tomcat组合搭配,今天我们就说说,这几个软件在项目中充当的角色: 要想完成这几个软件的组合,我们必须知道和熟悉应用这个框架, 一: Nginx:在项目中大多数作为反向代理服务 ...

  10. CSU 1663: Tree(树链剖分)

    1663: Tree Time Limit: 5 Sec  Memory Limit: 128 MB Submit: 26  Solved: 11 [Submit][id=1663"> ...