So richten Sie eine Tabelle in Bootstrap4 ein-Bootstrap-Tutorial-php.cn

So richten Sie eine Tabelle in Bootstrap4 ein

爱喝马黛茶的安东尼

Freigeben： 2019-07-17 16:18:14

Original

2622 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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深灰色，可以是表格行的背景

Nach dem Login kopieren

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.

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

Instanz

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

Nach dem Login kopieren

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!