简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  So richten Sie eine Tabelle in Bootstrap4 ein

So richten Sie eine Tabelle in Bootstrap4 ein

爱喝马黛茶的安东尼
爱喝马黛茶的安东尼Original
2019-07-17 16:18:142592Durchsuche

So richten Sie eine Tabelle in Bootstrap4 ein

Bootstrap4-Basistabelle

Bootstrap4 verwendet die .table-Klasse, um den Stil der Basistabelle festzulegen. Das Beispiel ist wie folgt:

Instanz

<table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>

So richten Sie eine Tabelle in Bootstrap4 ein

Gestreifte Tabelle

Durch Hinzufügen der .table-striped Klasse, Sie werden Streifen auf den Zeilen innerhalb von

sehen, wie im folgenden Beispiel gezeigt:

Instance

<table class="table table-striped">    
<thead>      
<tr>        
<th>Firstname</th>        
<th>Lastname</th>        
<th>Email</th>      
</tr>    
</thead>    
<tbody>      
<tr>        
<td>John</td>        
<td>Doe</td>        
<td>john@example.com</td>      
</tr>      
<tr>        
<td>Mary</td>        
<td>Moe</td>        
<td>mary@example.com</td>      
</tr>      
<tr>        
<td>July</td>        
<td>Dooley</td>        
<td>july@example.com</td>      
</tr>    
</tbody></table>

So richten Sie eine Tabelle in Bootstrap4 ein

Umrandete Tabelle

.table-bordered-Klasse kann Rahmen zur Tabelle hinzufügen

Instanz

<table class="table table-bordered">    
<thead>      
<tr>        
<th>Firstname</th>        
<th>Lastname</th>        
<th>Email</th>      
</tr>    
</thead>    
<tbody>      
<tr>        
<td>John</td>        
<td>Doe</td>        
<td>john@example.com</td>      
</tr>      
<tr>        
<td>Mary</td>        
<td>Moe</td>        
<td>mary@example.com</td>      
</tr>      
<tr>        
<td>July</td>        
<td>Dooley</td>        
<td>july@example.com</td>      
</tr>    
</tbody></table>

So richten Sie eine Tabelle in Bootstrap4 ein

Maus-Hover-Statustabelle

.table-hover-Klasse kann Maus-Hover-Effekt (grauer Hintergrund) zu jeder Zeile der Tabelle hinzufügen:

Instanz

<table class="table table-hover">    
<thead>      
<tr>        
<th>Firstname</th>        
<th>Lastname</th>        
<th>Email</th>      
</tr>    
</thead>    
<tbody>      
<tr>        
<td>John</td>        
<td>Doe</td>        
<td>john@example.com</td>      
</tr>      
<tr>        
<td>Mary</td>        
<td>Moe</td>        
<td>mary@example.com</td>      
</tr>      
<tr>        
<td>July</td>        
<td>Dooley</td>        
<td>july@example.com</td>      
</tr>    
</tbody></table>

So richten Sie eine Tabelle in Bootstrap4 ein

Schwarze Hintergrundtabelle

.table-dark-Klasse kann ein Schwarz hinzufügen Hintergrund zur Tabelle:

Beispiel

<table class="table table-dark">    
<thead>      
<tr>        
<th>Firstname</th>        
<th>Lastname</th>        
<th>Email</th>      
</tr>    
</thead>    
<tbody>      
<tr>        
<td>John</td>        
<td>Doe</td>        
<td>john@example.com</td>      
</tr>      
<tr>        
<td>Mary</td>        
<td>Moe</td>        
<td>mary@example.com</td>      
</tr>      
<tr>        
<td>July</td>        
<td>Dooley</td>        
<td>july@example.com</td>      
</tr>    
</tbody></table>

So richten Sie eine Tabelle in Bootstrap4 ein

Verwandte Empfehlungen: „Bootstrap Getting Started Tutorial“

Schwarz gestreifte Tabelle

Verwenden Sie die Klassen .table-dark und .table-striped zusammen, um eine schwarz gestreifte Tabelle zu erstellen:

Instanz

<table class="table table-dark table-striped">    
<thead>      
<tr>        
<th>Firstname</th>        
<th>Lastname</th>        
<th>Email</th>      
</tr>    
</thead>    
<tbody>      
<tr>        
<td>John</td>        
<td>Doe</td>        
<td>john@example.com</td>      
</tr>      
<tr>        
<td>Mary</td>        
<td>Moe</td>        
<td>mary@example.com</td>      
</tr>      
<tr>        
<td>July</td>        
<td>Dooley</td>        
<td>july@example.com</td>      
</tr>    
</tbody></table>

So richten Sie eine Tabelle in Bootstrap4 ein

Maus-Hover-Effekt – schwarze Hintergrundtabelle

Verwenden Sie die Klassen .table-dark und .table-hover zusammen, um den Maus-Hover-Effekt der schwarzen Hintergrundtabelle festzulegen. Stop-Effekt:

