Heim > Artikel > Web-Frontend > Ausführliche Erklärung zur Verwendung der Warnbox-Komponente in Bootstrap

Ausführliche Erklärung zur Verwendung der Warnbox-Komponente in Bootstrap

青灯夜游nach vorne: 2021-11-29 19:13:072602Durchsuche

Wie öffne ich das Warnfeld (Benachrichtigungen) in

Bootstrap? Im folgenden Artikel wird die Verwendung der Bootstrap5-Warnbox-Komponente anhand von Codebeispielen erläutert. Ich hoffe, dass er für Sie hilfreich ist.

Ausführliche Erklärung zur Verwendung der Warnbox-Komponente in Bootstrap

1 Warnungen

Wenn Sie das Wort Warnungen sehen, verwechseln Sie es nicht mit dem Warnmeldungsfenster in js. Die beiden haben nichts miteinander zu tun. Die offizielle Definition der Bootstrap5-Warnbox besteht darin, kontextbezogene Feedbackmeldungen für typische Benutzervorgänge bereitzustellen und eine kleine Anzahl verfügbarer und flexibler Warnmeldungen bereitzustellen. Die offizielle Definition ist etwas verwirrend. Im Allgemeinen wird das Warnfeld eher als Nachrichtenerinnerung bezeichnet. Es erinnert normalerweise daran, dass Sie mehrere ungelesene Nachrichten in der unteren rechten Ecke oder in der oberen rechten Ecke des Fensters haben. [Verwandte Empfehlung: „Bootstrap-Tutorial“]

<!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>
      <div class="alert alert-warning alert-dismissible fade show" role="alert">
        <strong>老刘!</strong> 你收到一条站内短信，<a href="#">点此查看</a>
        <button type="button" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Ausführliche Erklärung zur Verwendung der Warnbox-Komponente in Bootstrap

2 Zusammensetzung der Warnbox

Die Warnbox ist relativ einfach und besteht aus einem Container und einer Schaltfläche zum Schließen, wobei die Schaltfläche zum Schließen weggelassen und geschlossen werden kann regelmäßig über js, zum Beispiel auf 30 Sekunden Anzeige einstellen und dann ausschalten. Unten finden Sie das einfachste Beispiel für ein Nachrichtenfeld.

<!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 class="alert alert-primary">
        老刘!你收到一条站内短信。
        </div>

     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Ausführliche Erklärung zur Verwendung der Warnbox-Komponente in Bootstrap

3 Farbe der Alarmbox

Im obigen Beispiel gibt es zusätzlich zur Verwendung von Alert im Container, um dies als Warnbox zu markieren, auch eine Alert-Primary-Klasse, um die Hintergrundfarbe der Alarmbox festzulegen . Alle gängigen Farben für Alarmboxen sind unten aufgeführt.

<!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>
      <div class="alert alert-primary" role="alert">
        alert-primary
        </div>
        <div class="alert alert-secondary" role="alert">
        alert-secondary
        </div>
        <div class="alert alert-success" role="alert">
        alert-success
        </div>
        <div class="alert alert-danger" role="alert">
            alert-danger
        </div>
        <div class="alert alert-warning" role="alert">
            alert-warning
        </div>
        <div class="alert alert-info" role="alert">
            alert-info
        </div>
        <div class="alert alert-light" role="alert">
            alert-light
        </div>
        <div class="alert alert-dark" role="alert">
            alert-dark
        </div>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Ausführliche Erklärung zur Verwendung der Warnbox-Komponente in Bootstrap

4 Linkfarben im Alarmfeld

4.1 Automatische Zuordnung

Verwenden Sie die Dienstprogrammklasse .alert-link, um in jeder Warnung schnell Links mit passenden Farben bereitzustellen. Im Folgenden gebe ich nur einen Vergleich der drei Farben.

<!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>
      <div class="alert alert-primary" role="alert">
        A simple primary alert with <a href="#">an example link</a>. Give it a click if you like.
        </div>
        <div class="alert alert-secondary" role="alert">
        A simple secondary alert with <a href="#">an example link</a>. Give it a click if you like.
        </div>
        <div class="alert alert-success" role="alert">
        A simple success alert with <a href="#">an example link</a>. Give it a click if you like.
        </div>

        <br><br>
        <div class="alert alert-primary" role="alert">
            A simple primary alert with <a href="#">an example link</a>. Give it a click if you like.
            </div>
            <div class="alert alert-secondary" role="alert">
            A simple secondary alert with <a href="#">an example link</a>. Give it a click if you like.
            </div>
            <div class="alert alert-success" role="alert">
            A simple success alert with <a href="#">an example link</a>. Give it a click if you like.
            </div>
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Ausführliche Erklärung zur Verwendung der Warnbox-Komponente in Bootstrap

