Bootstrap响应式前端框架笔记二十——工具条的应用-阿里云开发者社区

开发者社区> 珲yy少> 正文

Bootstrap响应式前端框架笔记二十——工具条的应用

简介: Bootstrap响应式前端框架笔记二十——工具条的应用
+关注继续查看

 工具条用于向用户进行某个操作的提示,在Bootstrap框架中,为按钮添加工具条十分简单,只需如下代码:


<button class="btn btn-primary" data-toggle="tooltip" data-placement="top" id="btn">工具条</button>

需要注意,要使工具条显现,必须先进行工具条对象的构造,示例如下:


$("#btn").tooltip({

animation:false,

delay:1000,

placement:'top',

title:'标题!!!!',

trigger:'click'

});

这个方法中可以传入一个对象参数,其中animation属性设置工具条的显隐是否有动画效果;delay属性设置触发后延迟多久进行工具条的显隐操作;placement属性设置工具条出现的位置,可选top,bottom,left,right,auto选项;title属性设置工具栏标题;trigger属性设置触发方式,可选click,hover,focus和manual。


工具条效果如下:


image.png


   开发者也可以手动调用方法来控制工具条的显示隐藏,示例如下:


//显示工具栏

$('#show').on('click',function(){

$('#btn').tooltip('show');

});

//隐藏工具栏

$('#hide').on('click',function(){

$('#btn').tooltip('hide');

});

//切换显隐状态

$('#toggle').on('click',function(){

$('#btn').tooltip('toggle');

});

Bootstrap中还对工具条提供了一些状态监听方法,示例如下:


$('#btn').on('show.bs.tooltip',function(){

console.log("工具条将要开启");

});

$('#btn').on('shown.bs.tooltip',function(){

console.log("工具条已经开启");

});

$('#btn').on('hide.bs.tooltip',function(){

console.log("工具条将要关闭");

});

$('#btn').on('hidden.bs.tooltip',function(){

console.log("工具条已经关闭");

});

  另外,本篇博客中所有的实例代码及显示效果,在如下地址中,需要的可以自行对照学习。


http://zyhshao.github.io/bootStrapDemo/toolJS.html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
响应式 Web 设计的 20 个有用的 jQuery 插件
响应式网页设计是Ethan Marcotte在去年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念可以说是是为移动互联网而生的! 本文介绍 20 个 jQuery 插件适合进行响应式 Web 网站设计。
624 0
浅谈移动端的自适应问题——响应式、rem/em、利用Js动态实现移动端自适应
浅谈移动端的自适应问题——响应式、rem/em、利用Js动态实现移动端自适应 一. 在HTML的头部加入meta标签 在HTML的头部,也就是head标签中增加meta标签,告诉浏览器网页宽度等于设备屏幕宽度,且不进行缩放,代码如下: <meta name="viewport" content=.
2010 0
谈谈低代码在前后端开发的应用领域
从一个从事过前后端大数据AI开发的角度谈下低代码的应用
258 0
推荐25款很棒的 HTML5 开发框架和开发工具【上篇】
  HTML5 在不同的领域让网页设计更强大的。快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5。HTML5 有许多新的特性功能,允许开发人员和设计师创建应用程序和网站,带给用户桌面应用程序的速度,性能和体验。
1042 0
Bootstrap学习笔记(实习第2天)
1、学习网站: http://www.bootcss.com/ 2、页面中加入下面代码即可调用bootstrap。 &lt;!-- 新 Bootstrap 核心 CSS 文件 加到head中 --&gt; &lt;link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min
1506 0
+关注
594
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载