菜鸟教程链接：http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html

1、例子

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

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

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

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

    <script src="https://cdn.bootcss.com/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>

</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>

</body>

</html>

2、运行结果：

Bootstrap tab插件的使用的更多相关文章

  1. 用bootstrap的tab插件做一个图层切换效果（感觉会误导淫们，大家当乐子看吧）

    小伙伴们啊,我JS真的是个渣渣,所以总想要偷懒,于是为了实现效果就把tab插件给改了(各位大神轻拍啊,我是小白,很纯洁滴,小心脏也很脆弱)…… 最近做的项目为了考虑以后的移动设备兼容性,所以用了Boo ...

  2. 使用bootstrap的插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  3. Bootstrap按钮插件

    前面的话 按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态.正在加载状态.正常状态等.本文将详细介绍Bootstrap按钮插件 加载状态 通过按钮可以设计状态提示,当单击按钮时,会显示 ...

  4. python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

  5. 用jquery编写的tab插件

    用jquery编写的tab插件 源码 $.fn.ss_tab = function (options) { var box = $(this); var btns = $(this).find(&qu ...

  6. bootstrap tab切换如何让鼠标移动自动切换内容

    bootstrap集成了很多功能,比如nav-tabs组件,可以将相似的内容集中在一个区块中展示.bootstrap tab切换默认是要点击才会切换的,如何实现鼠标移动就自动切换呢?如下图所示,光标移 ...

  7. bootstrap时间插件 火狐不显示 完美解决方法

    原文链接:http://www.phpbiji.cn/article/index/id/141/cid/4.html bootstrap时间插件火狐 bootstrap-datetimepicker火 ...

  8. 解决Twitter Bootstrap Tab URL链接问题

    例如这样的一个Tabs 代码: <ul class="nav nav-tabs" id="myTab"> <li class="ac ...

  9. 20 个最棒的 jQuery Tab 插件

    jQuery Tab 常用来做网页上的选项设置界面和导航,本文向你推荐最棒的 20 个 jQuery Tab 插件.Enjoy !! 1. Slider Tabs SliderTabs 是一个可定制的 ...

随机推荐

  1. solr开发,提交索引数据的几种方式

    今天抽空学习了一下solr,有新东西学习就是哈皮! 期待能有机会与实战.实例仅为个人理解学习实例.提交到Solr服务器上的数据必须是 SolrInputDocument 类型. 方案一:利用反射,自定 ...

  2. getServletContext()接口解析(收藏)

    javax.servlet.ServletContext接口 一个servlet上下文是servlet引擎提供用来服务于Web应用的接口.Servlet上下文具有名字(它属于Web应用的名字)唯一映射 ...

  3. Linux引导启动程序 - boot

    主要描述 boot/目录中的三个汇编代码文件,见列表 3-1 所示.正如在前一章中提到的,这三个 文件虽然都是汇编程序,但却使用了两种语法格式.bootsect.s 和 setup.s 采用近似于 I ...

  4. cassandra java 兼容性问题及其解决方法

    1.安装 http://wiki.apache.org/cassandra/DebianPackaging 2.java兼容性问题 由于cassandra运行于sun jdk6上,而ubuntu默认是 ...

  5. CListCtrl的Report风格自绘

    原文链接: http://jingyan.baidu.com/article/5bbb5a1b38af1113eaa17910.html CListCtrl是MFC中运用最广泛的控件之一,很多软件都有 ...

  6. SharePoint 2013 创建Web Application

    今天继续SharePoint 2013 的探索之旅,之前几篇文章分析了SharePoint 2013的物理拓扑结构,安装,以及逻辑体系结构.在这篇文章中,我将继续Step By Step形式演示如何在 ...

  7. SQLServer2012 (非)聚集索引存储探究

    SQLServer2012 (非)聚集索引存储探究 Author:zfive5(zidong) Email:zfive5@163.com 引子 因为写了前一篇文字<SQLServer2012 表 ...

  8. [100]find&xargs命令

    打算把基础命令常用选项做个总结. find命令参数 - 命令格式 find . -type f -name '*.txt' - 命令参数 find #查找文件 -type #指定类型 f 文件 d 目 ...

  9. 浅析C#中的托付

    托付是寻址方法的.NET版本号.在C++中.函数指针仅仅只是是一个指向内存位置的指针,它不是类型安全的.而.NET托付全然不同,托付是安全类型的类,它定义了返回类型和參数的类型. 当把方法传递给其它方 ...

  10. 深入浅出HTTPS基本原理

    基础知识准备:在了解HTTPS的基本原理之前,需要先了解如下的基本知识. 一.什么是HTTPS,TLS,SSL HTTPS,也称作HTTP over TLS.TLS的前身是SSL,TLS 1.0通常被 ...