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天前
|
人工智能 JSON 前端开发
有关D2C工具的思考和分享, 提升前端研发效率
有关D2C工具的思考和分享, 提升前端研发效率
16 1
|
8天前
|
前端开发 JavaScript Java
从前端到后端:构建全栈应用的技术路线探析
【2月更文挑战第3天】本文通过探讨前端和后端开发的基本概念和技术要点,深入剖析了构建全栈应用的技术路线。从前端的HTML、CSS和JavaScript,到后端的Java、C和数据库,我们将带您逐步了解如何将不同技术组合起来实现高效、稳定的全栈应用。
17 7
|
11天前
|
前端开发 JavaScript NoSQL
从前端到后端:构建现代化的全栈应用
本文将探讨如何构建现代化的全栈应用,从前端到后端的技术选型、架构设计和开发实践等方面进行详细介绍。我们将深入研究各种技术工具和框架,如前端开发中的React和Vue,后端开发中的Java和Python,以及数据库管理与优化等,帮助读者全面了解全栈开发的核心概念和实际应用。
18 1
|
3天前
|
前端开发 数据可视化
探索前端开发中的新趋势:低代码平台的应用与挑战
【2月更文挑战第8天】随着前端开发领域的不断发展,低代码平台作为一种新兴的开发方式正逐渐受到关注。本文将探讨低代码平台在前端开发中的应用现状、优势以及挑战,带领读者深入了解这一新趋势。
|
8天前
|
前端开发 NoSQL Java
从前端到后端:构建现代化的全栈应用
【2月更文挑战第3天】本文将探讨如何从前端到后端构建现代化的全栈应用。我们将介绍前端技术的发展趋势,包括最新的框架和工具,以及如何与后端进行无缝集成。同时,我们将深入研究后端开发的关键技术,如Java、C和数据库,并提供实用的建议和最佳实践。
|
3天前
|
前端开发 JavaScript 数据可视化
几何学在前端边界计算中的应用和原理分析(一)
几何学在前端边界计算中的应用和原理分析(一)
12 0
|
3天前
|
Rust 前端开发 JavaScript
前端技术发展趋势与应用前景分析
【2月更文挑战第8天】 随着互联网时代的不断发展,前端技术作为网页和移动端开发的核心领域,也在不断演进。本文将深入探讨前端技术的发展趋势与应用前景,分析当前热门技术及其在各行业中的应用,帮助读者更好地了解前端技术的现状与未来。
|
8天前
|
人工智能 前端开发 算法
未来互联网发展趋势分析与前端技术应用探讨
【2月更文挑战第3天】随着人工智能、大数据、物联网等新兴技术的快速发展,未来互联网的发展方向和趋势变得更加多样化和复杂。在这种背景下,前端技术作为用户与系统之间的桥梁,扮演着至关重要的角色。本文将从未来互联网发展趋势的角度出发,探讨前端技术在不断变革的互联网时代的应用与发展。
|
9天前
|
人工智能 自然语言处理 前端开发
未来前端发展趋势分析及应用探讨
【2月更文挑战第2天】 随着互联网的快速发展,前端技术在不断演进和升级。本文通过分析当前前端技术的发展现状,探讨未来前端的发展趋势,并结合实际案例探讨其应用前景。从响应式设计、移动端优化到人工智能与前端的结合,前端技术正不断拓展其边界,为用户带来更加智能、便捷的体验。
|
9天前
|
人工智能 自然语言处理 前端开发
探索人工智能在前端开发中的应用与前景
【2月更文挑战第2天】随着人工智能技术的迅猛发展,其在前端开发领域的应用日益广泛。本文将重点探讨人工智能在前端开发中的具体应用场景以及未来的发展前景,带领读者深入了解人工智能与前端开发的结合之道。

相关产品

  • 云迁移中心