Bootstrap の情報プロンプトボックスの詳細な説明-ブートストラップのチュートリアル-php.cn

Bootstrap の情報プロンプトボックスの詳細な説明

青灯夜游

リリース： 2021-04-14 19:47:53

転載

2945 人が閲覧しました

この記事では、Bootstrap の情報プロンプトボックスについて詳しく説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Bootstrap の情報プロンプトボックスの詳細な説明

プロンプトボックスは比較的一般的な機能で、一般に、マウスを特定の要素の上に移動すると、関連するプロンプトが表示されます。 [関連する推奨事項: "bootstrap チュートリアル "]

基本的な使用法

Bootstrap フレームワークのプロンプトボックスの構造は非常に単純で、多くの場合、ボタン

1. title 属性の値を使用してプロンプト情報を定義します (カスタム属性 src-title を使用することもできます)プロンプト情報を設定するため)、title 属性の優先順位は高くなります

2。data-placement カスタム属性を使用して、プロンプト情報ボックスの位置を制御します。4 つの異なる位置に従って、data-placement には 4 つの属性があります。値: 上、右、下、左。それぞれ、プロンプトボックスが上、右、下、左に表示されることを示します。

3. 不可欠な最も重要なパラメータである data-toggle= もあります。ツールチップ"

[トリガー方法]

Bootstrap フレームワークのプロンプトボックスのトリガー方法は、以前に紹介したプラグインとは少し異なります。カスタム属性データを介して直接トリガーすることはできません。 JavaScript コードのトリガーに依存する必要があります。

最も単純なトリガー方法は次のとおりです。

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

ログイン後にコピー






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

ログイン後にコピー

Bootstrap の情報プロンプトボックスの詳細な説明

##属性パラメータープロンプトボックスコンポーネントは、プロンプトボックスを設定するための 7 つのカスタム属性パラメータを提供します。








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

ログイン後にコピー

Bootstrap の情報プロンプトボックスの詳細な説明 JS トリガー

上記の最も単純なトリガーメソッドに加えて、要素を個別に指定し、その要素で Tooltip コンポーネントを呼び出し、JavaScript の形式でさまざまなカスタムパラメーターを提供することもできます。要素のカスタム属性を使用する必要はありません。 data-

$(element).tooltip(options);

ログイン後にコピー

<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>

ログイン後にコピー

Bootstrap の情報プロンプトボックスの詳細な説明 [キーワード]

オプションオブジェクトの使用に加えて、「表示」、「非表示」、「切り替え」、「破棄」というキーワードも使用できます。【イベント】

このプラグインは 5 種類のイベントサブスクリプションをサポートしています

<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>

ログイン後にコピー

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触发后，触发该事件

ログイン後にコピー

#プログラミング関連の知識については、 Bootstrap の情報プロンプトボックスの詳細な説明プログラミングビデオをご覧ください。