Bootstrap3.0-Studiennotizentabelle bezogen auf

In diesem Artikel werden hauptsächlich Tabellen erläutert, die Personen, die Websites erstellt haben, nicht unbekannt sind. Man kann sagen, dass dies die am häufigsten verwendete Anzeige verschiedener Listen ist. Manchmal kann es aufgrund der Anforderungen von Benutzern oder Vorgesetzten auch Kopfschmerzen bereiten. Schauen wir uns an, welche Arten von Tabellen Bootstrap für uns vorbereitet hat. Wie unten dargestellt:

1. Grundfall

2. Gestreifter Tisch

3. Tabelle mit Rändern

4. Mouseover

5. Den Tisch festziehen

6. Statusklasse

7. Reaktionsfähige Tabellen

8. Zusammenfassung

Basisgehäuse

Durch Hinzufügen von .table zu einem beliebigen <table>-Tag erhält dieser eine grundlegende Formatierung – eine kleine Polsterung und eine horizontale Trennlinie. Dieser Ansatz erscheint überflüssig! ? Wir sind jedoch der Meinung, dass Tabellenelemente häufig verwendet werden und dass eine Zuweisung eines Standardstils Auswirkungen auf Plug-Ins wie Kalender und Datumsauswahlen haben kann. Aus diesem Grund haben wir uns dazu entschieden, ihre Stile zu trennen.

Ein einfaches Tabellenbeispiel

Gestreifter Tisch

Mit .table-striped können Sie allem innerhalb von <tbody> einen Zebrastreifenstil hinzufügen.

Fügen Sie dem Tabellenelement im obigen Beispiel eine weitere Stilklasse hinzu

Betrachtet man die aktuellen Ergebnisse, so sind dennoch einige Veränderungen erkennbar.

Tabelle mit Rändern

Verwenden Sie .table-bordered, um der Tabelle und jeder Zelle darin Rahmen hinzuzufügen.

Oder fügen Sie dem Tabellenelement im ersten Beispiel eine weitere Stilklasse hinzu

Mouseover

Verwenden Sie .table-hover, damit jede Zeile im <tbody> auf den Mouseover-Status reagiert.

Bewegen Sie die Maus auf diese Zeile und die Änderung wird wirksam.

Kompakter Tisch

Durch die Verwendung von .table-condensed kann die Tabelle kompakter gemacht werden und die interne Polsterung der Zellen wird halbiert.

Der Effekt ist nicht so offensichtlich, die Hauptsache ist, dass die Polsterung des Zellinhalts halbiert wird.

StatusKlasse

Über diese Statusklassen kann die Farbe der lizenzierten Zellen eingestellt werden.

Reaktionsfähige Tabellen

Umschließen Sie jede .table mit .table-responsive, um eine responsive Tabelle zu erstellen, die auf kleinen Geräten (weniger als 768 Pixel) horizontal scrollt. Wenn die Bildschirmbreite 768 Pixel überschreitet, verschwindet die horizontale Bildlaufleiste.

Schauen Sie, die Bildlaufleiste wird angezeigt.

Zusammenfassen

Mit nur wenigen einfachen Stilklassen können Sie die Seite auf dieses Niveau bringen, was großartig ist. Sie müssen sich nicht mehr um die Anpassung des Stils kümmern.