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。

工具條效果如下：

   開發者也可以手動調用方法來控制工具條的顯示隐藏，示例如下：

//顯示工具欄

$('#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

。