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. Android源码在线查看网址

    1 http://www.grepcode.com/project/repository.grepcode.com/java/ext/com.google.android/android/

  2. Storm/Cassandra集成错误：NoSuchMethodError: concurrent.Futures.withFallback

    本文原文出处: http://blog.csdn.net/bluishglc/article/details/50443205 严禁不论什么形式的转载.否则将托付CSDN官方维护权益. 2015年的最 ...

  3. Android布局中 android:layout_gravity="bottom"为何不起作用？

    在android布局时我们有时会需要将位于LinearLayout布局中的控件放在布局底部,或者是同时想将几个控件底部对齐,此时我们自然会想到使用 android:layout_gravity=&qu ...

  4. 让 webpack 加载 Source Map

    在浏览器中运行的 JavaScript 代码都是编译器输出的代码,这些代码的可读性很差.如果在开发过程中遇到一个不知道原因的 Bug,则你可能需要通过断点调试去找出问题. 在编译器输出的代码上进行断点 ...

  5. jeesite中activiti中的流程表梳理

    最近在利用jeesite开发一个小系统,趁着这个机会整理了activiti中的相关表,跟踪流程,然后查看这几个表中数据的变化,可以更好地理解流程的开发.现在整理出来,希望可以帮助更多的人! 表结构 一 ...

  6. DMP

    1.dmp-data mabagement platform数据管理平台 数据赋能,营销智变 2.定义 把分散的第一,第三方异构.多源数据进行整合,然后纳入统一技术平台中,并对这些数据进行标准化和细分 ...

  7. 基于树莓派3B+Python3.5的OpenCV3.4的配置教程

    https://www.cnblogs.com/Pyrokine/p/8921285.html

  8. 如何落地全球最大 Kubernetes 生产集群

        鲍永成   京东基础架构部技术总监,   DevOps 标准核心编写专家   前言   JDOS 就是京东数据中心操作系统,随着数据中心规模不断的扩大,我们需要对数据中心做综合的考虑.所以一开 ...

  9. Hibernate: 数据持久层框架

    Hibernate 是一种Java语言下的对象关系映射解决方案. 它是使用GNU宽通用公共许可证发行的自由.开源的软件.它为面向对象的领域模型到传统的关系型数据库的映射,提供了一个使用方便的框架.Hi ...

  10. python学习 01 变量

    1.变量不是‘盒子’. 1.1 不同的值,变量名没变,   变量地址也会变. 1.2 相同的值,不同的变量名,变量地址是相同的