Bootstrap -Tabelle HOVER Zeilen Beispiel
In dieser Beschreibung wird beschrieben:
- So erstellen Sie eine Bootstrap -Tabelle mit verlagerbaren Zeilen?
- So fügen Sie Tabellenzeilen auf dem Bootstrap benutzerdefinierte Farben hinzu?
So erstellen Sie eine Bootstrap -Tabelle mit verlagerbaren Zeilen?
Bootstrap "Tischverschluss" Und "TischhaleKlassen werden verwendet, um eine umrandete Tabelle mit einem Schwebeffekt zu erstellen. Der "Tischhale"Klasse hat einen vordefinierten Schweberffektstil mit dem":schweben"Pseudoklasse und die"Hintergrundfarbe"Eigenschaft mit dem Wert"RGBA (0,0,0,.075)”.
Beispiel
Lassen Sie es uns durch ein Beispiel implementieren:
- Erstellen Sie eine Tabelle mithilfe der HTML “
" Schild. Zuweisen Sie es die “Tisch","Tischverschluss", Und "Tischhale" Klassen.
- Der "Das Tag wird verwendet, um den Tischkopf zu erwähnen.
- In dem unten angegebenen Beispiel machen wir den Tischkörper, indem wir die “nutzen“" Element.
- Der "
"Tags werden verwendet, um die Tabellenreihen zu erstellen, die" Tags sind für Überschriften und die “ ”Tags werden verwendet, um Tabellendaten hinzuzufügen. Html
Name Jake Gänseblümchen Kurs Informatik Physik Land Vereinigte Staaten China Aus dem folgenden GIF wird beobachtet, dass die Tabelle mit dem Schwebeffekt erfolgreich erstellt wurde:
So fügen Sie Tabellenzeilen auf dem Bootstrap benutzerdefinierte Farben hinzu?
Sie können auch eine Schwebefarbe entsprechend Ihrem Bedarf angeben. Implementieren Sie dazu den folgenden Code im CSS -Abschnitt:
.TABLE-HOHER TBODY TR: Hover
Hintergrundfarbe: RGBA (228, 33, 205, 0.075);
Hier:
- Der ".TischhaleIst die Klasse.
- “tbody"Ist das übergeordnete Element der"
" Schild. - Der "TR: Schwebe"Wird verwendet, um den Schwebeffekt auf die" anzuwenden "
" Element. Ausgang
Auf diese Weise wird die Bootstrap -Tabelle mit dem Schwebeffekt erstellt.
Abschluss
Die Bootstrap -Tabelle mit dem Hover -Effekt wird mit der “erstelltTischhale" Klasse. Diese Klasse fügt den Schwebeeffekt auf die Tabellenreihen mit dem hinzuHintergrundfarbe"Eigenschaft mit dem Wert"RGBA (0,0,0,.075)”. Sie können jedoch die Schwebefarbe mit CSS anpassen. In diesem Beitrag wurde beschrieben.
Der Schwebeffekt auf die Bootstrap -Tabelle.
- Der "TR: Schwebe"Wird verwendet, um den Schwebeffekt auf die" anzuwenden "