Web Entwicklung

Bootstrap-Tabellen und Basisklassen

Tabelle ist ein wichtiger Bestandteil des Seiteninhalts einer Website, und Bootstrap-Tabellen sind an verschiedene Gerätegrößen angepasst und sehen einfach gut aus. Bootstrap bietet eine umfangreiche Sammlung grundlegender Klassen, die viele Layout-Aufgaben für Tabellen auf der Seite abdecken.

Grundklasse der Bootstrap-Tabelle

Die Grundklasse für Tabellen ist class=“table“. Es genügt, diese in <table> hinzuzufügen, und es werden Abstände und horizontale Abschnittstrennlinien erstellt.

# Vorname Nachname Benutzer
1 Ilja Muromez @illusha
2 Dobrynja Nikitich @dobr
3 Aljoscha Popowitsch @aleksiy_popovich 
				
					<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Vorname</th>
      <th>Nachname</th>
      <th>Benutzer</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Ilja</td>
      <td>Muromez</td>
      <td>@illusha</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Dobrynja</td>
      <td>Nikitich</td>
      <td>@dobr</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Aljoscha</td>
      <td>Popowitsch</td>
      <td>@aleksiy_popovich</td>
    </tr>
  </tbody>
</table>

Dies ist die einfachste Form der grundlegenden Tabellenstruktur. Alle Tabellenstile, die auf Ihrer Website vorhanden sind, werden in Bootstrap vererbt. Wenn Sie die Klasse auf .table-dark ändern, erhalten Sie eine Farbinversion.

# Vorname Nachname Benutzer
1 Ilja Muromez @illusha
2 Dobrynja Nikitich @dobr
3 Aljoscha Popowitsch @aleksiy_popovich

Hintergrundwechsel in den Tabellenzellen

Im Tabellenlayout kann man automatisch einen Hintergrundwechsel in den Zeilen hinzufügen: eine Zeile in normalem Weiß und die nächste mit grauem Hintergrund (background-color: #f9f9f9;). Der Wechsel des Hintergrunds in den Zeilen der Tabelle wird mit der Klasse .table-striped hinzugefügt.

# Vorname Nachname Benutzer
1 Ilja Muromez @illusha
2 Dobrynja Nikitich @dobr
3 Aljoscha Popowitsch @aleksiy_popovich
4 Swjatogor @svyatogor 
				
					<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Vorname</th>
      <th>Nachname</th>
      <th>Benutzer</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Ilja</td>
      <td>Muromez</td>
      <td>@illusha</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Dobrynja</td>
      <td>Nikitich</td>
      <td>@dobr</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Aljoscha</td>
      <td>Popowitsch</td>
      <td>@aleksiy_popovich</td>
    </tr>
  </tbody>
</table>

Hervorhebung von Tabellenzeilen beim Hover

Um beim Überfahren einer Tabellenzeile mit dem Cursor den Hintergrund der Zeile in einer Farbe hervorzuheben, fügen wir der Basis-Selektorenklasse die Klasse .table-hover hinzu. Im Basis-Stil wird die Hintergrundfarbe auf #f5f5f5 gesetzt, und dieser Wert kann bei Bedarf geändert werden. </tr
# Vorname Nachname Benutzer
1 Ilja Muromez @illusha
2 Dobrynja Nikitich @dobr
3 Aljoscha Popowitsch @aleksiy_popovich
4 Sviatogor @svyatogor 
<table class="table table-hover">
…
</table>

Tabellen mit horizontalem Scrollen

Wenn eine Tabelle viele Zellen hat und horizontaler Scrollen erforderlich ist, verwenden wir die Klasse .table-responsive. Diese Klasse wird auch verwendet, wenn die Tabelle groß ist und beim Betrachten auf einem Mobiltelefon ohne Scrollen nicht auskommt.
Anzahl der Tage im Januar
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 
<table class="table table-responsive">
…
</table>

Hervorhebung von Tabellenzeilen und Zellen mit Farben

In den grundlegenden Bootstrap-Klassen ist bereits die Notwendigkeit berücksichtigt, eine Zeile oder eine einzelne Zelle mit Farbe hervorzuheben.
Typ Spaltenüberschrift Spaltenüberschrift
Aktiv (table-active) Zelle Zelle
Standard (Default) Zelle Zelle
Primär (table-primary) Zelle Zelle
Sekundär (table-secondary) Zelle Zelle
Erfolg (table-success) Zelle Zelle
Gefahr (table-danger) Zelle Zelle
Warnung (table-warning) Zelle Zelle
Information (table-info) Zelle Zelle
Hell (table-light) Zelle Zelle
Dunkel (table-dark) Zelle Zelle
Farben können auf eine gesamte Zeile <tr> oder auf eine Zelle angewendet werden. Zum Beispiel wenden wir das Farbschema „primary“ auf die Zelle Dobrynja an:
# Vorname Nachname Benutzer
1 Ilja Muromez @illusha
2 Dobrynja Nikitich @dobr
3 Aljoscha Popowitsch @aleksiy_popovich 
				
					<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Vorname</th>
      <th>Nachname</th>
      <th>Benutzer</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Ilja</td>
      <td>Muromez</td>
      <td>@illusha</td>
    </tr>
    <tr>
      <th>2</th>
      <td class="table-primary">Dobrynja</td>
      <td>Nikitich</td>
      <td>@dobr</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Aljoscha</td>
      <td>Popowitsch</td>
      <td>@aleksiy_popovich</td>
    </tr>
  </tbody>
</table>

Ⓒ 2012 -2025 | Help2Site.com

Sitemap