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. 微信公众平台开发（三） 订阅事件（subscribe）处理

    一.简介 新用户关注微信公众平台,将产生一个订阅事件,即subscribe事件,默认代码中没有对这一事件进行相应回复处理. 在新用户关注公众平台后,可能想知道该平台提供了哪些功能,以及怎样使用该平台, ...

  2. linux下创建用户

    linux下创建用户(一) Linux 系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号,然后以这个账号的身份进入系统.用户的账号一方面可以帮助系 ...

  3. 关于Leetcode上二叉树的算法总结

    二叉树,结构很简单,只是比单链表复杂了那么一丢丢而已.我们先来看看它们结点上的差异: /* 单链表的结构 */ struct SingleList{ int element; struct Singl ...

  4. 三：shell运算符

    1:declare命令 shell默认是字符串型        如果需要加减乘除,需要定义为整型declare命令:改变默认变量的类型decalre [+/-] [选项]  变量名      -给变量 ...

  5. cloudera cdh native lib

    如果通过命令行的方式安装cloudera 版本的hadoop,下载它的cdh版本. 解压后执行,你会发现报warning,没有native的库,lib/native是空的. 如何获取native的文件 ...

  6. Discuz论坛搬家手记（X3.2版本）

    Discuz论坛搬家手记(X3.2版本) 客户在虚拟主机上 运行着一个DISCUZ论坛, 主机商限制太多,连MP3都不让放,客户准备是在上面放一个FLASH斗地主游戏的(多人联机版), 加上MYSQL ...

  7. JAVA 字符串驻留池

    一切从String str = new String("abc")说起...    这行代码形式上很简单,其实很复杂.有一个常见的Java笔试题就是问上面这行代码创建了几个Stri ...

  8. qau-国庆七天乐——B

      B - Bull Math   Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%lld & %llu Sub ...

  9. lca入门———树上倍增法（博文内含例题）

    倍增求LCA: father[i][j]表示节点i往上跳2^j次后的节点 可以转移为 father[i][j]=father[father[i][j-1]][j-1] 整体思路: 先比较两个点的深度, ...

  10. window.open与window.close的兼容性问题

    window.open(页面地址url,打开的方式) 方法 打开一个新的窗口(页面) 如果url为空,则默认打开一个空白页面 如果打开方式为空,默认为新窗口方式打开 返回值:返回新打开窗口的windo ...