詳解Bootstrap中的訊息提示框-Bootstrap教程-PHP中文網

首頁

web前端

Bootstrap教程

詳解Bootstrap中的訊息提示框

青灯夜游

Apr 14, 2021 am 10:19 AM

bootstrap

這篇文章給大家詳細介紹一下Bootstrap中的資訊提示框。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

詳解Bootstrap中的訊息提示框

提示框是一個比較常見的功能，一般來說是滑鼠移動到特定元素上時，顯示相關的提示語。【相關推薦：《bootstrap教學》】

基本用法

Bootstrap框架中的提示框，結構非常簡單，常常使用的是按鈕

1、透過 title 屬性的值來定義提示訊息(也可以使用自訂屬性 src-title 來設定提示訊息) ，title屬性的優先順序高

2、透過 data-placement 自訂屬性來控制提示資訊框的位置，根據四種不同的位置，data-placement有四個值：top、right、bottom和left，分別表示提示框出現的位置在頂部、右邊、底部和左邊

3、還有一個最重要的參數不可缺少，data-toggle="tooltip"

【觸發方式】

　　Bootstrap框架中的提示框的觸發方式和前面介紹的插件略有不同。不能直接透過自訂的屬性 data- 來觸發。必須得依賴JavaScript的程式碼觸發

　　最簡單的觸發方式如下：

$(function(){
    $(&#39;[data-toggle="tooltip"]&#39;).tooltip();
});






<script>
$(function(){
    $(&amp;#39;[data-toggle=&quot;tooltip&quot;]&amp;#39;).tooltip();
});    
</script>

詳解Bootstrap中的訊息提示框

屬性參數

　　提示框元件提供了7個自訂屬性參數，用來對提示框進行設定

詳解Bootstrap中的訊息提示框








<script>
$(function(){
    $(&amp;#39;[data-toggle=&quot;tooltip&quot;]&amp;#39;).tooltip();
});    
</script>

JS觸發

　　除了上面所說的最簡單的一種觸發方法，也可以單獨指定一個元素，在該元素上呼叫Tooltip元件，並且還可以提供各種javascript形式的自訂參數，而無需使用以data-開頭的元素自訂屬性

$(element).tooltip(options);

詳解Bootstrap中的訊息提示框

<button type="button" class="btn btn-default" data-toggle="tooltip" >按钮</button>
<script>
$(function(){
    $(&#39;[data-toggle="tooltip"]&#39;).tooltip({
        title:"我是提示语",
        placement:&#39;right&#39;
    });
});    
</script>

##【關鍵字】

　　除了使用options對象，還可以使用關鍵字，'show'、'hide'、'toggle'、'destroy'

詳解Bootstrap中的訊息提示框

<body   style="max-width:90%">
<button type="button" class="btn btn-default" data-toggle="tooltip" title="提示信息" id="btn1">按钮1</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="提示信息"  id="btn2">按钮2</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="提示信息"  id="btn3">按钮3</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="提示信息"  id="btn4">按钮4</button>
<script>
$(function(){
    $(&#39;#btn1&#39;).tooltip(&#39;show&#39;);//显示提示语
    $(&#39;#btn2&#39;).tooltip(&#39;hide&#39;);//关闭提示语
    $(&#39;#btn3&#39;).tooltip(&#39;toggle&#39;);//反转提示语
    $(&#39;#btn4&#39;).tooltip(&#39;destroy&#39;);//隐藏并销毁提示语
});    
</script>
</body>

【事件】

　　此外掛支援5種類型的事件訂閱詳解Bootstrap中的訊息提示框

show.bs.tooltip        show方法调用之后立即触发该事件
shown.bs.tooltip   　　 此事件在tooltip已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发
hide.bs.tooltip        hide方法调用之后立即触发该事件。
hidden.bs.tooltip    　此事件在tooltip被隐藏（并且同时在 CSS 过渡效果完成）之后被触发
inserted.bs.tooltip    当tooltip模板加载到DOM中上时，在show.bs.tooltip触发后，触发该事件

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="提示信息" id="btn">按钮</button>
<script>
$(function(){
    $(&#39;#btn&#39;).tooltip();
    $("#btn").on("show.bs.tooltip",function(e){
        $(this).html(&#39;关闭提示&#39;);    
    }).on("hide.bs.tooltip",function(e){
        $(this).html(&#39;打开提示&#39;);
    })

});    
</script>

更多程式相關知識，請造訪：

程式設計影片###！！ ###

以上是詳解Bootstrap中的訊息提示框的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：博客园。如有侵權，請聯絡admin@php.cn刪除

引導和反應：創建響應式Web應用程序May 03, 2025 am 12:13 AM

如何利用Bootstrap和React打造響應式Web應用？通過結合Bootstrap的CSS框架和React的組件化架構，可以創建現代、靈活且易於維護的Web應用。具體步驟包括：1）導入Bootstrap的CSS文件並使用其類樣式化React組件；2）利用React的組件化管理狀態和邏輯；3）按需加載Bootstrap樣式以優化性能；4）使用React的Hooks和Bootstrap的JavaScript組件創建動態界面。

Bootstrap：前端開髮變得更加容易May 02, 2025 am 12:10 AM

Bootstrap是一種開源的前端框架，幫助開發者快速構建響應式網站。 1)它提供了預定義的樣式和組件，如網格系統和導航欄。 2)通過CSS和JavaScript文件實現樣式和動態交互。 3)基本用法是引入文件並使用類名構建頁面。 4)高級用法包括通過Sass自定義樣式。 5)常見問題包括樣式衝突和JavaScript組件問題，可通過開發者工具和模塊化管理解決。 6)性能優化建議選擇性引入模塊和合理使用網格系統。

React和Bootstrap：理想的組合？May 01, 2025 am 12:01 AM

React和Bootstrap是理想的搭配。 1)使用Bootstrap的CSS類和JavaScript組件，2)通過React-Bootstrap或reactstrap集成，3)按需加載和優化渲染性能，可以構建高效美觀的用戶界面。

