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などを加えて、スクロールバーをいつ受信するかを決めることができます.