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. 使用For XML PATH 会影响Cross Apply 返回

    昨天在写语句的时候,遇到了一个现象,其实就是使用 Cross Apply做一个拼接字符串的而已.比如 CREATE TABLE GoodsCatalog (ID INT, Name )) CREATE ...

  2. HQL查询语句

    查询语言 Hibernate 查询语言(HQL)是一种面向对象的查询语言,类似于 SQL,但不是去对表和列进行操作,而是面向对象和它们的属性. HQL 查询被 Hibernate 翻译为传统的 SQL ...

  3. cocosstdio之字体之文本和FNT字体

    FNT字体和文本字体的作用是:导入字体资源可以使用字体资源便可以使用其资源内的字体来在程序中使用 不同的是FNT字体资源内容比较少,所以个人猜想可以在特定情况下使用: 两种字体资源对比: 赋值过程对比 ...

  4. DataTable去除重复行，根据某一字段进行distinct

    网上有很多方法,比如利用视图处理: //去掉重复行 DataView dv = table.DefaultView; table = dv.ToTable(true, new string[] { & ...

  5. net-snmp添加自定义MIB

    我所知道的添加自定义MIB的方法有三种   1.静态加载,将生成的.c和.h文件加入到相应的位置,重新编译snmp库,优点是不需要修改配置文件,缺点是每次添加都得重新编译: 2.动态加载,将生成的.c ...

  6. 注解学习(模仿springMvc的注解注入方式)

    最近在看springMvc的源码,看到了该框架的注入注解的部分觉的有点吃力,可能还是对注解的方面的知识还认识的不够深刻,所以特意去学习注解方面的知识.由于本人也是抱着学习的态度来阅读源码,若文章在表述 ...

  7. 错误“Unexpected namespace prefix "xmlns" found for tag LinearLayout”的解决方法(转)

    (转自:http://blog.csdn.net/bombzhang/article/details/12676789) 有一次升级开发工具后发现xml脚本出现错误“Unexpected namesp ...

  8. Python搜索目录下指定的文件,并返回绝对路径(包括子目录)

    #!/usr/bin/python #coding=UTF-8 #FileName:search.py #文件搜索 import os; import sys; returnList = []; de ...

  9. shell流程控制

    if语句 判断条件用[]包裹起来 if [ $a > $b ] then echo ‘a > b’ elif [ $a < $b ] then echo ‘a < b’ els ...

  10. 【2016-10-13】【坚持学习】【Day4】【WPF】【ObservableCollection<T>】

    今天在项目中使用到这个 ObservableCollection<T> 类,作为数据源集合绑定到控件. 当数据源发生变化,会通知界面显示. 如果用List<T> ,当数据源发生 ...