Bootstrap muss jeden Tag Tabellen lernen_Javascript-Kenntnisse

Dieser Artikel erklärt hauptsächlich Tabellen. Dies ist eigentlich nichts Unbekanntes für Leute, die Websites erstellt haben, und man kann sagen, dass es sich um die am häufigsten verwendete Anzeige verschiedener Listen handelt. Manchmal ist dies auch auf die Bedürfnisse von Benutzern oder Vorgesetzten zurückzuführen . Kopfschmerzen. Werfen wir einen Blick darauf, welche Arten von Tabellen Bootstrap für uns vorbereitet hat. Wie unten gezeigt:

1.Basisgehäuse
2. Gestreifter Tisch
3. Tabelle mit Rändern
4. Mouseover
5. Komprimierungstabelle
6. Statusklasse
7. Responsives Formular
8. Zusammenfassung

Basisgehäuse
Das Hinzufügen von .table zu einem beliebigen f5d188ed2c074f8b944552db028f98a1-Tag verleiht ihm einen einfachen Stil – ein wenig Abstand und eine horizontale Trennlinie. Dieser Ansatz sieht sehr überflüssig aus! ? Wir sind jedoch der Meinung, dass das Tabellenelement weit verbreitet ist und wenn wir ihm einen Standardstil zuweisen, kann dies Auswirkungen auf Plug-Ins wie Kalender- und Datumsauswahl haben. Daher haben wir uns entschieden, seinen Stil zu trennen.

Ein einfaches Tabellenbeispiel

 <div class="container">
 <table class="table"> 
  <caption>Table基本案例</caption> 
  <thead> 
  <tr> 
   <th>First Name</th> 
   <th>Last Name</th>
   <th>User Name</th> 
  </tr> 
  </thead> 
  <tbody> 
  <tr> 
   <td>aehyok</td> 
   <td>leo</td> 
   <td>@aehyok</td> 
  </tr>
  <tr> 
   <td>lynn</td> 
   <td>thl</td> 
   <td>@lynn</td> 
  </tr>
  </tbody> 
 </table> 
 </div>

Gestreifter Tisch

Verwenden Sie .table-striped, um allem in 92cee25da80fac49f6fb6eec5fd2c22a einen Zebrastreifenstil hinzuzufügen.
Fügen Sie im obigen Beispiel eine weitere Stilklasse
zum Tabellenelement hinzu 850aad7c9803f65863edd23ef123b2cc
Mit Blick auf die aktuelle Wirkung gibt es noch einige Änderungen.

Tabelle mit Rändern
Verwenden Sie .table-bordered, um der Tabelle und jeder darin enthaltenen Zelle Rahmen hinzuzufügen.
Oder fügen Sie im ersten Beispiel eine weitere Stilklasse
zum Tabellenelement hinzu 8e6a5157b5b720a6b30bc7886b8a1bae

Mouseover

Verwenden Sie .table-hover, um jede Zeile in 92cee25da80fac49f6fb6eec5fd2c22a auf den Mauszeigerzustand reagieren zu lassen.
95df9d71803495963fc38c12f79bae2c
Bewegen Sie die Maus auf diese Linie und es wird der Effekt auftreten

Kompakter Tisch

Verwenden Sie .table-confided, um die Tabelle kompakter zu machen, und die Polsterung in den Zellen wird um die Hälfte reduziert.
afe23b025eaed1c4a91ebf16b1bf6493
Dieser Effekt ist nicht so offensichtlich, vor allem weil die Auffüllung des Inhalts in der Zelle um die Hälfte reduziert wird.
Statusklasse

Über diese Statusklassen können Farben für lizenzierte Zellen eingestellt werden.

<table class="table table-condensed"> 
  <caption>Table</caption> 
  <thead> 
  <tr> 
   <th>#</th>
   <th>First Name</th> 
   <th>Last Name</th>
   <th>User Name</th> 
  </tr> 
  </thead> 
  <tbody> 
  <tr class="active"> 
   <td>1</td>
   <td>aehyok</td> 
   <td>leo</td> 
   <td>@aehyok</td> 
  </tr>
  <tr class="success"> 
   <td>2</td>
   <td>lynn</td> 
   <td>thl</td> 
   <td>@lynn</td> 
  </tr>
  <tr class="warning"> 
   <td>3</td> 
   <td>Amdy</td> 
   <td>Amy</td> 
   <td>@Amdy</td> 
  </tr>
  <tr class="danger"> 
   <td>4</td> 
   <td>Amdy</td> 
   <td>Amy</td> 
   <td>@Amdy</td> 
  </tr>
  <tr > 
   <td class="success">5</td> 
   <td class="danger">Amdy</td> 
   <td class="warning">Amy</td> 
   <td class="active">@Amdy</td> 
  </tr>
  </tbody> 
 </table> 

Responsives Formular

Umschließen Sie jede .table mit .table-responsive, um eine reaktionsfähige Tabelle zu erstellen, die auf Geräten mit kleinem Bildschirm (weniger als 768 Pixel) horizontal scrollt. Wenn der Bildschirm größer als 768 Pixel ist, verschwindet die horizontale Bildlaufleiste. 

Sehen Sie sich die angezeigte Bildlaufleiste an.

<div class="table-responsive">
 <table class="table"> 
  <caption>Table</caption> 
  <thead> 
  <tr> 
   <th>#</th>
   <th>First Name</th> 
   <th>Last Name</th>
   <th>User Name</th> 
  </tr> 
  </thead> 
  <tbody> 
  <tr class="active"> 
   <td>1</td>
   <td>aehyok</td> 
   <td>leo</td> 
   <td>@aehyok</td> 
  </tr>
  <tr class="success"> 
   <td>2</td>
   <td>lynn</td> 
   <td>thl</td> 
   <td>@lynn</td> 
  </tr>
  <tr class="warning"> 
   <td>3</td> 
   <td>Amdy</td> 
   <td>Amy</td> 
   <td>@Amdy</td> 
  </tr>
  <tr class="danger"> 
   <td>4</td> 
   <td>Amdy</td> 
   <td>Amy</td> 
   <td>@Amdy</td> 
  </tr>
  <tr > 
   <td class="success">5</td> 
   <td class="danger">Amdy</td> 
   <td class="warning">Amy</td> 
   <td class="active">@Amdy</td> 
  </tr>
  </tbody> 
 </table>
 </div>

Ein paar einfache Stilklassen können die Seite auf dieses Niveau bringen, was großartig ist. Sie müssen sich in Zukunft keine Gedanken mehr über die Anpassung des Stils machen.

Das Obige ist eine Anzeige der am häufigsten verwendeten Listen von Bootstrap-Tabellen. Ich hoffe, dass es für das Lernen aller hilfreich sein wird.