So ändern Sie die Hintergrundfarbe von Tabellenreihen oder einzelnen Zellen in Bootstrap

Lars Daub
So ändern Sie die Hintergrundfarbe von Tabellenreihen oder einzelnen Zellen in Bootstrap

In Bootstrap werden die vordefinierten Klassen verwendet, um den Elementen verschiedene Styling zu verleihen. Diese Klassen helfen Entwicklern, reaktionsschnelle und visuell ansprechende Websites zu erstellen. Insbesondere ist Styling -Tabellen eine der wertvollen Merkmale von Bootstrap. Während der Arbeit mit Tabellen ist eine gemeinsame Aufgabe die Änderung der Hintergrundfarbe von Zeilen oder einzelnen Zellen,.

In dieser Beschreibung wird beschrieben:

    • So erstellen Sie eine Bootstrap -Tabelle?
    • So modifizieren Sie die Hintergrundfarbe von Tabellenzeilen in Bootstrap?
    • So ändern Sie die Farbe einer einzelnen Tabellenzelle in Bootstrap?

So erstellen Sie eine Bootstrap -Tabelle?

Um eine Tabelle in Bootstrap zu erstellen, probieren Sie die folgenden Schritte aus:

    • Zuerst fügen Sie eine "hinzu"Element, um eine Tabelle zu erstellen. Zuweisen Sie es die “Tisch","Tischverschluss" Und "Tischhale" Klassen.
    • Verwenden Sie dann den Tischheader, um die “angeben, die“"Tag, das aus" besteht "
      • Element, das aus dem "besteht""Für die Reihe und die"" Schild.
    • Um die spezifische Tabellenzellfarbe festzulegen, geben Sie eine Klasse für diese bestimmte an “
      • Tags, um die Überschriften anzugeben.
    • Erstellen Sie nach dem Header -Teil den Körperteil, indem Sie das „verwenden“
      • " Teil.

      Html































      S nr.SchülernamenKurs
      1War einBetriebssysteme
      2HeiratenObjekt orientierte Programmierung
      3LindaComputersysteme
      4PeterGrafikdesign


      Wie Sie sehen können, wurde die Bootstrap -Tabelle erfolgreich erstellt:

      So modifizieren Sie die Farbe der Tabellenreihen in Bootstrap?

      Die vordefinierten Klassen werden zum Ändern der Tabellen- oder Zeilenfarben verwendet, wie unten erläutert:

      Klassen Beschreibung
      “Tischprimär” Diese Klasse wird verwendet, um wichtige Aktionen anzuzeigen. Es fügt den Tischelementen eine blaue Farbe hinzu.
      “Tabelle-Danger” Diese Klasse wird verwendet, um die negative Aktion darzustellen. Es wendet eine rote Farbe auf die Tischelemente an.
      “Tischsuccess” Es zeigt die positive Aktion und wendet grüne Farbe auf die Tischelemente an.
      “Tischwarnung” Es zeigt Warnungen an, die eine gewisse Aktion erfordern und den Tischkomponenten eine gelbe Farbe verleihen.
      “Tabelle-Default” Diese Klasse fügt den Tabellenkomponenten weiße Farbe hinzu und wird zum Anzeigen der ausgewählten Zeile verwendet.
      “Tischsekundäre” Es wendet eine graue Farbe auf die Tabellenelemente an und zeigt die weniger wichtigen Aktivitäten an.
      “tischaktiv” Es wendet graue Farbe auf die Tischkomponenten bei Schwebe.
      “Tabelle” Es wendet eine hellblaue Farbe an, um eine neutrale informative Aktion anzuzeigen.
      “Tischdark” Es wird verwendet, um einen dunkelgrauen Tisch zu erstellen.
      “Tischlicht” Es fügt graue Farbe hinzu und wird verwendet, um den Hintergrund der Tabellenzeile anzugeben.


      Beispiel

      Implementieren wir jede Klasse in die Tischreihen:
















































      S nr.Bootstrap -Klasse
      1Tischprimär
      2Tabelle-Danger
      3Tischsuccess
      4Tischwarnung
      5Tabelle-Default
      6Tischsekundäre
      8Tabelle
      7tischaktiv
      9Tischdark
      10Tischlicht


      Ausgang

      So modifizieren Sie die Farbe einzelner Zellen in Bootstrap?

      Um die Farbe einzelner Zellen zu ändern, können mehrere Klassen verwendet werden, wie:

        • “BG-Info”Bedeutet eine neutrale informative Aktion und fügt eine blaue Farbe hinzu.
        • “BG-PrimaryRepräsentiert die positive Aktion und wendet eine blaue Farbe an.
        • “BG-Danger”Zeigt die gefährliche Aktion an und fügt eine rote Farbe hinzu.
        • “BG-Warnung”Wird verwendet, um eine gelbe Farbe hinzuzufügen und eine Warnmeldung anzeigt.
        • “BG-Success”Zeigt eine positive Aktion an.

      Um die Farbe der einzelnen Zelle anzupassen, fügen Sie die erforderliche Klasse der spezifischen Datenzelle hinzu<td>”. Schauen Sie sich das Beispiel an, das die oben diskutierte Erklärung demonstriert.

      Beispiel: Ändern der Farbe einer bestimmten Tabellenzelle in Bootstrap

      Im folgenden Beispiel:

        • Um die Tabellenzeilenfarbe zu ändern, geben Sie die Klasse innerhalb der “Geben Sie an“ an
      " Element:






























      S nr.SchülernamenKurs
      1War einBetriebssysteme
      2HeiratenObjekt orientierte Programmierung
      3LindaComputersysteme
      4PeterGrafikdesign


      Ausgang


      Das ging darum, die Hintergrundfarbe von Tabellenreihen oder einzelnen Zellen in Bootstrap zu ändern.

      Abschluss

      Um die Hintergrundfarbe von Tabellenreihen zu ändern, die “Tischhale”Klasse kann verwendet werden. Mehrere Klassen können verwendet werden, um die Hintergrundfarbe der Zeile festzulegen, wie zTabelle-Danger","Tischwarnung","Tischdark","Tischprimär", und viele mehr. Insbesondere, um die Zellfarbe der spezifischen Tabelle zu ändern, mehrere Klassen, wie zBG-Danger","BG-Success", Und "BG-Info”Werden verwendet. In diesem Artikel wurde erklärt, wie die Hintergrundfarbe von Tabellenreihen oder einzelnen Zellen in Bootstrap verändert.

      Php
      So überprüfen Sie, ob ein Array in PHP leer ist?
      Das Finden eines leeren Arrays in PHP ist entscheidend, um eine reibungslose und fehlerfreie Ausführ...
      Fr. Chris Frisch
      C ++
      Was ist während der Schleife in C++?
      Die while -Schleife in C ++ ermöglicht es dem Programm, wiederholt einen Codeblock auszuführen, sola...
      Ansgar Radtke
      Git
      Was sind die Schritte, um eine Datei in Git umzubenennen??
      Um eine Datei in Git umzubenennen, wechseln Sie zunächst zum Stammverzeichnis und listen Sie ihren I...
      Fr. Chris Frisch