基本表:
<表> <tr> <td> username </td> <td>パスワード</td> </tr> <tr> <td> ahhh </td> <td> 1111 </td> </tr> </table>
<table>タグに.tableクラスを追加すると、基本的なスタイル、少量のパディング、水平方向の仕切りが得られます。
ディスプレイ効果は次のとおりです。
縞模様のフォーム:
追加:class = "テーブルテーブルストライプ"にテーブルタグには、tbody内の各行にゼブラストライプを追加できます
<表> <tr> <td> username </td> <td>パスワード</td> </tr> <tr> <td> ahhh </td> <td> 1111 </td> </tr> </table>
ディスプレイ効果は次のとおりです。
境界付きのテーブル:
クラス= "テーブルテーブルボーダー"をテーブルタグに追加して、テーブルの各セルに境界線を追加します。
<表> <tr> <td> username </td> <td>パスワード</td> </tr> <tr> <td> ahhh </td> <td> 1111 </td> </tr> </table>
ディスプレイ効果は次のとおりです。
締め付けフォーム:
.table-condensedクラスを追加すると、テーブルがよりコンパクトになり、セル内のパディングが半分に減少します。
<表> <tr> <td> username </td> <td>パスワード</td> </tr> <tr> <td> ahhh </td> <td> 1111 </td> </tr> </table>
ディスプレイ効果は次のとおりです。
レスポンシブテーブル:
.table-responsive要素内に任意の.table要素をラップし、小さな画面デバイス(768px未満)で水平方向にスクロールする応答性のあるテーブルを作成します。画面が幅768pxを超えると、水平スクロールバーが消えます
<div> <table> <tr> <td> username </td> <td>パスワード</td> </tr> <tr> <td> ahhh </td> <td> 1111 </td> </tr> </table> </div>
上記は、編集者が紹介した6番目のブートストラップフォームスタイルの紹介の完全な説明です。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます!