一.标签页

标签页也就是通常所说的选项卡功能。

//基本用法

<ul class="nav nav-tabs">
<li class="active"><a href="#html5" data-toggle="tab">HTML5</a></li>
<li><a href="#bootstrap" data-toggle="tab">Bootstrap</a></li>
<li><a href="#jquery" data-toggle="tab">jQuery</a></li>
<li><a href="#extjs" data-toggle="tab">ExtJS</a></li>
</ul>
<div class="tab-content" style="padding: 10px;">
<div class="tab-pane active" id="html5">...</div>
<div class="tab-pane" id="bootstrap">...</div>
<div class="tab-pane" id="jquery">...</div>
<div class="tab-pane" id="extjs">...</div>
</div>

//可以设置淡入淡出效果 fade,而 in 表示首选的内容默认显示

<ul class="nav nav-tabs">
<li class="active"><a href="#html5" data-toggle="tab">HTML5</a></li>
<li><a href="#bootstrap" data-toggle="tab">Bootstrap</a></li>
<li><a href="#jquery" data-toggle="tab">jQuery</a></li>
<li><a href="#extjs" data-toggle="tab">ExtJS</a></li>
</ul>
<div class="tab-content" style="padding: 10px;">
<div class="tab-pane fade in active" id="html5">可以设置淡入淡出效果 fade,而 in 表示首选的内容默认显示 </div>
<div class="tab-pane fade" id="bootstrap">可以设置淡入淡出效果 fade,而 in 表示首选的内容默认显示 </div>
<div class="tab-pane fade" id="jquery">可以设置淡入淡出效果 fade,而 in 表示首选的内容默认显示 </div>
<div class="tab-pane fade" id="extjs">可以设置淡入淡出效果 fade,而 in 表示首选的内容默认显示 </div>
</div>

//也可以换成胶囊式

<ul class="nav nav-pills">
<li class="active"><a href="#html5" data-toggle="tab">HTML5</a></li>
<li><a href="#bootstrap" data-toggle="tab">Bootstrap</a></li>
<li><a href="#jquery" data-toggle="tab">jQuery</a></li>
<li><a href="#extjs" data-toggle="tab">ExtJS</a></li>
</ul>
<div class="tab-content" style="padding: 10px;">
<div class="tab-pane fade in active" id="html5">可以设置淡入淡出效果 fade,而 in 表示首选的内容默认显示 </div>
<div class="tab-pane fade" id="bootstrap">可以设置淡入淡出效果 fade,而 in 表示首选的内容默认显示 </div>
<div class="tab-pane fade" id="jquery">可以设置淡入淡出效果 fade,而 in 表示首选的内容默认显示 </div>
<div class="tab-pane fade" id="extjs">可以设置淡入淡出效果 fade,而 in 表示首选的内容默认显示 </div>
</div>

//data-target

使用 data-target 绑定或不绑定效果都是一样的

//使用 JavaScript,直接使用 tab 方法。

$('#nav a').on('click', function (e) { e.preventDefault(); $(this).tab('show'); });

//事件,其他雷同

$('#nav a').on('show.bs.tab', function () { alert('调用 tab 时触发!'); });
$('#nav a').on('shown.bs.tab', function () { alert('显示完 tab 时触发!'); });

二.工具提示

工具提示就是通过鼠标移动选定在特定的元素上时,显示相关的提示语。

//基本实例

<a href="#" data-toggle="tooltip" title="超文本标识符">HTML5</a>

//JS 部分需要声明

$('#section').tooltip();

工具提示有很多属性来配置提示的显示,具体如下:

<a href="#"
data-toggle="tooltip"
data-original-title="<b>超文本标识符</b>"
title="超文本标识符"
data-animation="false"
data-html="true"
data-placement="auto top"
data-trigger="hover focus"
data-delay="100"
data-template="<div class='tooltip'><div class='tooltip-arrow'></div><div class='tooltip-inner'></div></div>">HTML5</a>
<script type="text/javascript">
$('a').tooltip(); </script>
效果图如下:


 

//JavaScript 方式

<a href="#" data-toggle="tooltip" title="超文本标识符">HTML5</a>

