Grundtabelle:
<table> <tr> <td> Benutzername </td> <td> Passwort </td> </tr> <tr> <td> ahhh </td> <td> 1111 </td> </tr> </table>
Durch das Hinzufügen einer .table zum <table> -Tag kann ihm einen grundlegenden Stil, eine kleine Menge an Polsterung und horizontale Trennwände verleihen.
Der Anzeigeeffekt ist wie folgt:
Gestreifte Form:
Hinzufügen: class = "tabel table gestreift" zum tabelletik
<table> <tr> <td> Benutzername </td> <td> Passwort </td> </tr> <tr> <td> ahhh </td> <td> 1111 </td> </tr> </table>
Der Anzeigeeffekt ist wie folgt:
Tisch mit Grenzen:
Fügen Sie dem Tabellen-Tag Class = "Tabelle Tabelle" hinzu, um jeder Zelle der Tabelle Grenzen hinzuzufügen.
<table> <tr> <td> Benutzername </td> <td> Passwort </td> </tr> <tr> <td> ahhh </td> <td> 1111 </td> </tr> </table>
Der Anzeigeeffekt ist wie folgt:
Anziehungsform:
Durch das Hinzufügen der .table-condensed Klasse kann die Tabelle kompakter werden, und die Polsterung in den Zellen wird um die Hälfte reduziert.
<table> <tr> <td> Benutzername </td> <td> Passwort </td> </tr> <tr> <td> ahhh </td> <td> 1111 </td> </tr> </table>
Der Anzeigeeffekt ist wie folgt:
Responsive Tabelle:
Wickeln Sie jedes .table -Element in das .table-responsive Element und erstellen Sie eine Responsive-Tabelle, in der horizontal auf einem kleinen Bildschirmgerät (weniger als 768px) scrollen. Wenn der Bildschirm größer als 768px Breite ist, verschwindet die horizontale Bildlaufleiste
<Div> <table> <tr> <td> Benutzername </td> <td> Passwort </td> </tr> <tr> <td> ahhh </td> <td> 1111 </td> </tr> </table> </div>
Das obige ist die vollständige Beschreibung der Sechsten Bootstrap -Formstil -Einführung, die vom Editor eingeführt wurde. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!