菜鸟教程链接：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. VS2017 IDE开发工具选型、安装和使用

    原文地址:https://blog.csdn.net/boonya/article/details/78739500 距离上次使用VS工具已是2年前了,这次准备选择比较新的版本来开发桌面程序了.总的来 ...

  2. c# 中内部类的简单介绍 C#内部类

    最近在看java一方面的书籍,看到一个很奇怪的问题,java类中还可以再定义一个类,这种结构非常特殊!后来才发现我知识浅薄了,原来C#中也有内部类,之前都一直没有注意过这个语法结构! 使用内部类有这样 ...

  3. Android插件化与热修复(六)-微信Tinker原理分析

    Tinker热修复原理分析 热补丁技术是在用户不需要重新安装应用的情况下实现应用更新,可快速解决一些线上问题.热补丁省去了Android应用发布版本的成本,而且用户端的更新也是无感知的. Tinker ...

  4. stm32调试过程中如何判断是程序问题还是硬件问题？

    可以用软件仿真,如果软件仿真时寄存器什么的都正确,而硬件在线仿真时不对,则说明是板子硬件的问题

  5. Android Developers:支持不同的屏幕密度

    这节课程向你展示如何通过提供不同的资源和使用与分辨率无关的测量单位,支持不同屏幕密度. 使用密度无关的像素 —————————————————————————————————————————————— ...

  6. A标签实现文件下载功能

    <a>可直接下载xls,doc,rar,zip,exe,js文件(图片跟txt文件是直接打开的) <a href="wKioJlJolKeCIzkCADd3Wf7OPI42 ...

  7. 使用 MD5 加密 去重对插入的影响

    现在有3000条数据,需要插入到数据库中去,使用的是对链接进行MD5加密, hashcode = md5(str(item_url))然后在数据库中设置 hashcode 为UNIQUE索引 3000 ...

  8. U811.1接口EAI系列之六--物料上传--VB语言

    1. 业务系统同步U811.1存货档案通用方法. 2.具体代码处理如下: 作者:王春天 2013-11-06 地址:http://www.cnblogs.com/spring_wang/p/34098 ...

  9. linux分享三：文件操作

    查找文件命令: which       查看可执行文件的位置 whereis    查看文件的位置 locate       配 合数据库查看文件位置 find          实际搜寻硬盘查询文件 ...

  10. Atitit Loading 动画效果

    Atitit Loading 动画效果 使用才场景,加载数据,以及显示警告灯.. 要有手动关闭按钮 <div class="spinner loading_part" sty ...