Instanz

<table class="table table-dark table-hover">    
<thead>      
<tr>        
<th>Firstname</th>        
<th>Lastname</th>        
<th>Email</th>      
</tr>    
</thead>    
<tbody>      
<tr>        
<td>John</td>        
<td>Doe</td>        
<td>john@example.com</td>      
</tr>      
<tr>        
<td>Mary</td>        
<td>Moe</td>        
<td>mary@example.com</td>      
</tr>      
<tr>        
<td>July</td>        
<td>Dooley</td>        
<td>july@example.com</td>      
</tr>    
</tbody></table>

So richten Sie eine Tabelle in Bootstrap4 ein

Geben Sie die Farbe an Klasse der Bedeutung

Pass Die Farbklasse mit angegebener Bedeutung kann die Farbe für die Zeilen oder Zellen der Tabelle festlegen: 

.table-primary蓝色: 指定这是一个重要的操作
.table-success绿色: 指定这是一个允许执行的操作
.table-danger红色: 指定这是可以危险的操作
.table-info浅蓝色: 表示内容已变更
.table-warning橘色: 表示需要注意的操作
.table-active灰色: 用于鼠标悬停效果
.table-secondary灰色: 表示内容不怎么重要
.table-light浅灰色，可以是表格行的背景
.table-dark深灰色，可以是表格行的背景

So richten Sie eine Tabelle in Bootstrap4 ein

Farbe der Tabellenüberschrift

In Bootstrap v4.0.0-beta.2 wird die Klasse .thead-dark verwendet, um der Tabellenüberschrift einen schwarzen Hintergrund hinzuzufügen Die Klasse .thead-light wird verwendet, um der Tabellenüberschrift einen grauen Hintergrund hinzuzufügen:

In Bootstrap v4 .0.0-beta In dieser Version wird die Klasse .thead-inverse verwendet, um der Tabelle einen schwarzen Hintergrund hinzuzufügen Header, und die Klasse .thead-default wird verwendet, um dem Tabellenkopf einen grauen Hintergrund hinzuzufügen.

So richten Sie eine Tabelle in Bootstrap4 ein

Kleinerer Tisch

.table-sm-Klasse wird verwendet, um die Polsterung durch Reduzierung der Polsterung zu reduzieren eine kleinere Tabelle:

Instanz

<table class="table table-bordered table-sm">    
<thead>      
<tr>        
<th>Firstname</th>        
<th>Lastname</th>        
<th>Email</th>      
</tr>    
</thead>    
<tbody>      
<tr>        
<td>John</td>        
<td>Doe</td>        
<td>john@example.com</td>      
</tr>      
<tr>        
<td>Mary</td>        
<td>Moe</td>        
<td>mary@example.com</td>      
</tr>      
<tr>        
<td>July</td>        
<td>Dooley</td>        
<td>july@example.com</td>      
</tr>    
</tbody></table>

So richten Sie eine Tabelle in Bootstrap4 ein

Responsive Tabelle

Die .table Die Klasse -responsive wird zum Erstellen responsiver Tabellen verwendet: Wenn die Bildschirmbreite weniger als 992 Pixel beträgt, wird eine horizontale Bildlaufleiste erstellt. Wenn die Breite des visuellen Bereichs größer als 992 Pixel ist, werden verschiedene Effekte angezeigt (keine Bildlaufleisten):

Beispiel

<div class="table-responsive"><table class="table">    
<thead>      
<tr>        
<th>#</th>        
<th>Firstname</th>        
<th>Lastname</th>        
<th>Age</th>        
<th>City</th>        
<th>Country</th>        
<th>Sex</th>        
<th>Example</th>        
<th>Example</th>        
<th>Example</th>        
<th>Example</th>      
</tr>    
</thead>    
<tbody>      
<tr>        
<td>1</td>        
<td>Anna</td>        
<td>Pitt</td>        
<td>35</td>        
<td>New York</td>        
<td>USA</td>        
<td>Female</td>        
<td>Yes</td>        
<td>Yes</td>        
<td>Yes</td>        
<td>Yes</td>      
</tr>    
</tbody></table></div>

So richten Sie eine Tabelle in Bootstrap4 ein

Sie können die Bildlaufleiste über die folgenden Klasseneinstellungen so einstellen, dass sie unter der angegebenen Bildschirmbreite angezeigt wird: 

.table-responsive-sm< 576px
.table-responsive-md< 768px
.table-responsive-lg< 992px
.table-responsive-xl< 1200px

Instanz

<div class="table-responsive-sm">  <table class="table">    ...  </table></div>

So richten Sie eine Tabelle in Bootstrap4 ein

Das obige ist der detaillierte Inhalt vonSo richten Sie eine Tabelle in Bootstrap4 ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

bootstrap default 内边距 table tbody
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 verwenden Sie Bootstrap-PaginierungNächster Artikel：So verwenden Sie Bootstrap-Paginierung

In Verbindung stehende Artikel

Mehr sehen