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

目录
相关文章
|
3天前
|
机器学习/深度学习 人工智能 自然语言处理
DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
DeepSeek Artifacts是Hugging Face推出的免费AI编程工具,基于DeepSeek V3,支持快速生成React和Tailwind CSS代码,适合快速原型开发和前端组件构建。
123 28
DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
|
15天前
|
人工智能 前端开发 小程序
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
|
27天前
|
前端开发 JavaScript 开发者
前端项目代码规范工具 (ESLint. Prettier. Stylelint. TypeScript)
前端项目代码规范工具 (ESLint. Prettier. Stylelint. TypeScript)
|
2月前
|
JavaScript 前端开发 测试技术
构建高效可维护的前端应用
构建高效可维护的前端应用
|
1月前
|
移动开发 缓存 前端开发
深入理解前端路由:原理、实现与应用
本书《深入理解前端路由:原理、实现与应用》全面解析了前端路由的核心概念、工作原理及其实现方法,结合实际案例探讨了其在现代Web应用中的广泛应用,适合前端开发者和相关技术人员阅读。
|
2月前
|
前端开发 数据处理 Android开发
Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍
本文深入探讨了Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍,以及具体操作步骤、常见问题解决、高级调试技巧、团队协作中的调试应用和未来发展趋势,旨在帮助开发者提高调试效率,提升应用质量。
63 8
|
2月前
|
自然语言处理 前端开发 JavaScript
深入理解前端中的 “this” 指针:从基础概念到复杂应用
本文全面解析前端开发中“this”指针的运用,从基本概念入手,逐步探讨其在不同场景下的表现与应用技巧,帮助开发者深入理解并灵活掌握“this”的使用。
|
2月前
|
存储 前端开发 JavaScript
前端中对象的深度应用与最佳实践
前端对象应用涉及在网页开发中使用JavaScript等技术创建和操作对象,以实现动态交互效果。通过定义属性和方法,对象可以封装数据和功能,提升代码的组织性和复用性,是现代Web开发的核心技术之一。
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
67 5
|
2月前
|
编解码 监控 JavaScript
打造高效前端应用
打造高效前端应用
39 1