Anwenden von Stilen auf Tabellen mit Twitter Bootstrap

Weiß jemand, ob es möglich ist, Stile mit Twitter Bootstrap auf Tabellen anzuwenden? Ich kann einige Tabellenbeispiele in einigen älteren Tutorials sehen, aber nicht auf der Bootstrap-Site selbst.

Ich habe versucht, es einzurichten, aber auf die Tabellen auf meiner Seite wurde fast kein Stil angewendet.

<table>
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Language</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Some</td>
            <td>One</td>
            <td>English</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Joe</td>
            <td>Sixpack</td>
            <td>English</td>
        </tr>
    </tbody>
</table>

Welche Klassen brauche ich, um mich zu bewerben?

Bootstrap bietet verschiedene Tabellenstile. Dokumentation und Beispiele finden Sie in den Basis-CSS-Tabellen .

Der folgende Stil bietet gut aussehende Tabellen:

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

Twitter-Bootstrap-Tabellen können gestylt und gut gestaltet werden. Sie können Ihre Tabelle so gestalten, dass Sie nur einige Klassen zu Ihrer Tabelle hinzufügen, und sie wird gut aussehen. Sie können es in Ihren Datenberichten verwenden, um Informationen anzuzeigen usw.

Sie können verwenden:

basic table
Striped rows
Bordered table
Hover rows
Condensed table
Contextual classes
Responsive tables

Gestreifte Reihen Tabelle:

    <table class="table table-striped" width="647">
    <thead>
    <tr>
    <th>#</th>
    <th>Name</th>
    <th>Address</th>
    <th>mail</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>1</td>
    <td>Thomas bell</td>
    <td>Brick lane, London</td>
    <td>[email protected]</td>
    </tr>
    <tr>
    <td height="29">2</td>
    <td>Yan Chapel</td>
    <td>Toronto Australia</td>
    <td>[email protected]</td>
    </tr>
    <tr>
    <td>3</td>
    <td>Pit Sampras</td>
    <td>Berlin, Germany</td>
    <td>Pit @yahoo.com</td>
    </tr>
    </tbody>
    </table>

Verkürzte Tabelle:

Um eine Tabelle zu komprimieren, müssen Sie class class = ”table table-condensed” hinzufügen.

    <table class="table table-condensed" width="647">
    <thead>
    <tr>
    <th>#</th>
    <th>Sample Name</th>
    <th>Address</th>
    <th>Mail</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>1</td>
    <td>Thomas bell</td>
    <td>Brick lane, London</td>
    <td>[email protected]</td>
    </tr>
    <tr>
    <td height="29">2</td>
    <td>Yan Chapel</td>
    <td>Toronto Australia</td>
    <td>[email protected]</td>
    </tr>
    <tr>
    <td>3</td>
    <td>Pit Sampras</td>
    <td>Berlin, Germany</td>
    <td>Pit @yahoo.com</td>
    </tr>
    <tr>
    <td></td>
    <td colspan="3" align="center"></td>
    </tr>
    </tbody>
    </table>

Ref: http://twitterbootstrap.org/twitter-bootstrap-table-example-tutorial

Sie können auch TR-Klassen anwenden: Info, Fehler, Warnung oder Erfolg.

Nur ein weiterer gut aussehender Tisch. Ich habe die Klasse "table-hover" hinzugefügt, weil sie einen schönen Schwebeeffekt bietet.

   <h3>NATO Phonetic Alphabet</h3>    
   <table class="table table-striped table-bordered table-condensed table-hover">
   <thead>
    <tr> 
        <th>Letter</th>
        <th>Phonetic Letter</th>

    </tr>
    </thead>
  <tr>
    <th>A</th>
    <th>Alpha</th>

  </tr>
  <tr>
    <td>B</td>
    <td>Bravo</td>

  </tr>
  <tr>
    <td>C</td>
    <td>Charlie</td>

  </tr>

</table>

Bootstrap bietet verschiedene Klassen für Tabellen

 <table class="table"></table>
 <table class="table table-bordered"></table>
 <table class="table table-hover"></table>
 <table class="table table-condensed"></table>
 <table class="table table-responsive"></table>

Sie können jeder einzelnen Zeile wie folgt Kontextklassen hinzufügen:

<tr class="table-success"></tr>
<tr class="table-error"></tr>
<tr class="table-warning"></tr>
<tr class="table-info"></tr>
<tr class="table-danger"></tr>

Sie können sie auch wie oben zu Tabellendaten hinzufügen

Sie können Ihre Tabellengröße festlegen, indem Sie Klassen als table-sm usw. festlegen .

Sie können benutzerdefinierte Klassen hinzufügen und Ihr eigenes Styling hinzufügen:

<table class="table">
  <thead style = "color:red;background-color:blue">
    <tr>
      <th></th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>   
      <td>Asdf</td>
      <td>qwerty</td>
    </tr>
  </tbody>
</table>

Auf diese Weise können Sie benutzerdefiniertes Styling hinzufügen. Ich habe Inline-Styling nur zum Beispiel gezeigt, wie es funktioniert. Sie können Klassen hinzufügen und sie auch in Ihrem CSS aufrufen.