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!
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>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>
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 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>
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>
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>
Nach dem Login kopieren
5.3 Text allgemein Klasse
<div class="d-flex align-items-center"> <strong>Loading...</strong> <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div> </div>
. "163913468913696Wie 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
<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>
. "163913469981221Wie 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!
Einführung in Festplattenschnittstellentypen
Konfiguration der JDK-Umgebungsvariablen
Ist die Geschwindigkeit von PHP8.0 verbessert?
Verwendung der Instr-Funktion
Festplattenwiederherstellungsdaten
Der Unterschied zwischen TCP und UDP
Win7 meldet, dass auf Anwendungsdaten nicht zugegriffen werden kann
Einführung in Festplattenschnittstellentypen
. "163913466050885Wie erreiche ich einen Ladeeffekt in Bootstrap? Lesen Sie die Symbolkomponente (Spinners).")
. "163913466620244Wie erreiche ich einen Ladeeffekt in Bootstrap? Lesen Sie die Symbolkomponente (Spinners).")
. "163913467239610Wie erreiche ich einen Ladeeffekt in Bootstrap? Lesen Sie die Symbolkomponente (Spinners).")
. "163913467758018Wie erreiche ich einen Ladeeffekt in Bootstrap? Lesen Sie die Symbolkomponente (Spinners).")
. "163913468163927Wie erreiche ich einen Ladeeffekt in Bootstrap? Lesen Sie die Symbolkomponente (Spinners).")
. "163913468664185Wie erreiche ich einen Ladeeffekt in Bootstrap? Lesen Sie die Symbolkomponente (Spinners).")
. "163913469457450Wie erreiche ich einen Ladeeffekt in Bootstrap? Lesen Sie die Symbolkomponente (Spinners).")
