Heim > Artikel > Web-Frontend > Welche Tabellenklassen gibt es im Bootstrap?

Welche Tabellenklassen gibt es im Bootstrap?

青灯夜游Original: 2022-01-10 12:05:132599Durchsuche

Zu den Tabellenklassen von Bootstrap gehören: 1. „.table“, Basistabelle; 2. „.table-striped“, Zebrastreifentabelle; 4. „.table-hover“. ", die Tabelle, die durch Bewegen der Maus hervorgehoben wird usw.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Bootsrap-Version 3.3.7, DELL G3-Computer

Bootstrap Table

Bootstrap bietet ein übersichtliches Layout zum Erstellen von Tabellen. In der folgenden Tabelle sind einige von Bootstrap unterstützte Tabellenelemente aufgeführt:

Tag

Beschreibung

) der Tabellenkopfzeile, das zur Identifizierung von Tabellenspalten verwendet wird. ) für Tabellenzeilen im Tabellenkörper. verwendet werden.


Grundlegende Stile zur Tabelle hinzufügen.

Containerelement (

Containerelement (

Containerelement (	oder	) für eine Gruppe von Tabellenzellen, die in einer einzelnen Zeile erscheinen.
		Standardtabellenzelle.
		Spezielle Tabellenzelle zur Identifizierung einer Spalte oder Zeile (je nach Bereich und Position). Muss innerhalb von

Eine Beschreibung oder Zusammenfassung des Tabellenspeicherinhalts.

Bootstrap bietet verschiedene Klassennamen für verschiedene Tabellenstile, hauptsächlich einschließlich:

hinzufügen (nicht unterstützt von IE8) Umrandeter Tisch

Basistabelle

Wenn Sie eine Basistabelle nur mit Auffüllung und horizontaler Aufteilung wünschen, fügen Sie die Klasse .table hinzu, wie im folgenden Beispiel gezeigt:

Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table">
	<caption>基本的表格布局</caption>
   <thead>
      <tr>
         <th>名称</th>
         <th>城市</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>

</body>
</html>

Das Ergebnis sieht so aus:

Welche Tabellenklassen gibt es im Bootstrap?

Optionale Tabellenklassen

Zusätzlich zum grundlegenden Tabellen-Markup und der .table-Klasse gibt es einige Klassen, die zum Definieren von Stilen für das Markup verwendet werden können. Diese Kurse werden Ihnen im Folgenden vorgestellt.

Striped Table

Durch Hinzufügen der Klasse .table-striped sehen Sie Streifen in den Zeilen innerhalb von

, wie im folgenden Beispiel gezeigt:

Instance

<table class="table table-striped">
  <caption>条纹表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody></table>

Ergebnis Wie unten gezeigt :

Welche Tabellenklassen gibt es im Bootstrap?

Randtabelle

Durch Hinzufügen der Klasse .table-bordered werden Sie sehen, dass jedes Element einen Rand hat und die gesamte Tabelle abgerundet ist, wie im folgenden Beispiel gezeigt:

Instanz

<table class="table table-bordered">
  <caption>边框表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody></table>

Das Ergebnis sieht so aus:

Welche Tabellenklassen gibt es im Bootstrap?

Hover-Tabelle

Durch Hinzufügen der Klasse .table-hover erscheint eine flache Oberfläche, wenn der Zeiger über der Zeile schwebt. Grauer Hintergrund, als Im Beispiel unten gezeigt:

Beispiel

<table class="table table-hover">
  <caption>悬停表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody></table>

Das Ergebnis sieht so aus:

Welche Tabellenklassen gibt es im Bootstrap?

Condensed Table

Durch Hinzufügen von .table-confided class, padding ) wird es in zwei Hälften geschnitten Die Tabelle sieht kompakter aus, wie im Beispiel unten gezeigt. Dies ist nützlich, wenn Sie möchten, dass Ihre Informationen kompakter angezeigt werden.

Instanz

<table class="table table-condensed">
  <caption>精简表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td></tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td></tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td></tr>
  </tbody></table>

Das Ergebnis sieht so aus:

Welche Tabellenklassen gibt es im Bootstrap?

Kontextklassen

Mit den in der folgenden Tabelle aufgeführten Kontextklassen können Sie die Hintergrundfarbe von Tabellenzeilen oder einzelnen Zellen ändern.

Class	Description
.table	add Basics für jede & lt; table & gt; horizontale Trennlinien)
.table-striped	Zebrastreifen innerhalb von
.table-bordered	Zu allen Tabellenzellen hinzufügen Border
.table- Hover	Aktivieren Sie den Mouseover-Status für jede Zeile in

Klasse	Beschreibung
.active	Eine Hover-Farbe auf eine bestimmte Zeile oder Zelle anwenden
.success	Kennzeichnet eine erfolgreiche oder positive Aktion
.warning	zeigt an eine Warnung, die Aufmerksamkeit erfordert
.Gefahr	weist auf eine gefährliche oder potenziell negative Aktion hin

Diese Klassen können auf

angewendet werden.

Beispiel

<table class="table">
  <caption>上下文表格布局</caption>
  <thead>
    <tr>
      <th>产品</th>
      <th>付款日期</th>
      <th>状态</th></tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>产品1</td>
      <td>23/11/2013</td>
      <td>待发货</td></tr>
    <tr class="success">
      <td>产品2</td>
      <td>10/11/2013</td>
      <td>发货中</td></tr>
    <tr class="warning">
      <td>产品3</td>
      <td>20/10/2013</td>
      <td>待确认</td></tr>
    <tr class="danger">
      <td>产品4</td>
      <td>20/10/2013</td>
      <td>已退货</td></tr>
  </tbody></table>

Das Ergebnis sieht so aus:

Welche Tabellenklassen gibt es im Bootstrap?

Responsive Tabelle

Indem Sie eine beliebige .table in die .table-responsive-Klasse einschließen, können Sie die Tisch horizontale Schriftrollen passend für kleine Geräte (weniger als 768 Pixel). Bei der Anzeige auf großen Geräten mit einer Breite von mehr als 768 Pixel werden Sie keinen Unterschied feststellen.

Beispiel

<div class="table-responsive">
  <table class="table">
    <caption>响应式表格布局</caption>
    <thead>
      <tr>
        <th>产品</th>
        <th>付款日期</th>
        <th>状态</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>产品1</td>
        <td>23/11/2013</td>
        <td>待发货</td></tr>
      <tr>
        <td>产品2</td>
        <td>10/11/2013</td>
        <td>发货中</td></tr>
      <tr>
        <td>产品3</td>
        <td>20/10/2013</td>
        <td>待确认</td></tr>
      <tr>
        <td>产品4</td>
        <td>20/10/2013</td>
        <td>已退货</td></tr>
    </tbody>
  </table></div>

Das Ergebnis ist wie folgt:

Welche Tabellenklassen gibt es im Bootstrap?

[Verwandte Empfehlung: „Bootstrap-Tutorial“]

Das obige ist der detaillierte Inhalt vonWelche Tabellenklassen gibt es im Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

bootstrap 指针 class 内边距 padding table tbody td tr th

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So drücken Sie „ungleich“ in Javascript ausNächster Artikel：So drücken Sie „ungleich“ in Javascript aus

In Verbindung stehende Artikel

Mehr sehen