Bootstrap で Toast コンポーネントを使用するにはどうすればよいですか? （説明例）-ブートストラップのチュートリアル-php.cn

Bootstrap で Toast コンポーネントを使用するにはどうすればよいですか? （説明例）

青灯夜游

リリース： 2021-12-08 19:19:55

転載

5674 人が閲覧しました

Bootstrap で Toast コンポーネントを使用するにはどうすればよいですか? Bootstrap5 のトーストメッセージ Toasts コンポーネントの使い方を以下の記事で紹介しますので、ご参考になれば幸いです。

Bootstrap で Toast コンポーネントを使用するにはどうすればよいですか? （説明例）

1 トーストの例

トーストは、モバイルおよびデスクトップのオペレーティングシステムを模倣するように設計された軽量の通知です。プッシュ通知が一般的になってきました。フレックスボックスで構築されているため、位置合わせや配置が簡単です。 [関連する推奨事項: "ブートストラップチュートリアル"]

ポップアッププロンプトと同様に、トーストメッセージもそれ自体で初期化する必要があります。公式サイトが無効海外サイトで実行可能な方法を見つけました。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>Popovers</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <button type="button" class="btn btn-primary" id="liveToastBtn">显示吐司消息</button>
        <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">
          <div id="liveToast" class="toast hide" data-bs-animation="false" role="alert" aria-live="assertive" aria-atomic="true">
            <div>
            <strong>吐司消息提示</strong>
            <small>11 mins ago</small>
            <button type="button" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div>
            你有一条短消息！
            </div>
          </div>
        </div>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
     <script>
      document.querySelector("#liveToastBtn").onclick = function() {
        new bootstrap.Toast(document.querySelector(&#39;.toast&#39;)).show();
      }
   </script>
  </body>
</html>

ログイン後にコピー

Bootstrap で Toast コンポーネントを使用するにはどうすればよいですか? （説明例）

2 オプションの設定

オプションは、データ属性または JavaScript を通じて渡すことができます。データ属性の場合は、data-bs-animation="" のようにオプション名を data-bs- に追加します。

data-bs-animation="true" CSS フェードトランジション効果をトーストに適用します
data-bs-autohide="true" トーストを自動的に非表示になります
data -bs-lay="5000", トーストを 5 秒間非表示にする遅延 (デフォルト単位: ミリ秒)

上記の値はデフォルト値です。研削効果に満足している場合は、次の操作を行ってください。 27.3.1 の例では、スクリーンショットを撮るのに便利なように、トーストを自動的に非表示にしないように data-bs-autohide="false" を設定しています。そうでないと、メッセージボックスが表示されます。マウスがどこかをクリックしている限り消えます。

3 半透明

トーストは半透明にすることもできるため、表示されるあらゆるものに溶け込みます。 CSS 属性のbackground-filterをサポートするブラウザも、トーストの下の要素をぼかそうとします。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>吐司消息</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <button type="button" class="btn btn-primary" id="liveToastBtn">显示吐司消息</button>
        <div role="alert" aria-live="assertive" aria-atomic="true">
          <div>
          <strong>半透明吐司</strong>
          <small>11 mins ago</small>
          <button type="button" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div>
            你有一条短消息！
          </div>
          </div>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
     <script>
      document.querySelector("#liveToastBtn").onclick = function() {
        new bootstrap.Toast(document.querySelector(&#39;.toast&#39;)).show();
      }
   </script>
  </body>
</html>

ログイン後にコピー

Bootstrap で Toast コンポーネントを使用するにはどうすればよいですか? （説明例）

4 スタッキング

トーストを toast-container コンテナにパッケージすると、垂直方向にスペースが追加され、トーストを積み重ねることができます。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>吐司消息</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <button type="button" class="btn btn-primary" id="liveToastBtn1">显示吐司消息1</button>
        <button type="button" class="btn btn-primary" id="liveToastBtn2">显示吐司消息2</button>
        <div>
          <div id="toast1" role="alert" aria-live="assertive" aria-atomic="true">
          <div>
          <strong>吐司消息</strong>
          <small>刚刚发送</small>
          <button type="button" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div>
          第一条消息
          </div>
          </div>
          
          <div  id="toast2" role="alert" aria-live="assertive" aria-atomic="true">
          <div>
          <strong>吐司消息</strong>
          <small>2分钟前</small>
          <button type="button" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div>
            第二条消息
          </div>
          </div>
        </div>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
     <script>
       document.querySelector("#liveToastBtn1").onclick = function() {
        new bootstrap.Toast(document.querySelector(&#39;#toast1&#39;)).show();
      }
      document.querySelector("#liveToastBtn2").onclick = function() {
        new bootstrap.Toast(document.querySelector(&#39;#toast2&#39;)).show();
      }
   </script>
  </body>
</html>

ログイン後にコピー

Bootstrap で Toast コンポーネントを使用するにはどうすればよいですか? （説明例）

5 カスタムコンテンツ

子コンポーネントを削除したり、共通クラスを調整したり、マークアップを追加したりして、トーストをカスタマイズします。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>吐司消息</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <button type="button" class="btn btn-primary" id="liveToastBtn">显示吐司消息</button>
        <div role="alert" aria-live="assertive" aria-atomic="true">
            <div>
            邀请你穿越到三国！
            <div class="mt-2 pt-2 border-top">
            <button type="button" class="btn btn-primary btn-sm">接受邀请</button>
            <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">关闭</button>
            </div>
            </div>
         </div>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
     <script>
      document.querySelector("#liveToastBtn").onclick = function() {
        new bootstrap.Toast(document.querySelector(&#39;.toast&#39;)).show();
      }
   </script>
  </body>
</html>

ログイン後にコピー

Bootstrap で Toast コンポーネントを使用するにはどうすればよいですか? （説明例）

6 カラースキーム

上記の例に基づいて、色の一般カテゴリを通じてさまざまなトーストカラースキームを作成することもできます。次に、トーストに bg-danger と text-white を追加し、閉じるボタンに text-white を追加します。エッジを明確に表示するために、デフォルトの境界線は border-0 によって削除されます。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>吐司消息</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <button type="button" class="btn btn-primary" id="liveToastBtn">显示吐司消息</button>

        <div class="toast align-items-center text-white bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
            <div>
            <div>
            这里是红色背景的
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
     <script>
      document.querySelector("#liveToastBtn").onclick = function() {
        new bootstrap.Toast(document.querySelector(&#39;.toast&#39;)).show();
      }
   </script>
  </body>
</html>

ログイン後にコピー

Bootstrap で Toast コンポーネントを使用するにはどうすればよいですか? （説明例）

7 表示位置の設定

デフォルトのトーストメッセージはブラウザの右下隅に表示されます。要件に応じてカスタム CSS を使用して、トースト位置を指定します。通常、右上隅は上部中央と同様に通知に使用されます。一度に 1 つのトーストだけを表示したい場合は、トーストに配置スタイルを設定します。

<form>
<div class="mb-3">
<label for="selectToastPlacement">Toast placement</label>
<select class="form-select mt-2" id="selectToastPlacement">
<option value="" selected>Select a position...</option>
<option value="top-0 start-0">Top left</option>
<option value="top-0 start-50 translate-middle-x">Top center</option>
<option value="top-0 end-0">Top right</option>
<option value="top-50 start-0 translate-middle-y">Middle left</option>
<option value="top-50 start-50 translate-middle">Middle center</option>
<option value="top-50 end-0 translate-middle-y">Middle right</option>
<option value="bottom-0 start-0">Bottom left</option>
<option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
<option value="bottom-0 end-0">Bottom right</option>
</select>
</div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
<div class="toast-container position-absolute p-3" id="toastPlacement">
<div class="toast">
<div class="toast-header">
  <img src="..." class="rounded me-2" alt="...">
  <strong class="me-auto">Bootstrap</strong>
  <small>11 mins ago</small>
</div>
<div class="toast-body">
  Hello, world! This is a toast message.
</div>
</div>
</div>
</div>

ログイン後にコピー

上記は公式の例です。Bootstrap5 Toastsドライバーの JS コードが見つかりませんでした。ここでは上記のコードを元に左上に表示されるように修正してみました。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>吐司消息</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <button type="button" class="btn btn-primary" id="liveToastBtn">显示吐司消息</button>
        <div class="position-fixed top-0 start-0 p-3" style="z-index: 5">
          <div id="liveToast" class="toast hide" data-bs-animation="false" role="alert" aria-live="assertive" aria-atomic="true">
            <div>
            <strong>吐司消息提示</strong>
            <small>11 mins ago</small>
            <button type="button" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div>
            你有一条短消息！
            </div>
          </div>
        </div>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
     <script>
      document.querySelector("#liveToastBtn").onclick = function() {
        new bootstrap.Toast(document.querySelector(&#39;.toast&#39;)).show();
      }
   </script>
  </body>
</html>

ログイン後にコピー

Bootstrap で Toast コンポーネントを使用するにはどうすればよいですか? （説明例）