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

Heim

Web-Frontend

Bootstrap-Tutorial

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

青灯夜游

Dec 10, 2021 pm 07:18 PM

bootstrap

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>

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!

Stellungnahme

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

Verwandter Artikel

Bootstrap: Frontend -Entwicklung wurde einfacherMay 02, 2025 am 12:10 AM

Bootstrap ist ein Front-End-Framework von Open Source, mit dem Entwickler schnell reaktionsschnelle Websites erstellen können. 1) Es bietet vordefinierte Stile und Komponenten wie Gittersysteme und Navigationsstangen. 2) Implementieren Sie Stil und dynamische Interaktion durch CSS und JavaScript -Dateien. 3) Die grundlegende Verwendung besteht darin, Dateien einzulegen und Seiten mit Klassennamen zu erstellen. 4) Die erweiterte Verwendung beinhaltet benutzerdefinierte Stile durch Sass. 5) Zu den häufig gestellten Fragen gehören Stilkonflikte und JavaScript -Komponentenprobleme, die durch Entwickler -Tools und modulares Management gelöst werden können. 6) Die Leistungsoptimierung wird empfohlen, um Module selektiv einzuführen und rationale Gittersysteme zu verwenden.

Reagieren und Bootstrap: Die ideale Kombination?May 01, 2025 am 12:01 AM

React und Bootstrap sind ideale Kombinationen. 1) Verwenden Sie die CSS-Klassen von Bootstrap und JavaScript-Komponenten, 2) in die Rendite-Stiefelstrap- oder ReactStrap integrieren, 3) Laden und Optimierung der Rendernleistung bei Bedarf und erstellen Sie eine effiziente und schöne Benutzeroberfläche.

Verwenden von Bootstrap: Erstellen moderner und mobiler WebsitesApr 30, 2025 am 12:08 AM

Bootstrap ist ein Front-End-Frontwork für Open Source, um moderne, reaktionsschnelle und benutzerfreundliche Websites zu erstellen. 1) Es bietet Gittersysteme und vordefinierte Stile, um das Layout und die Entwicklung zu vereinfachen. 2) Mobile-First-Design sorgt für die Kompatibilität und Leistung. 3) Durch benutzerdefinierte Stile und Komponenten kann die Website personalisiert werden. 4) Leistungsoptimierung und Best Practices umfassen selektive Lade- und Reaktionsbilder. 5) Häufige Fehler wie Layoutprobleme und Stilkonflikte können durch Debugging -Techniken gelöst werden.

Bootstrap und Webdesign: Best Practices und TechnikenApr 29, 2025 am 12:15 AM

Bootstrap ist ein von Twitter entwickelter Open-Source-Front-End-Framework, das für schnell reaktionsschnelle Websites geeignet ist. 1) Sein Gittersystem basiert auf einer 12-Spal-Struktur, die die Erstellung flexibler Layouts ermöglicht. 2) Responsive Design -Funktion ermöglicht es der Website, sich an verschiedene Geräte anzupassen. 3) Die grundlegende Nutzung umfasst das Erstellen einer Navigationsleiste, und die erweiterte Verwendung umfasst Kartenkomponenten. 4) Häufige Fehler wie den Missbrauch von Netzsystemen können vermieden werden, indem die Spaltenbreite korrekt festgelegt wird. 5) Die Leistungsoptimierung umfasst das Laden von nur erforderlichen Komponenten mit CDN und Dateikomprimierung. 6) Best Practices betonen ordentlicher Code, benutzerdefinierte Stile und reaktionsschnelles Design.

Bootstrap und React: Kombinieren von Frameworks für die WebentwicklungApr 28, 2025 am 12:08 AM

Der Grund für die Kombination von Bootstrap und React ist ihre Komplementarität: 1. Bootstrap bietet vordefinierte Stile und Komponenten, um das UI -Design zu vereinfachen. 2. React verbessert Effizienz und Leistung durch Komponentenentwicklung und virtuelles DOM. Verwenden Sie es in Verbindung, um eine schnelle UI -Konstruktion und ein komplexes Interaktionsmanagement zu genießen.

Von Null zu Bootstrap: schnell anfangenApr 27, 2025 am 12:07 AM

Bootstrap ist ein Front-End-Frontwork von Open Source, das auf HTML, CSS und JavaScript basiert und Entwicklern dabei helfen soll, reaktionsschnelle Websites schnell aufzubauen. Die Designphilosophie ist "Mobile First" und bietet eine Fülle von vordefinierten Komponenten und Tools wie Gittersystemen, Schaltflächen, Formularen, Navigationsbalken usw., die die Entwicklung des Front-End-Entwicklungsprozesses, die Verbesserung der Entwicklungseffizienz und die Gewährleistung der Reaktionsfähigkeit und Konsistenz der Website. Die Verwendung von Bootstrap kann mit einer einfachen Seite beginnen und nach und nach erweiterte Komponenten wie Karten und Modalboxen hinzufügen. Zu den Best Practices zur Optimierung der Leistung gehören das Anpassen von Bootstrap, die Verwendung von CDNs und die Vermeidung von Überbeanspruchung von Klassennamen.

Reagieren und Bootstrap: Verbesserung der BenutzeroberflächendesignApr 26, 2025 am 12:18 AM

React und Bootstrap können nahtlos integriert werden, um das Design der Benutzeroberfläche zu verbessern. 1) Deponcy-Paket installieren: npMinstallbootstrapReact-Bootstrap. 2) Importieren Sie die CSS -Datei: Import'bootstrap/dist/css/bootstrap.min.css '. 3) Verwenden Sie Bootstrap -Komponenten wie Tasten und Navigationsstangen. Mit dieser Kombination können Entwickler die Flexibilität von React und die Style -Bibliothek von Bootstrap nutzen, um eine schöne und effiziente Benutzeroberfläche zu erstellen.

Integration von Bootstrap in React: Ein praktischer LeitfadenApr 25, 2025 am 12:04 AM

Zu den Schritten zur Integration von Bootstrap in ein React-Projekt gehören: 1. Installieren Sie das Bootstrap-Paket, 2. Importieren Sie die CSS-Datei, 3. Verwenden Sie den Namen der Bootstrap-Klasse, um Elemente zu stylen. Diese Integration verwendet die Komponentierung von React und das Style -System von Bootstrap, um eine effiziente UI -Entwicklung zu erzielen.

See all articles