Bootstrap3.0-Studiennotizentabelle bezogen auf

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


Code kopieren
Der Code lautet wie folgt:

<div Klasse="Container">
<Tabelle Klasse="Tabelle">
<caption>Tabellengrundfall</caption>
<Kopf>
<tr>
<th>Vorname</th>
<th>Nachname</th>
<th>Benutzername</th>
</tr>
</thead>
<tbody>
<tr>
<td>aehyok</td>
<td>Löwe</td>
<td>@aehyok</td>
</tr>
<tr>
<td>lynn</td>
<td>thl</td>
@lynn
</tr>
</tbody>
</Tabelle>
</div>


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


Code kopieren
Der Code lautet wie folgt:
<table Klasse="table table-striped">

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


Code kopieren
Der Code lautet wie folgt:
<table Klasse="table tabellenrandig">

Mouseover

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


Code kopieren
Der Code lautet wie folgt:
<table Klasse="table table-hover">

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.


Code kopieren
Der Code lautet wie folgt:
<table class="table table-kondensiert">

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.


Code kopieren
Der Code lautet wie folgt:

<table class="table table-kondensiert">
<caption>Tabelle</caption>
<Kopf>
<tr>
<th>#</th>
<th>Vorname</th>
<th>Nachname</th>
<th>Benutzername</th>
</tr>
</thead>
<tbody>
<tr Klasse="aktiv">
<td>1</td>
<td>aehyok</td>
<td>Löwe</td>
<td>@aehyok</td>
</tr>
<tr class="Erfolg">
<td>2</td>
<td>lynn</td>
<td>thl</td>
@lynn
</tr>
<tr class="Warnung">
<td>3</td>
<td>Amdy</td>
<td>Amy</td>
@Amdy
</tr>
<tr Klasse="Gefahr">
<td>4</td>
<td>Amdy</td>
<td>Amy</td>
@Amdy
</tr>
<tr>
<td class="Erfolg">5</td>
<td class="danger">Amdy</td>
<td class="warning">Amy</td>
@Amdy
</tr>
</tbody>
</Tabelle>

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.


Code kopieren
Der Code lautet wie folgt:

<div Klasse="Tabelle-responsive">
<Tabelle Klasse="Tabelle">
<caption>Tabelle</caption>
<Kopf>
<tr>
<th>#</th>
<th>Vorname</th>
<th>Nachname</th>
<th>Benutzername</th>
</tr>
</thead>
<tbody>
<tr Klasse="aktiv">
<td>1</td>
<td>aehyok</td>
<td>Löwe</td>
<td>@aehyok</td>
</tr>
<tr class="Erfolg">
<td>2</td>
<td>lynn</td>
<td>thl</td>
@lynn
</tr>
<tr class="Warnung">
<td>3</td>
<td>Amdy</td>
<td>Amy</td>
@Amdy
</tr>
<tr Klasse="Gefahr">
<td>4</td>
<td>Amdy</td>
<td>Amy</td>
@Amdy
</tr>
<tr>
<td class="Erfolg">5</td>
<td class="danger">Amdy</td>
<td class="warning">Amy</td>
@Amdy
</tr>
</tbody>
</Tabelle>
</div>

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.

<<:  Öffentlicher Upload-Bereich für mehrere Typen von Anhangsbildern auf der Vue-Seite und anwendbares Faltfenster (Beispielcode)

>>:  Eine detaillierte Einführung zum Einrichten von Jenkins auf Tencent Cloud Server

Artikel empfehlen

MySQL-Interviewfragen: So richten Sie Hash-Indizes ein

Zusätzlich zu den B-Tree-Indizes bietet MySQL auc...

Ursachen und Lösungen für Verzögerungen bei der MySQL-Master-Slave-Synchronisierung

Aus historischen Gründen basiert die MySQL-Replik...

Beispielcode zur Implementierung des sekundären Verknüpfungseffekts der Dropdown-Box in Vue

1. Ergebnisse erzielen 2. Vom Backend zurückgegeb...

Lösung für den Initialisierungsfehler bei der Installation von mysql5.7 aus einem RPM-Paket in centos6.5

1. Rz auf den Server hochladen und entpacken rz [...

Vue muss Wissenspunkte lernen: die Verwendung von forEach()

Vorwort Bei der Frontend-Entwicklung stoßen wir h...

Vue setzt die Daten auf ihren ursprünglichen Zustand zurück

In einigen Fällen müssen die Daten in den Daten w...

Eine Kurzanleitung zu Docker

Docker bietet eine Möglichkeit, Software automati...

CSS3 Flex-Layout Justify-Content:Space-Between Die letzte Zeile wird linksbündig ausgerichtet

Bei Verwendung des Layouts justify-content:space-...

MySQL fügt schnell 100 Millionen Testdaten ein

Inhaltsverzeichnis 1. Erstellen Sie eine Tabelle ...

Analyse der Anweisungsausführungsreihenfolge von SQL und MySQL

Ich bin heute auf ein Problem gestoßen: Kann ich ...

Zwei Arten von Tab-Anwendungen im Webdesign

Heutzutage werden Registerkarten häufig im Webdes...

vue + springboot realisiert die Login-Funktion

In diesem Artikelbeispiel wird der spezifische Co...

Mit CSS3 implementierter Gradienten-Folieneffekt

Ergebnisse erzielen Code html <div Klasse=&quo...

Detaillierte Erläuterung der MySQL-Lösung zur USE DB-Überlastung

Wenn wir auf einen Fehler stoßen, denken wir oft ...

Linux-Konfiguration ohne Passwort-Login, eigenständige und vollständige Distribution, ausführliches Tutorial

Inhaltsverzeichnis 1: Kennwortfreie Anmeldekonfig...