首頁 >web前端 >Bootstrap教程 >深入了解Bootstrap中的彈出框

深入了解Bootstrap中的彈出框

青灯夜游
青灯夜游轉載
2021-04-15 11:14:052070瀏覽

本篇文章給大家詳細介紹一下Bootstrap中的彈出框。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

深入了解Bootstrap中的彈出框

表面上看,彈出框其實就是一種特殊的提示框,只是多了一個標題而已。但實際上,還是有不同之處的。

基本用法

在製作提示框(tooltip)時,可以使用

於是最基本的用法如下

1、透過 title 屬性的值來定義標題(也可以使用自訂屬性src-title 來設定標題),title優先權高

2、透過data-content屬性來設定內容

3、設定data-toggle="popover"

深入了解Bootstrap中的彈出框

深入了解Bootstrap中的彈出框

# 4.使用以下js程式碼進行觸發

$('[data-toggle="popover"]').popover();
<button>点我弹出/隐藏弹出框</button>
<script>
$(function(){
    $(&#39;[data-toggle="popover"]&#39;).popover();

});    
</script>

#屬性參數

在彈出方塊製作時,可以在HTML中定義下表所列的自訂屬性

深入了解Bootstrap中的彈出框[注意]data-palcement預設居右顯示,而不是居上顯示

##

<body style="margin-top:100px">
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="上侧" >上侧</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" title="标题" data-content="下侧" >下侧</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="无动画" data-animation="false" >无动画</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="有动画" >有动画</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="hover触发" data-trigger="hover">hover触发</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="click触发" data-trigger="click">click触发</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="不延迟">不延迟</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="延迟500ms" data-delay="500">延迟500ms</button>
<script>
$(function(){
    $(&#39;[data-toggle="popover"]&#39;).popover();

});    
</script>

JS觸發深入了解Bootstrap中的彈出框

popover的JS用法與tooltip的用法一樣,支援使用options物件的方法來向popover()方法傳參

$(element).popover(options);
options物件裡的參數包括amimation、html、placement、selector、original-title、title、trigger、delay、container、template

詳細情況

移步至此

##

<body style="margin-top:50px">
<button type="button" class="btn btn-default" data-toggle="popover" >按钮</button>
<script>
$(function(){
    $(&#39;[data-toggle="popover"]&#39;).popover({
        title:"我是标题",
        content:&#39;我是内容&#39;
    });
});    
</script>
深入了解Bootstrap中的彈出框

【關鍵字】

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

<body style="margin-top:100px;">
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="内容" id="btn1">按钮1</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="内容"  id="btn2">按钮2</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="内容"  id="btn3">按钮3</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="内容"  id="btn4">按钮4</button>
<script>
$(function(){
    $(&#39;#btn1&#39;).popover(&#39;show&#39;);//显示弹出框
    $(&#39;#btn2&#39;).popover(&#39;hide&#39;);//关闭弹出框
    $(&#39;#btn3&#39;).popover(&#39;toggle&#39;);//反转弹出框
    $(&#39;#btn4&#39;).popover(&#39;destroy&#39;);//隐藏并销毁弹出框
});    
</script>

【事件】

#該外掛程式支援5種類型的事件訂閱

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触发后,触发该事件
<body style="margin-top:50px;">
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" title="标题" data-content="内容" id="btn">按钮</button>
<script>
$(function(){
    $(&#39;#btn&#39;).popover();
    $("#btn").on("show.bs.popover",function(e){
        $(this).html(&#39;关闭&#39;);    
    }).on("hide.bs.popover",function(e){
        $(this).html(&#39;打开&#39;);
    })

});    
</script>

####比較提示框#########1、提示框tooltip 的預設觸發事件是 hover 和 focus,而彈出框popover 是 click######2、提示框tooltip 只有一個內容(title),而彈出框不僅可以設定標題(title)還可以設定內容(content)######3、提示框tooltip 預設居上顯示,而彈出框popover 預設居右顯示######4、顯示範本不同######提示框tooltip的範本:###
<div>
    <div></div>
    <div></div>
</div>
###彈出框popover的範本:###
<div>
    <div></div>
    <h3></h3>
    <div></div>
</div>
###更多程式相關知識,請造訪:###程式設計教學###! ! ###

以上是深入了解Bootstrap中的彈出框的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:cnblogs.com。如有侵權,請聯絡admin@php.cn刪除