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

ホームページ

ウェブフロントエンド

ブートストラップのチュートリアル

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 つのトーストだけを表示したい場合は、トーストに配置スタイルを設定します。

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

Bootstrap 11 mins ago

Hello, world! This is a toast message.

上記は公式の例です。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 までご連絡ください。

ブートストラップの分解：それが何であり、なぜそれが重要なのかApr 14, 2025 am 12:05 AM

bootstrapisafree、open-sourcessframeworkthatsthatssponsiveandmobile-firstwebitedevelopment。

ブートストラップ：Webデザインを簡単にしますApr 13, 2025 am 12:10 AM

Webデザインがブートストラップを簡単にするものは何ですか？そのプリセットコンポーネント、レスポンシブデザイン、豊富なコミュニティサポート。 1）プリセットコンポーネントライブラリとスタイルにより、開発者は複雑なCSSコードの作成を避けることができます。 2）ビルトイングリッドシステムは、レスポンシブレイアウトの作成を簡素化します。 3）コミュニティサポートは、豊富なリソースとソリューションを提供します。

Bootstrapの影響：Web開発の加速Apr 12, 2025 am 12:05 AM

BootstrapはWeb開発を加速し、事前に定義されたスタイルとコンポーネントを提供することにより、開発者は迅速にレスポンシブWebサイトを構築できます。 1）プロジェクトの数日以内に基本的なレイアウトを完了するなど、開発時間を短縮します。 2）SASS変数とミキシンを通じて、ブートストラップにより、カスタムスタイルが特定のニーズを満たすことができます。 3）CDNバージョンを使用すると、パフォーマンスを最適化し、負荷速度を向上させることができます。

ブートストラップの理解：コアの概念と機能Apr 11, 2025 am 12:01 AM

Bootstrapはオープンソースのフロントエンドフレームワークであり、その主な機能は、開発者がレスポンシブWebサイトを迅速に構築できるようにすることです。 1）複雑なUI効果の実装を容易にするために、事前定義されたCSSクラスとJavaScriptプラグインを提供します。 2）ブートストラップの作業原則は、メディアクエリを通じてレスポンシブデザインを実現するために、そのCSSおよびJavaScriptコンポーネントに依存しています。 3）使用の例には、ボタンの作成などの基本的な使用法や、カスタムスタイルなどの高度な使用法が含まれます。 4）一般的なエラーには、クラス名のスペルミスやファイルの導入が誤っています。ブラウザ開発者ツールを使用してデバッグすることをお勧めします。 5）パフォーマンスの最適化は、カスタムビルドツールを通じて実現できます。

ブートストラップディープダイブ：レスポンシブデザインと高度なレイアウト技術Apr 10, 2025 am 09:35 AM

ブートストラップは、グリッドシステムとメディアクエリを介してレスポンシブデザインを実装し、さまざまなデバイスにウェブサイトを適合させます。 1.事前定義されたクラス（COL-SM-6など）を使用して、列の幅を定義します。 2。グリッドシステムは12列に基づいており、合計が12。3を超えないことに注意する必要があります。ブレークポイント（SM、MD、LGなど）を使用して、異なる画面サイズの下のレイアウトを定義します。

ブートストラップインタビューの質問：夢のフロントエンドの仕事を着陸させますApr 09, 2025 am 12:14 AM

Bootstrapは、レスポンシブWebサイトとアプリケーションを迅速に開発するためのオープンソースのフロントエンドフレームワークです。 1.レスポンシブ設計、一貫したUIコンポーネント、迅速な発展の利点を提供します。 2。グリッドシステムは、12列構造に基づいてフレックスボックスレイアウトを使用し、.container、.row、.col-sm-6などのクラスを通じて実装されています。 3.カスタムスタイルは、SASS変数を変更するか、CSSを上書きすることで実装できます。 4.一般的に使用されるJavaScriptコンポーネントには、モーダルボックス、カルーセル図、折りたたみが含まれます。 5.最適化パフォーマンスは、必要なコンポーネントのみをロードし、CDNを使用し、マージファイルを圧縮することで実現できます。

Bootstrap＆JavaScriptの統合：動的な機能と機能Apr 08, 2025 am 12:10 AM

BootstrapとJavaScriptをシームレスに統合して、Webページに動的な機能を与えることができます。 1）JavaScriptを使用して、モーダルボックスやナビゲーションバーなどのブートストラップコンポーネントを操作します。 2）jQueryが正しくロードされていることを確認し、一般的な統合の問題を回避します。 3）イベント監視とDOM操作を通じて、複雑なユーザーの相互作用と動的効果を実現します。

ブートストラップ検索バーを取得する方法Apr 07, 2025 pm 03:33 PM

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

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

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

ホットツール

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、