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

目录
相关文章
|
2天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
10 2
|
3天前
|
Rust 前端开发 JavaScript
前端性能革命:WebAssembly在高性能计算中的应用探索
【10月更文挑战第26天】随着Web应用功能的日益复杂,传统JavaScript解释执行模式逐渐成为性能瓶颈。WebAssembly(Wasm)应运而生,作为一种二进制代码格式,支持C/C++、Rust等语言编写的代码在浏览器中高效运行。Wasm不仅提升了应用的执行速度,还具备跨平台兼容性和安全性,显著改善了Web应用的响应速度和用户体验。
15 4
|
2天前
|
前端开发 数据管理 测试技术
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第27天】本文介绍了前端自动化测试中Jest和Cypress的实战应用与最佳实践。Jest适合React应用的单元测试和快照测试,Cypress则擅长端到端测试,模拟用户交互。通过结合使用这两种工具,可以有效提升代码质量和开发效率。最佳实践包括单元测试与集成测试结合、快照测试、并行执行、代码覆盖率分析、测试环境管理和测试数据管理。
12 2
|
3天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
13 3
|
3天前
|
前端开发 JavaScript 数据可视化
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第26天】前端自动化测试在现代软件开发中至关重要,Jest和Cypress分别是单元测试和端到端测试的流行工具。本文通过解答一系列问题,介绍Jest与Cypress的实战应用与最佳实践,帮助开发者提高测试效率和代码质量。
18 2
|
3天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
13 2
|
4天前
|
前端开发 JavaScript 开发者
“揭秘React Hooks的神秘面纱:如何掌握这些改变游戏规则的超能力以打造无敌前端应用”
【10月更文挑战第25天】React Hooks 自 2018 年推出以来,已成为 React 功能组件的重要组成部分。本文全面解析了 React Hooks 的核心概念,包括 `useState` 和 `useEffect` 的使用方法,并提供了最佳实践,如避免过度使用 Hooks、保持 Hooks 调用顺序一致、使用 `useReducer` 管理复杂状态逻辑、自定义 Hooks 封装复用逻辑等,帮助开发者更高效地使用 Hooks,构建健壮且易于维护的 React 应用。
15 2
N..
|
6月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
65 0
|
前端开发 容器
|
前端开发 容器