Detaillierte grafische Erläuterung der Verwendung von Tabellen und zugehörigen Stilen im Bootstrap-Framework-CSS-Tutorial-php.cn

Detaillierte grafische Erläuterung der Verwendung von Tabellen und zugehörigen Stilen im Bootstrap-Framework

yulia

Freigeben： 2018-10-16 10:56:56

Original

7770 Leute haben es durchsucht

Das Bootstrap-Framework wird aufgrund seiner Benutzerfreundlichkeit, seines schönen Layouts und seines reaktionsfähigen Layouts häufig verwendet. In diesem Artikel wird anhand des Bootstrap-Tabellenbeispiels erläutert, wie die Tabelle in Bootstrap verwendet wird, sowie über die zugehörigen Stile der Tabelle Es hat einen gewissen Referenzwert und interessierte Freunde können sich darauf beziehen.

Bevor Sie das Bootstrap-Framework-Layout verwenden, müssen Sie zunächst die relevanten jQuery-, CSS- und JS-Dateien vorstellen. Wenn Sie sich nicht sicher sind, können Sie meinen vorherigen Artikel lesen: So verwenden Sie das Bootstrap-Framework in HTML Seiten , oder sehen Sie sich das Bootstrap-Video-Tutorial an.

1. Grundtabelle

Nachdem das Grundlayout fertiggestellt ist, fügen Sie dem Tag

den Klassennamen hinzu ( ein wenig Inhaltsauffüllung und horizontale Trennlinien).

Beispiel für eine Bootstrap-Tabelle: Erstellen Sie eine Tabelle mit sechs Zeilen und vier Spalten für statistische Studenteninformationen. Der spezifische Code lautet wie folgt:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <table class="table" style="width: 800px;" >
         <thead>
             <tr><th>学号</th><th>姓名</th><th>年龄</th><th>地址</th></tr>
         </thead>
         <tbody>
             <tr><td>1</td><td>郭靖</td><td>25</td><td>安徽</td></tr>
             <tr><td>2</td><td>田秋元</td><td>23</td><td>上海</td></tr>
             <tr><td>3</td><td>杨容</td><td>24</td><td>江西</td></tr>
             <tr><td>4</td><td>许悦</td><td>21</td><td>浙江</td></tr>
             <tr><td>5</td><td>张柏芝</td><td>22</td><td>新疆</td></tr>
         </tbody>
     </table>
 </body>
</html>

Nach dem Login kopieren

Rendering:

Detaillierte grafische Erläuterung der Verwendung von Tabellen und zugehörigen Stilen im Bootstrap-Framework

Fügen Sie jeder Reihe ein Zebrastreifenmuster hinzu.

 <table class="table table-striped "   style="max-width:90%" >

Nach dem Login kopieren

Der Effekt ist wie in der Abbildung dargestellt:

3. Tabelle mit Rand

Detaillierte grafische Erläuterung der Verwendung von Tabellen und zugehörigen Stilen im Bootstrap-Framework

Fügen Sie im Tag

die Klasse class name.table-bordered hinzu, um der Tabelle und jeder Zelle darin einen Rahmen hinzuzufügen.

 <table class="table table-bordered "   style="max-width:90%" >

Nach dem Login kopieren

Der Effekt ist wie im Bild dargestellt:

4. Mouseover-Tisch

Detaillierte grafische Erläuterung der Verwendung von Tabellen und zugehörigen Stilen im Bootstrap-Framework

Fügen Sie im Tag

die Klasse class name.table-hover hinzu, damit jede Zeile in Wenn die Maus über die erste Zeile fährt, ändert sich die Hintergrundfarbe der ersten Zeile in Grau. Die Wirkung von

 <table class="table table-hover "   style="max-width:90%" >

Nach dem Login kopieren

ist wie im Bild dargestellt:

Kurztabelle

Detaillierte grafische Erläuterung der Verwendung von Tabellen und zugehörigen Stilen im Bootstrap-Framework

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

 <table class="table table-condensed "   style="max-width:90%" >

Nach dem Login kopieren

Vergleichen Sie die obigen Bilder, um den Effekt der Komprimierung der Tabelle zu sehen:

Detaillierte grafische Erläuterung der Verwendung von Tabellen und zugehörigen Stilen im Bootstrap-Framework 6. Responsive Tabelle

Umschließen Sie das Element mit dem Klassennamen .table in das Element mit dem Klassennamen .table-responsive, um eine responsive Tabelle zu erstellen, wenn der Bildschirm kleiner als 768 Pixel ist Der Bildschirm ist größer als 768 Pixel und die horizontale Bildlaufleiste verschwindet. Die Wirkung von

<table class="table" >
         <thead>
             <tr><th>学号</th><th>姓名</th><th>年龄</th><th>地址</th></tr>
         </thead>
         <tbody>
             <tr><td>1</td><td>郭靖</td><td>25</td><td>安徽</td></tr>
             <tr><td>2</td><td>田秋元</td><td>23</td><td>上海</td></tr>
             <tr><td>3</td><td>杨容</td><td>24</td><td>江西</td></tr>
             <tr><td>4</td><td>许悦</td><td>21</td><td>浙江</td></tr>
             <tr><td>5</td><td>张柏芝</td><td>22</td><td>新疆</td></tr>
             <tr><td>1</td><td>郭靖</td><td>25</td><td>安徽</td></tr>
             <tr><td>2</td><td>田秋元</td><td>23</td><td>上海</td></tr>
             <tr><td>3</td><td>杨容</td><td>24</td><td>江西</td></tr>
             <tr><td>4</td><td>许悦</td><td>21</td><td>浙江</td></tr>
             <tr><td>5</td><td>张柏芝</td><td>22</td><td>新疆</td></tr>
         </tbody>
</table>

Nach dem Login kopieren

ist wie in der Abbildung dargestellt:

Das Obige verwendet Bootstrap-Tabellenbeispiele, um die Verwendung von Tabellentabellen und verwandten Stilen vorzustellen Wenn ja, können Sie die offizielle Website des Bootstrap-Frameworks besuchen: http://v3.bootcss.com. Weitere verwandte Tutorials finden Sie im

Bootstrap-Online-Handbuch

Detaillierte grafische Erläuterung der Verwendung von Tabellen und zugehörigen Stilen im Bootstrap-Framework

Das obige ist der detaillierte Inhalt vonDetaillierte grafische Erläuterung der Verwendung von Tabellen und zugehörigen Stilen im Bootstrap-Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!