1.nav-stacked 这个属性可以决定 tab的变为竖的，不添加的话为横向的。

2.tab  横向的

ul中必须含有nav nav-tabs

ul li a 中必须有data-toggle="tab" href中#对应跳转的table页面。

对应的显示区域：tab-content

每一个item上对应的class="tab-pane fade in active" id="home"（第一个带in和active）

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Bootstrap 实例 - 标签页（Tab）插件</title>

    <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<ul id="myTab" class="nav nav-tabs">

    <li class="active">

        <a href="#home" data-toggle="tab">

             菜鸟教程

        </a>

    </li>

    <li><a href="#ios" data-toggle="tab">iOS</a></li>

    <li class="dropdown">

        <a href="#" id="myTabDrop1" class="dropdown-toggle"

           data-toggle="dropdown">Java

            <b class="caret"></b>

        </a>

        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">

            <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>

            <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>

        </ul>

    </li>

</ul>

<div id="myTabContent" class="tab-content">

    <div class="tab-pane fade in active" id="home">

        <p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>

    </div>

    <div class="tab-pane fade" id="ios">

        <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple

            TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>

    </div>

    <div class="tab-pane fade" id="jmeter">

        <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>

    </div>

    <div class="tab-pane fade" id="ejb">

        <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。

        </p>

    </div>

</div>

</body>

</html>

3.下拉框

4.按钮下拉

5.按妞组

6.

bootstrap点滴的更多相关文章

  1. Bootstrap 实战之响应式个人博客 （二）

    阅读本博文前请参考:Bootstrap 实战之响应式个人博客 (一) 一.博客 1.结构 整体博客详情页的结构共包括四部分: 导航栏 博客主体内容 右侧栏:全局搜索框,广告位,推荐阅读 页尾 其中导航 ...

  2. Bootstrap 实战之响应式个人博客 （一）

    一.示例 1.主页 2.博客详情页 3.在线地址 在线地址:入口 Addition:这里使用github-page将自己的静态项目免费部署到线上. 如果你只是做一些简单的静态项目做展示,付出这么大的时 ...

  3. 前端学习 之 Bootstrap（二）

    一.代码 内联代码:用<code>包裹,但是需要用<和>表示尖括号. 键盘输入:用<kbd>包裹表示键盘输入的内容. 多行代码:用<pre>包裹多行代码 ...

  4. 旺财速啃H5框架之Bootstrap（五）

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  5. 旺财速啃H5框架之Bootstrap（四）

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  6. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  7. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  8. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  9. 利用bootstrap的carousel.js实现轮播图动画

    前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...

随机推荐

  1. 走进云背后：微软Azure web 项目通过web service部署web site

    探索云那不为人知的故事(一):Web Services部署web site 前奏:Windows Azure是微软基于云计算的操作系统,现在更名为“Microsoft Azure”,和Azure Se ...

  2. HBase应用开发回顾与总结系列之三：RowKey行键生成器工具

      所谓RowKey行键生成器,是指通过软件工具制定行键生成策略,并可将策略信息保存成本地策略文件,待需要时再将本地策略文件序列化成行键生成策略对象,传入数据行信息后可自动生成RowKey行键. 那么 ...

  3. jQuery 3.0 的变化

    时隔 3 个月,jQuery 团队终于发布了 3.0 Alpha 版本.有两个版本 jQuery compat 3.0 和 jQuery 3.0. jQuery compat 3.0 对应之前的 1. ...

  4. Apache

    一.简介 Apache是世界使用排名第一的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一.它快速.可靠并且可通过简单的A ...

  5. 移动Windows用户文件夹的方法研究

    这种方法可能导致升级Windows失败.请谨慎使用. Windows 8.1 使用有效.其他系统请酌情修改. —————————————————————————— 复制文件内容(带权限等信息):有的说 ...

  6. FineReport层式报表解决大数据集展示问题攻略

    本文以填报报表为例,通过分页的方式,来解决大数据集展示的问题. 实现的思想就是通过在SQL里筛选部分数据库数据,以达到浏览器可以合理的展示报表页面.(数据分段,语句我这采用的是MYSQL,如果要用其他 ...

  7. [转]how to split the ng-repeat data with three columns using bootstrap

    本文转自:http://stackoverflow.com/questions/21644493/how-to-split-the-ng-repeat-data-with-three-columns- ...

  8. python数字图像处理（9）：直方图与均衡化

    在图像处理中,直方图是非常重要,也是非常有用的一个处理要素. 在skimage库中对直方图的处理,是放在exposure这个模块中. 1.计算直方图 函数:skimage.exposure.histo ...

  9. POJ 2653 Pick-up sticks【线段相交】

    题意:n根木棍随意摆放在一个平面上,问放在最上面的木棍是哪些. 思路:线段相交,因为题目说最多有1000根在最上面.所以从后往前处理,直到木棍没了或者最上面的木棍的总数大于1000. #include ...

  10. HTML标签----图文详解（二）

    HTML标签超详细的图文演示再来一波~~~ 如果还没有看过昨天的福利的,那可要抓紧喽,传送门:HTML标签----图文详解 本文主要内容 列表标签 表格标签 框架标签及内嵌框架<iframe&g ...