Erstellen Sie Tabelleninstanzen mit Boostrap

Die vorherigen Wörter

Bootstrap bietet uns sehr schöne und benutzerfreundliche Tabellenstile. Mit Boosttrap können Sie schnell Tabellen verschiedener Stile erstellen.

Grundlegendes Beispiel

Boostrap setzt den Stil der Tabelle <table> wie folgt zurück

table {
    background-color: transparent;
    border-spacing: 0;
    border-collapse: collapse;
}

<table>
  <caption>Optional table caption.</caption>
  <thead><tr>  <th>#</th>  <th>First Name</th>  <th>Last Name</th>  <th>Username</th></tr>
  </thead>
  <tbody><tr>  <th scope="row">1</th>  <td>Mark</td>  <td>Otto</td>  <td>@mdo</td></tr><tr>  <th scope="row">2</th>  <td>Jacob</td>  <td>Thornton</td>  <td>@fat</td></tr><tr>  <th scope="row">3</th>  <td>Larry</td>  <td>the Bird</td>  <td>@twitter</td></tr>
  </tbody></table>

Fügen Sie die Klasse <table> zu jedem .table-Tag hinzu, um ihm einen einfachen Stil zu verleihen – ein wenig Polsterung und eine horizontale Trennlinie

<table class="table">
  ...</table>

Gestreifte Tabelle

Mit der Klasse .table-striped können Sie jeder Zeile innerhalb von <tbody> einen Zebrastreifenstil hinzufügen

　[Hinweis] Die gestreifte Tabelle basiert auf dem :nth-child CSS-Selektor, und diese Funktion wird von IE8 nicht unterstützt-

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}

<table class="table table-striped">
  ...</table>

Tabelle mit Rändern

Klasse .table-bordered hinzugefügt, um der Tabelle und jeder Zelle darin Ränder hinzuzufügen

<table class="table table-bordered">
  ...</table>

Maus-Hover

Durch Hinzufügen der .table-hover-Klasse können Sie jedes Element in

<table class="table table-hover">
  ...</table></p>
<div class="cnblogs_code"><pre class="brush:php;toolbar:false">.table-hover > tbody > tr:hover {
    background-color: #f5f5f5;
}

Kompakte Tabelle

Durch das Hinzufügen der .table-confided-Klasse kann die Tabelle kompakter gemacht werden und der Abstand in den Zellen wird halbiert

<table class="table table-condensed">
  ...</table>

Statusklasse

Über diese Statusklassen können Sie die Farbe für Zeilen oder Zellen festlegen

Class    　　描述
.active     鼠标悬停在行或单元格上时所设置的颜色
.success    标识成功或积极的动作
.info    　　标识普通的提示信息或动作
.warning    标识警告或需要用户注意
.danger     标识危险或潜在的带来负面影响的动作

<table class="table">
  <thead><tr>  <th>#</th>  <th>Column heading</th>  <th>Column heading</th>  <th>Column heading</th></tr>
  </thead>
  <tbody><tr class="active">  <th scope="row">1</th>  <td>Column content</td>  <td>Column content</td>  <td>Column content</td></tr><tr class="success">  <th scope="row">2</th>  <td>Column content</td>  <td>Column content</td>  <td>Column content</td></tr><tr class="info">  <th scope="row">3</th>  <td>Column content</td>  <td>Column content</td>  <td>Column content</td></tr><tr class="warning">  <th scope="row">4</th>  <td>Column content</td>  <td>Column content</td>  <td>Column content</td></tr><tr class="danger">  <th scope="row">5</th>  <td>Column content</td>  <td>Column content</td>  <td>Column content</td></tr><tr>  <th scope="row">6</th>  <td>Column content</td>  <td>Column content</td>  <td>Column content</td></tr>
  </tbody></table>

Responsive Tabelle

Sie können eine responsive Tabelle erstellen, indem Sie jedes .table-Element in ein .table-responsives Element einschließen scrollt horizontal auf Geräten mit kleinem Bildschirm (weniger als 768 Pixel). Wenn der Bildschirm größer als 768 Pixel ist, verschwindet die horizontale Bildlaufleiste

<div class="table-responsive">
  <table class="table"><thead>  <tr><th>#</th><th>Table heading</th><th>Table heading</th><th>Table heading</th>  </tr></thead><tbody>  <tr><th scope="row">1</th><td>Table cell</td><td>Table cell</td><td>Table cell</td>  </tr>  <tr><th scope="row">2</th><td>Table cell</td><td>Table cell</td><td>Table cell</td>  </tr>  <tr><th scope="row">3</th><td>Table cell</td><td>Table cell</td><td>Table cell</td>  </tr></tbody>
  </table></div>

Das obige ist der detaillierte Inhalt vonErstellen Sie Tabelleninstanzen mit Boostrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!