詳解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刪除

Bootstrap：使網頁設計更容易Apr 13, 2025 am 12:10 AM

Bootstrap讓網頁設計更容易的原因是其預設組件、響應式設計和豐富的社區支持。 1)預設組件庫和样式讓開發者無需編寫複雜的CSS代碼；2)內置網格系統簡化了響應式佈局的創建；3)社區支持提供了豐富的資源和解決方案。

Bootstrap的影響：加速網絡開發Apr 12, 2025 am 12:05 AM

Bootstrap加速了Web開發，通過提供預定義的樣式和組件，開發者可以快速搭建響應式網站。 1)它縮短了開發時間，例如在項目中幾天內完成基本佈局。 2)通過Sass變量和mixins，Bootstrap允許定製樣式以滿足特定需求。 3)使用CDN版本可以優化性能，提高加載速度。

理解引導：核心概念和功能Apr 11, 2025 am 12:01 AM

Bootstrap是一個開源的前端框架，主要作用是幫助開發者快速構建響應式網站。 1)它提供了預定義的CSS類和JavaScript插件，方便實現複雜的UI效果。 2)Bootstrap的工作原理依賴於其CSS和JavaScript組件，通過媒體查詢實現響應式設計。 3)使用示例包括基本用法，如創建按鈕，以及高級用法，如自定義樣式。 4)常見錯誤包括類名拼寫錯誤和未正確引入文件，建議使用瀏覽器開發者工具調試。 5)性能優化可通過自定義構建工具實現，最佳實踐包括使用語義化HTML和Bootstrap的預定義

Bootstrap Deep Dive：響應式設計和高級佈局技術Apr 10, 2025 am 09:35 AM

Bootstrap通過網格系統和媒體查詢實現響應式設計，使網站適應不同設備。 1.使用預定義類（如col-sm-6）定義列寬。 2.網格系統基於12列，需注意總和不超12。3.使用斷點（如sm、md、lg）定義不同屏幕尺寸下的佈局。

Bootstrap面試問題：降落您夢想的前端工作Apr 09, 2025 am 12:14 AM

Bootstrap是一套開源的前端框架，用於快速開發響應式網站和應用。 1.它提供了響應式設計、一致的UI組件和快速開發的優勢。 2.網格系統使用flexbox佈局，基於12列結構，通過.container、.row和.col-sm-6等類實現。 3.自定義樣式可以通過修改SASS變量或覆蓋CSS實現。 4.常用JavaScript組件包括模態框、輪播圖和折疊。 5.優化性能可以通過只加載必要組件、使用CDN和壓縮合併文件來實現。

Bootstrap＆JavaScript集成：動態功能和功能Apr 08, 2025 am 12:10 AM

Bootstrap和JavaScript可以無縫整合，賦予網頁動態功能。 1）使用JavaScript操作Bootstrap組件，如模態框和導航欄。 2）確保jQuery正確加載，避免常見集成問題。 3）通過事件監聽和DOM操作實現複雜用戶交互和動態效果。

bootstrap搜索欄怎麼獲取Apr 07, 2025 pm 03:33 PM

如何使用 Bootstrap 獲取搜索欄的值：確定搜索欄的 ID 或名稱。使用 JavaScript 獲取 DOM 元素。獲取元素的值。執行所需的操作。

bootstrap怎麼插入圖片Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

See all articles