4.2 Verwenden Sie die farbige Link-Klasse

In den farbigen Links in der Assistentenkategorie von „Bootstrap5 Chinese Manual“ können Sie verschiedene link-*类对链接着色。与text-* Klassen verwenden, diese Klassen haben: Hover und: Fokuszustände. Farbige Links gelten nicht nur für Warnfelder und gelten für alle Links, daher werden die Farben der Warnfelder unten nicht verwendet. Die folgenden Farben sind unterschiedlich:

<!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>
        <div><a href="#">Primary link</a></div>
        <div><a href="#">Secondary link</a></div>
        <div><a href="#">Success link</a></div>
        <div><a href="#">Danger link</a></div>
        <div><a href="#">Warning link</a></div>
        <div><a href="#">Info link</a></div>
        <div><a href="#" class="bg-dark link-light">Light link</a></div>
        <div><a href="#">Dark link</a></div>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Ausführliche Erklärung zur Verwendung der Warnbox-Komponente in Bootstrap

Für den vorletzten habe ich den Hintergrund auf Schwarz eingestellt es wird schwierig sein, es zu unterscheiden.

5 Extras

Benachrichtigungen können auch andere HTML-Elemente wie Titel, Absätze und Trennzeichen enthalten.

<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message.
This example text is going to run a bit longer so that you can see 
how spacing within an alert works with this kind of content.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

Ausführliche Erklärung zur Verwendung der Warnbox-Komponente in Bootstrap

Obwohl es ziemlich gut aussieht, wird es nicht empfohlen, es als Komponente für Layout und Satz zu verwenden. Später eingeführte Raster und leistungsfähigere Karten eignen sich besser für den Satz.

6 Schließen

Im ersten Beispiel haben wir die Schaltfläche „Schließen“ noch einmal besprochen. Wenn Sie diesen Abschnitt nicht ausführlich studieren möchten, kopieren Sie einfach das Beispiel.

Jede Inline-Warnung (d. h. Warnbox) kann mit dem Warnungs-JavaScript-Plugin deaktiviert werden. So geht's:

Stellen Sie sicher, dass bootstrap.bundle.min.js geladen ist.
Fügen Sie eine Schaltfläche „Schließen“ und die Klasse „.alert-dismissible“ hinzu, die rechts neben der Warnung zusätzlichen Abstand hinzufügt und die Schaltfläche „Schließen“ positioniert.
Fügen Sie auf der Schaltfläche „Schließen“ das Attribut data-bs-dismiss="alert" hinzu, das die JavaScript-Funktion auslöst. Achten Sie darauf, dass Sie bei allen Geräten Tastenelemente für eine korrekte Bedienung verwenden.
Um den Alarm zu animieren, wenn er geschlossen wird, müssen Sie unbedingt die Klassen .fade und .show hinzufügen.

Wenn die Warnung gelöscht wird, wird das Element vollständig aus der Seitenstruktur entfernt. Wenn ein Tastaturbenutzer die Warnung über die Schaltfläche „Schließen“ verwirft, geht sein Fokus plötzlich verloren und wird je nach Browser auf den Anfang der Seite/des Dokuments zurückgesetzt. Daher empfehlen wir, zusätzliches JavaScript einzuschließen, um das Ereignis „closed.bs.alert“ abzuhören und focus() programmgesteuert auf die am besten geeignete Position auf der Seite zu setzen. Wenn Sie den Fokus auf ein nicht interaktives Element verschieben möchten, das normalerweise keinen Fokus erhält, müssen Sie diesem Element unbedingt tabindex="-1" hinzufügen.

Weitere Informationen zu Bootstrap finden Sie unter: Bootstrap-Grundlagen-Tutorial! !

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung der Warnbox-Komponente in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript bootstrap html JS 事件 alert

Stellungnahme：

Dieser Artikel ist reproduziert unter:juejin.cn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Ausführliche Erklärung zur Verwendung der Akkordeon-Komponente in Bootstrap (Beispiel)Nächster Artikel：Ausführliche Erklärung zur Verwendung der Akkordeon-Komponente in Bootstrap (Beispiel)

In Verbindung stehende Artikel

Mehr sehen