BootStrap 5(BS 5)3の学習
28558 ワード
ガイドバーには小さなダウンジャケット値で水平に区切られた表があります.
ストライプ表を作成するには:
テーブルの先頭にのみ色を追加することもできます.
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
の草案を作るストライプ表を作成するには:
<table class="table table-striped">
表とセルのすべての面に枠線を追加します.<table class="table table-bordered">
hoverを有効にするには、次の手順に従います.<table class="table table-hover">
テーブルに黒いバックグラウンドを表示するには、次の手順に従います.<table class="table table-dark">
黒い背景に暗い縞を付けるには:<table class="table table-dark table-striped">
ブラックバックグラウンドでもサスペンション効果が発生します.<table class="table table-dark table-hover">
表の枠線をクリアすることもできます.<table class="table table-borderless">
これでテーブルに色をつけることができます. <table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Defaultson</td>
<td>[email protected]</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>Joe</td>
<td>[email protected]</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr class="table-danger">
<td>Danger</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr class="table-info">
<td>Info</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
<tr class="table-warning">
<td>Warning</td>
<td>Refs</td>
<td>[email protected]</td>
</tr>
<tr class="table-active">
<td>Active</td>
<td>Activeson</td>
<td>[email protected]</td>
</tr>
<tr class="table-secondary">
<td>Secondary</td>
<td>Secondson</td>
<td>[email protected]</td>
</tr>
<tr class="table-light">
<td>Light</td>
<td>Angie</td>
<td>[email protected]</td>
</tr>
<tr class="table-dark">
<td>Dark</td>
<td>Bo</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
テーブルの先頭にのみ色を追加することもできます.
<thead class="table-dark">
<thead class="table-success">
ダウンジャケットを小さくして、表を小さくすることもできます.<table class="table table-sm">
表が長すぎる場合は、スクロールバーを反応的に追加します.<div class="table-responsive">
table-response-&の&部分にsm、md、lgなどを加えて、スクロールバーをいつ受信するかを決めることができます.Reference
この問題について(BootStrap 5(BS 5)3の学習), 我々は、より多くの情報をここで見つけました https://velog.io/@l1127xpla/BootStrap5BS5-공부하기-3テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol