菜鸟教程链接：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. block（九）Block 和 Delegate 的使用比较

    Block 和 Delegate中的方法都可以理解成回调函数,当某件事情发生的时候取执行一段代码片段 Block(代码块) 优点:是一种轻量级的回调,能够直接访问上下文,使用块的地方和块的实现地方在同 ...

  2. java 高性能读模式(译)

    原文地址:http://tutorials.jenkov.com/java-performance/read-patterns.html 好久没翻译了,逛知乎,无意间发现的一个链接,写的太好了,而且内 ...

  3. 站在.NET的角度学安卓的草民笔记1

    Java           ->        .NET 安卓          ->        winform/WPF 类继承Activity  ->     类继承 For ...

  4. Android View之布局加载流程

    1.引言 最近准备重新学习下Android,加深理解,快速形成自己的知识结构体系.最先学习的就算View部分,从自定义View到Activty层次结构,到layout加载过程.等等都会看一遍,在此记录 ...

  5. mysql中Table is read only错误解决方法

    今天再我把数据库data 拷贝到linux 下运行程序 ”mysql中Table is read only的解决“ 出现这样的问题,查询资料. linux下执行如下命令即可 #mysqladmin - ...

  6. Python 文件 read() 方法

    概述 Python 文件 read() 方法用于从文件中读取指定的字符数,如果未给定或为负则读取所有. 语法 read() 方法语法如下: fileObject.read([size]) 参数 siz ...

  7. mapreduce 只使用Mapper往多个hbase表中写数据

    只使用Mapper不使用reduce会大大减少mapreduce程序的运行时间. 有时候程序会往多张hbase表写数据. 所以有如题的需求. 下面给出的代码,不是可以运行的代码,只是展示driver中 ...

  8. java.io.IOException: Incompatible namespaceIDs

    问题描述:   在实验的时候,需要往以前的集群中添加一台datanode,在添加之前,由于在调式namenode的时候,格式化了dfs,这就导致了namenode上的namespaceID和以前集群上 ...

  9. Guid ToString 格式

    转自 http://www.cnblogs.com/greenerycn/archive/2010/04/25/guid_tostring_format.html 在日常编程中,Guid是比较常用的, ...

  10. eclipse自动切换到debug视图

    原文出自:http://blog.csdn.net/yizhizouxiaqu/article/details/7594502 当弹出"Confir Perspective Switch&q ...