suchen

Heim >Web-Frontend >Bootstrap-Tutorial >Wie erreiche ich einen Ladeeffekt in Bootstrap? Lesen Sie die Symbolkomponente (Spinners).

Wie erreiche ich einen Ladeeffekt in Bootstrap? Lesen Sie die Symbolkomponente (Spinners).

青灯夜游
青灯夜游nach vorne
2021-12-10 19:18:184326Durchsuche

Wie erreiche ich einen Ladeeffekt in

Bootstrap? Der folgende Artikel stellt Ihnen die Verwendung der Bootstrap5-Lesesymbolkomponente (Spinners) vor und zeigt, wie Sie das Symbol lesen, um den Ladestatus der Komponente anzuzeigen. Ich hoffe, dass es Ihnen hilfreich sein wird!

Wie erreiche ich einen Ladeeffekt in Bootstrap? Lesen Sie die Symbolkomponente (Spinners).

1 Einfaches Lesesymbol

Verwenden Sie Bootstrap, um den Ladestatus von Komponenten anzuzeigen. Diese Lesesymbole verwenden vollständig HTML und CSS, ohne JavaScript zu verwenden. Ihr Aussehen, ihre Ausrichtung und ihre Größe können über gängige Klassen angepasst werden, Sie benötigen jedoch weiterhin benutzerdefiniertes JavaScript, um ihre Anzeige umzuschalten. [Verwandte Empfehlung: „Bootstrap-Tutorial“]

Das Folgende ist ein einfaches Lesesymbol

<!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>
        <div role="status">
            <span>Loading...</span>
        </div>

      </div>
  </body>
</html>

Wie erreiche ich einen Ladeeffekt in Bootstrap? Lesen Sie die Symbolkomponente (Spinners).

2 Farbe

Das Randlesesymbol verwendet die aktuelle Farbe als Randfarbe, was bedeutet, dass Sie die Textfarbe verwenden können Klicken Sie auf die allgemeine Kategorie, um die Farbe anzupassen. Sie können Farben aus jeder gängigen Kategorie für das Standard-Lesesymbol verwenden. 

<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>

Wie erreiche ich einen Ladeeffekt in Bootstrap? Lesen Sie die Symbolkomponente (Spinners).

3 Farbverlauf-Lesesymbol

Wenn Ihnen das Rand-Lesesymbol nicht gefällt, können Sie zum Farbverlauf-Lesesymbol wechseln. Obwohl es sich technisch gesehen nicht dreht, verblasst es immer wieder! Verlaufssymbole unterstützen auch verschiedene Farben. 

<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>

Wie erreiche ich einen Ladeeffekt in Bootstrap? Lesen Sie die Symbolkomponente (Spinners).

Wie oben verwendet auch dieses Lesesymbol die aktuelle Farbe, sodass Sie sein Erscheinungsbild mithilfe der universellen Kategorie „Textfarbe“ problemlos ändern können. Hier ist Blau und die Farbvariationen, die es unterstützt. 

<div class="spinner-grow text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>

Wie erreiche ich einen Ladeeffekt in Bootstrap? Lesen Sie die Symbolkomponente (Spinners).

4 Ränder

Verwenden Sie Randdienstprogramme, um den Abstand einfach zu vergrößern, z. B. m-5. 

<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>

Wie erreiche ich einen Ladeeffekt in Bootstrap? Lesen Sie die Symbolkomponente (Spinners).

5 Ausrichtung

Verwenden Sie Flexbox-Universalkategorien, Float-Universalkategorien oder Textlayout, um das Lesesymbol genau dort zu platzieren, wo Sie es auf jeden Fall benötigen.

5.1 Flex Rechts ausrichten

<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>

5.3 Text allgemein Klasse Wie erreiche ich einen Ladeeffekt in Bootstrap? Lesen Sie die Symbolkomponente (Spinners).

Text allgemeine Klasse implementiert zentrierte Ausrichtung 

<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>
Wie erreiche ich einen Ladeeffekt in Bootstrap? Lesen Sie die Symbolkomponente (Spinners).

6 Größe Fügen Sie spinner-border-sm und spinner-grow-sm hinzu, um ein kleineres Lesesymbol zu erstellen, damit es zwischen anderen Komponenten platziert werden kann schnell. 

<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>

Größeres Symbol anzeigen Wie erreiche ich einen Ladeeffekt in Bootstrap? Lesen Sie die Symbolkomponente (Spinners).

<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>

7 Schaltflächen Die Verwendung des Lesesymbols innerhalb der Schaltfläche bedeutet, dass sie gerade verarbeitet wird oder ein Vorgang ausgeführt wird. Sie können den Text des Lesesymbols auch mithilfe der Schaltflächentexte entsprechend Ihren Anforderungen ändern. 

<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Wie erreiche ich einen Ladeeffekt in Bootstrap? Lesen Sie die Symbolkomponente (Spinners).

Weitere Informationen zu Bootstrap finden Sie unter:

Bootstrap Basic Tutorial

! !

Das obige ist der detaillierte Inhalt vonWie erreiche ich einen Ladeeffekt in Bootstrap? Lesen Sie die Symbolkomponente (Spinners).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css bootstrap html Float margin border flex
Stellungnahme：
Dieser Artikel ist reproduziert unter:juejin.cn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Teilen Sie 15 kostenlose benutzerdefinierte Bootstrap5-Komponentengeneratoren, um die Entwicklungsgeschwindigkeit zu verbessern!Nächster Artikel：Teilen Sie 15 kostenlose benutzerdefinierte Bootstrap5-Komponentengeneratoren, um die Entwicklungsgeschwindigkeit zu verbessern!

In Verbindung stehende Artikel

Mehr sehen