Was sind die Tabellenstile von Bootstrap?

Es gibt 7 Tabellenstile: 1. „.table“-Stil, der die Basistabelle definieren kann, mit nur horizontalen Trennzeichen 2. „.table-striped“-Stil, der die Zebrastreifentabelle definieren kann, mit einem hellen Grau; Hintergrundfarbe in jeder zweiten Zeile der Tabelle ;3. „.table-bordered“-Stil, Randstil zu allen Tabellenzellen hinzufügen usw.

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

Bootstrap-Tabellenstil

☑ .table: Basistabelle, fügen Sie Basic für alle < hinzu ;table> Stil (nur horizontale Trennwände)

☑ .table-striped: Tisch mit Zebrastreifen

☑ .table-bordered: Tisch mit Rändern

☑ .table-hover: Tisch, der durch Mauszeiger hervorgehoben wird ?? 1 . Basistabelle

In Bootstrap wird die Basistabelle über den Klassennamen „.table“ gesteuert. Wenn Sie dem Element

keinen Klassennamen hinzufügen, hat die Tabelle keinen Stileffekt. Um die Basistabelle zu erhalten, müssen wir nur den Klassennamen „.table“ zum Element hinzufügen, um die Basistabelle von Bootstrap zu erhalten:

                                                                                                                                                    

基础表格

省份	城市
广东	深圳
广西	桂林
海南	三亚

Das Rendering ist wie folgt:

Es gibt Drei Hauptfunktionen „.table“:

Rand unten festlegen: 20 Pixel für die Tabelle und Zellenabstand festlegen

Eine hellgraue durchgezogene Linie mit 2 Pixeln am unteren Rand des Kopfes festlegen.

Oberen Rand mit 1 Pixel festlegen für jede Zelle Hellgraue durchgezogene Linie

2. Gestreifte Tabelle

• Um die Tabelle besser lesbar zu machen, ist es manchmal notwendig, die Tabelle einem Zebrastreifeneffekt zu ähneln. Vereinfacht ausgedrückt geht es darum, dem Tisch einen Hintergrundstreifeneffekt zu verleihen. Es ist nicht schwierig, diesen Tabelleneffekt in Bootstrap zu erzielen. Sie müssen lediglich den Klassennamen „.table-striped“ auf der Grundlage von hinzufügen:
  Rendering:
  Im Vergleich zur Basistabelle besteht der Effekt lediglich darin, dass jede zweite Zeile eine hellgraue Hintergrundfarbe im Tbody vorhanden ist. Das Implementierungsprinzip ist ebenfalls sehr einfach: Zur Implementierung wird der Strukturselektor „:nth-child“ von CSS3 verwendet, sodass es für Browser mit IE8 und niedrigeren Versionen keinen Hintergrundstreifeneffekt gibt.

  3. Randtabelle

  Einfache Tabellen haben nur in einem Teil der Tabelle Ränder, aber manchmal muss die gesamte Tabelle einen Randeffekt haben. Aus praktischen Gründen berücksichtigt Bootstrap auch diesen Tabelleneffekt, d. h. alle Zellen haben einen 1-Pixel-Rand. Die Verwendung von umrandeten Tabellen in Bootstrap ähnelt der Verwendung von Zebrastreifentabellen. Sie müssen lediglich einen „.table-bordered“-Klassennamen zur Basistabelle hinzufügen

  :

  Rendering:

  

  4. Hover-Tabelle

  Wenn die Maus über die Zeilen der Tabelle fährt, wird eine solche Tabelle durch eine hervorgehobene Hintergrundfarbe angezeigt und zeigt dem Benutzer immer an, dass sie gerade lesen Welche Zeile der Tabelle enthält Daten? Bootstrap hat Sie auch nicht enttäuscht und diesen Effekt berücksichtigt und einen „.table-hover“-Klassennamen bereitgestellt, um diesen Tabelleneffekt zu erzielen. Die durch Mouseover hervorgehobene Tabelle ist ebenfalls einfach zu verwenden. Sie müssen lediglich den Klassennamen „table-hover“ zum Element

  hinzufügen:

  Rendering:

  Maus Der Effekt der Hover-Hervorhebung wird hauptsächlich durch das „hover“-Ereignis erreicht. Wenn „tr:hover“ festgelegt ist, ist die Hintergrundfarbe von th und td die neue Farbe.

  Hinweis: Tatsächlich kann die Mouse-Hover-Highlight-Tabelle mit anderen Bootstrap-Tabellen gemischt werden. Um es einfach auszudrücken: Solange Sie möchten, dass Ihre Tabelle einen Hover-Highlight-Effekt hat, müssen Sie der Tabelle nur den Klassennamen „table-hover“ hinzufügen. Kombinieren Sie beispielsweise die verschiedenen zuvor vorgestellten Tabellen:

  <table class="table table-striped table-bordered table-hover">
  …
  </table>

  5. Kontexttabellen

  Fügen Sie durch Hinzufügen von Stilen zu tr und td Hintergrundfarben bestimmter Stile zu Zeilen oder Zellen hinzu, um Kontext und häufig verwendete Stile hervorzuheben. Es gibt aktive, Erfolg, Info, Gefahr und Warnung. Wie unten gezeigt:

  <table class="table">
    <caption>上下文表格布局</caption>
    <thead>
      <tr>
        <th>省份</th>
        <th>省会</th>
        <th>地级市数量</th></tr>
    </thead>
    <tbody>
      <tr class="active">
        <td>福建</td>
        <td>福州</td>
        <td>9</td></tr>
      <tr class="success">
        <td>广东</td>
        <td>广州</td>
        <td>21</td></tr>
      <tr class="warning">
        <td>广西</td>
        <td>南宁</td>
        <td>14</td></tr>
      <tr class="danger">
        <td>海南</td>
        <td>海口</td>
        <td>4</td></tr>
    </tbody>
  </table>

  Rendering:

  

  6. Responsives Formular

  随着各种手持设备的出现，要想让你的Web页面适合千罗万像的设备浏览，响应式设计的呼声越来越高。在Bootstrap中也为表格提供了响应式的效果，将其称为响应式表格。

  Bootstrap提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将

  置于这个容器当中，这样表格也就具有响应式效果。

  Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。示例如下：

  <div class="table-responsive">
  <table class="table table-bordered">
     …
  </table>
  </div>

  七、紧凑型表格：

  何谓紧凑型表格，简单理解，就是单元格没内距或者内距较其他表格的内距更小。换句话说，要实现紧凑型表格只需要重置表格单元格的内距padding的值。那么在Bootstrap中，通过类名“table-condensed”重置了单元格内距值。

  紧凑型表格的运用，也只是需要在

  基础上添加类名“table-condensed”：

  <table class="table table-condensed">

  Bootstrap中紧凑型的表格与基础表格差别不大，因为只是将单元格的内距由8px调至5px。

  更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

Das obige ist der detaillierte Inhalt vonWas sind die Tabellenstile von Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!