コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
目次
1 トーストの例
2 オプションの設定
3 半透明
4 スタッキング
5 カスタム コンテンツ
6 カラー スキーム
7 表示位置の設定
ホームページ ウェブフロントエンド ブートストラップのチュートリアル Bootstrap で Toast コンポーネントを使用するにはどうすればよいですか? （説明例）

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

青灯夜游
青灯夜游
Dec 08, 2021 pm 07:19 PM
bootstrap

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  ></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  ></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 >
<label for="selectToastPlacement">Toast placement</label>
<select  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" >
<div  id="toastPlacement">
<div >
<div >
  <img class="rounded me-2 lazy"  src="/static/imghw/default1.png"  data-src="..."    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 コンポーネントを使用するにはどうすればよいですか? （説明例）

ブートストラップの詳細については、ブートストラップの基本チュートリアルを参照してください。 ！

以上がBootstrap で Toast コンポーネントを使用するにはどうすればよいですか? （説明例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
4週間前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最高のグラフィック設定
4週間前 By 尊渡假赌尊渡假赌尊渡假赌
アサシンのクリードシャドウズ：シーシェルリドルソリューション
2週間前 By DDD
R.E.P.O.誰も聞こえない場合はオーディオを修正する方法
4週間前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.チャットコマンドとそれらの使用方法
4週間前 By 尊渡假赌尊渡假赌尊渡假赌
もっと見る

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7522
15
CakePHP チュートリアル
1378
52
Steamのアカウント名の形式は何ですか
81
11
Win11 Activation Key Permanent
54
19
NYTの接続はヒントと回答です
21
72
もっと見る
Related knowledge
ブートストラップ検索バーを取得する方法 ブートストラップ検索バーを取得する方法 Apr 07, 2025 pm 03:33 PM

ブートストラップを使用して検索バーの値を取得する方法：検索バーのIDまたは名前を決定します。 JavaScriptを使用してDOM要素を取得します。要素の値を取得します。必要なアクションを実行します。

ブートストラップの垂直センタリングを行う方法 ブートストラップの垂直センタリングを行う方法 Apr 07, 2025 pm 03:21 PM

ブートストラップを使用して垂直センタリングを実装します。FlexBoxメソッド：D-Flex、Justify-Content-Center、Align-Items-Centerクラスを使用して、FlexBoxコンテナに要素を配置します。 ALIGN-ITEMS-CENTERクラス方法：FlexBoxをサポートしていないブラウザの場合、親要素の高さが定義されている場合、Align-Items-Centerクラスを使用します。

ブートストラップにスプリットラインを書く方法 ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップに写真を挿入する方法 ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

VueでBootstrapの使用方法 VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

ブートストラップのサイズを変更する方法 ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

ブートストラップのフレームワークをセットアップする方法 ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップボタンの使用方法 ブートストラップボタンの使用方法 Apr 07, 2025 pm 03:09 PM

ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

See all articles