テーブル
テーブル
<table>に.tableを指定する。
- .table-dark
- .table-striped
- .table-bordered
- .table-borderless
- .table-hover
- .table-sm
などを一緒に指定する。
<table class="table table-dark table-striped table-bordered table-hover table-sm">
<thead>
<tr><td>番号</td><td>国</td></tr>
</thead>
<tbody>
<tr><td>1</td><td>アメリカ</td></tr>
<tr><td>2</td><td>ロシア</td></tr>
</tbody>
</table>行やセルの色
trやtdに.table-primaryなど、または.bg-primaryなどを指定する。
bootstrap4では<thead>に.thead-light, .thead-darkを指定できたが、bootstrap5では.table-dark, .table-light, .table-primaryなどを指定するようなった。
<table class="table table-dark">
<thead class="table-danger">
<tr><td>番号</td><td>国</td></tr>
</thead>
<tbody>
<tr class="table-primary">
<td>1</td>
<td>アメリカ</td>
</tr>
<tr>
<td class="bg-info">2</td>
<td>ロシア</td>
</tr>
</tbody>
</table>レスポンシブ
.table-responsiveを指定したdivで.tableを囲むとレスポンシブとなる。
テキストがはみ出した場合、テーブルにスクロールバーが表示される。
（日本語の場合はテキストが折り返されるので、<table>に.text-nowrapを指定した場合だけスクロールバーが表示される）
<div class="table-responsive">
<table class="table text-nowrap">
<thead>
<tr><td>番号</td><td>国</td></tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>アメリカアメリカアアメリカアメリカアメリカアメリカアメリカアメリカアメリカアメリカアメリカ</td>
</tr>
</tbody>
</table>
</div>テキスト
左右配置
- .text-start
- .text-center
- .text-end
以下のようにブレークポイントを指定することも可能。
- .text-md-start
- .text-lg-center
bootstrap4では.text-left, .text-rightだったがbootstrap5では.text-start, .text-endに変わった。
<p class="text-end bg-warning">text-end</p>
<p class="text-md-center bg-info">text-md-center</p>切り詰め
.text-truncate
長いテキストを切り詰めて…を表示する。
以下の要素でのみ指定可能。
（ブロック要素・インライン要素の場合は、.w-25やstyle=”max-width: 100px”などでの横幅指定が必要）
- グリッドシステム(.col-1と.col-2で切り捨て位置が変わる)
- ブロック要素
- .d-inline-blockを指定したインライン要素
<div class="container">
<div class="row">
<div class="text-truncate col-1 bg-warning">col-1でのtext-truncate</div>
<div class="text-truncate col-2 bg-info">col-2でのtext-truncate</div>
</div>
</div>
<p class="text-truncate w-25 bg-warning">w-25でのtext-truncate</p>
<span class="text-truncate d-inline-block w-25 bg-warning">d-inline-block w-25でのtext-truncate</span>太字
- .fw-bold: 太字
- .fw-bolder: 太字(親要素基準)
- .fw-loighter: 細字(親要素基準)
bootstrap4では.font-weight-xxxだったがbootstrap5では.fw-xxxに変わった。
<p class="fw-bold">fw-bold</p>大文字小文字変換
- .text-lowercase
- .text-uppercase
- .text-capitalize
<p class="text-lowercase">ABC</p>
<p class="text-uppercase">abc</p>
<p class="text-capitalize">abc</p>アラート
アラート
.alertと.alert-primaryなどを指定する。
.alert内の要素に.alert-headingを指定してヘッダーとすると、背景色に合わせた文字色になる。
.alert内のリンクに.alert-linkを指定すると、背景色に合わせた文字色になる。
<div class="alert alert-warning">
<h5 class="alert-heading">ヘッダー</h5>
<p>alert-warning <a href="" class="alert-link">alert-link</a></p>
</div>閉じるボタン
.alertに以下のクラスを指定する。
- .alert-dismissible: 閉じるボタンの色を背景色に合わせる。
- .fade: 閉じた時のフェード効果。
- .show: 指定しないと.fadeの要素が表示されない。
.alert内のボタンに以下を指定する。
- .btn-close: 閉じるボタン用スタイル+右寄せ。
bootstrap4では.closeだったがbootstrap5では.btn-closeに変わった。 - data-bs-dismiss=”alert”: 閉じる機能の付加。
bootstrap4ではデータ属性data-xxxだったがbootstrap5ではdata-bs-xxxに変わった。
<div class="alert alert-info alert-dismissible fade show" role="alert">
<span>閉じるボタン付きアラート</span>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
コメント