<script type="text/javascript">
$('a').tooltip({ delay : { show : 500, hide : 100, } });

</script>

JavaScript 有四个方法:show、hide、toggle 和 destroy 四种。

//显示

$('#section a').tooltip('show'); 

//隐藏

$('#section a').tooltip('hide'); 

//反转显示和隐藏

$('#section a').tooltip('toggle');

//隐藏并销毁

$('#section a').tooltip('destroy');

Bootstrap 标签页和工具提示插件的更多相关文章

  1. 第二百四十五节,Bootstrap标签页和工具提示插件

    Bootstrap标签页和工具提示插件 学习要点: 1.标签页 2.工具提示 本节课我们主要学习一下 Bootstrap 中的标签页和工具提示插件. 一.标签页选项卡 标签页也就是通常所说的选项卡功能 ...

  2. Bootstrap 学习笔记9 标签页和工具提示插件

    <ul class="nav nav-tabs"> <li class="active"><a href="#html5 ...

  3. Bootstrap 标签页(Tab)插件

    摘自: http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html Bootstrap 标签页(Tab)插件 标签页(Tab)在 Bootstr ...

  4. Bootstrap标签页(Tab)插件事件

    事件 下表列出了标签页(Tab)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.tab 该事件在标签页显示时触发,但是必须在新标签页被显示之前.分别使用 even ...

  5. Bootstrap标签页(Tab)插件

    标签页(Tab)在Bootstrap导航元素一章中简介过,通过结合一些data属性,您可以轻松地创建一些标签页界面.通过这个插件您可以把内容放置在标签页或胶囊式标签页甚至是下拉菜单标签页中. 用法 您 ...

  6. 解决Bootstrap 标签页(Tab)插件切换echarts不显示问题

    1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...

  7. 解决Bootstrap标签页(Tab)插件切换echarts不显示问题

    1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...

  8. 使用bootstrap标签页

    关键字:使用标签页,静态调用html页面(使用iframe内联框架) 完整代码如下: <!DOCTYPE html> <html lang="en"> &l ...

  9. bootstrap 标签页tab切换js(含报错原因)

    booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留 ...

随机推荐

  1. 安装phpmyadmin

    1.查看PHP版本 新建文本文档,填写下面内容: <?phpphpinfo();?>保存,然后更改文件名为phpinfo.php放到你域名根目录,然后通过你的域名+phpinfo.php浏 ...

  2. IoC模式(转)

    IoC模式 1.依赖 依赖就是有联系,有地方使用到它就是有依赖它,一个系统不可能完全避免依赖.如果你的一个类或者模块在项目中没有用到它,恭喜你,可以从项目中剔除它或者排除它了,因为没有一个地方会依赖它 ...

  3. SU suchart命令学习

  4. ural 1247. Check a Sequence

    1247. Check a Sequence Time limit: 0.5 secondMemory limit: 64 MB There is a sequence of integer numb ...

  5. 核反应堆[HDU2085]

    核反应堆 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  6. 【COGS & USACO Training】710. 命名那个数字(hash+水题+dfs)

    http://cojs.tk/cogs/problem/problem.php?pid=710 近日开始刷水... 此题我为了练一下hash...但是hash跑得比暴力还慢.. 不言而喻... #in ...

  7. 【BZOJ】1067: [SCOI2007]降雨量(rmq+变态题)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1067 好不爽,弄了一个晚上. 好不爽. 还是照着别人程序拍着看的!!! 噗 这题很变态. 首先,我没 ...

  8. SecureCrt自动化

    Crt自动化 测试 SecureCrt脚本 JS脚本   引言 软件介绍 脚本介绍 引言 在嵌入式公司中,面对大量的网络设备,不论开发同事进行设备开发.测试同事进行大量测试工作还是运维人员进行大量设备 ...

  9. Jquery_JQuery之DataTables强大的表格解决方案

    1.DataTables的默认配置 $(document).ready(function() { $(‘#example’).dataTable(); } ); 示例:http://www.guoxk ...

  10. 用java删除文件夹里的所有文件

    import java.io.File; public class Test { public static void main(String args[]){ Test t = new Test() ...