Bootstrap muss jeden Tag Tabellen lernen_Javascript-Kenntnisse-js-Tutorial-php.cn

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

-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>

Nach dem Login kopieren

Gestreifter Tisch

Verwenden Sie .table-striped, um allem in

einen Zebrastreifenstil hinzuzufügen.
Fügen Sie im obigen Beispiel eine weitere Stilklasse
zum Tabellenelement hinzu

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

Mouseover

Verwenden Sie .table-hover, um jede Zeile in

auf den Mauszeigerzustand reagieren zu lassen.

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.

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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.

Verwandte Etiketten：

bootstrap 表格

Quelle：php.cn

Vorheriger Artikel：Nodejs Express-Nutzungstutorial (mit Code) Nächster Artikel：Javascript-Implementierung dynamischer statistischer Diagrammentwicklungsbeispiele_Javascript-Kenntnisse

Erklärung dieser Website

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

Neueste Artikel des Autors