使用Bootstrap：創建現代和移動優先的網站Apr 30, 2025 am 12:08 AM

Bootstrap是用於創建現代化、響應式、且用戶友好的網站的開源前端框架。 1)它提供網格系統和預定義樣式，簡化佈局和開發。 2)移動優先設計確保兼容性和性能。 3)通過自定義樣式和組件，網站可個性化。 4)性能優化和最佳實踐包括選擇性加載和響應式圖像。 5)常見錯誤如佈局問題和样式衝突可通過調試技巧解決。

Bootstrap和Web設計：最佳實踐和技術Apr 29, 2025 am 12:15 AM

Bootstrap是由Twitter開發的開源前端框架，適合快速構建響應式網站。 1)它的網格系統基於12列結構，允許創建靈活的佈局。 2)響應式設計功能使網站適應不同設備。 3)基本用法包括構建導航欄，高級用法涉及卡片組件。 4)常見錯誤如網格系統誤用可通過正確設置列寬避免。 5)性能優化包括只加載必要組件、使用CDN和文件壓縮。 6)最佳實踐強調代碼整潔、自定義樣式和響應式設計。

Bootstrap和React：結合Web開發框架Apr 28, 2025 am 12:08 AM

結合Bootstrap和React的原因是它們的互補性：1.Bootstrap提供預定義的樣式和組件，簡化UI設計；2.React通過組件化開發和虛擬DOM提升效率和性能。結合使用可以享受快速UI構建和復雜交互管理。

從零到bootstrap：快速入門Apr 27, 2025 am 12:07 AM

Bootstrap是一個基於HTML、CSS和JavaScript的開源前端框架，旨在幫助開發者快速構建響應式網站。它的設計理念是“移動優先”，提供了豐富的預定義組件和工具，如網格系統、按鈕、表單、導航欄等，簡化前端開發過程，提高開發效率，並確保網站的響應性和一致性。使用Bootstrap可以從一個簡單的頁面開始，逐步添加高級組件如卡片和模態框，優化性能的最佳實踐包括自定義Bootstrap、使用CDN和避免過度使用類名。

React和Bootstrap：增強用戶界面設計Apr 26, 2025 am 12:18 AM

React和Bootstrap可以無縫集成來提升用戶界面設計。 1)安裝依賴包：npminstallbootstrapreact-bootstrap。 2)導入CSS文件：import'bootstrap/dist/css/bootstrap.min.css'。 3)使用Bootstrap組件，如按鈕和導航欄。通過這種結合，開發者可以利用React的靈活性和Bootstrap的樣式庫，創建美觀且高效的用戶界面。

See all articles