文字と背景色の書式：Bootstrapコードまとめ
Bootstrapのコードを少しずつまとめていきます。
今回は行揃え・文字色・背景色の書式です。
～ 目次 ～
- 行揃えの書式
- 文字色と背景色の書式
行揃えの書式
Bootstrapではクラスを適用するだけで行揃えを指定することが可能です。
クラスは5種類あります。
行揃えのクラス
| クラス | 行揃え |
|---|---|
| text-left | 左揃え |
| text-center | 中央揃え |
| text-right | 右揃え |
| text-justify | 両端揃え |
| text-nowrap | 改行しないで配置 |
ブラウザでの表示例は サンプルページ をご参照ください。
文字色と背景色の書式
Bootstrapでは以下の5色が定義されています。
- primary (重要) #428bca
- success (成功) #5cb85c
- info (お知らせ) #5bc0de
- warning (警告) #f0ad4e
- danger (危険) #d9534f
この5色を文字色や背景色に指定する場合、以下のクラスを適用します。
5色をメインに使って統一感のあるデザインを作っていくことが可能です。
文字色や背景色のクラス
| 文字色 | 背景色 | 指定される色 |
|---|---|---|
| text-primary | bg-primary | 青系 |
| text-success | bg-success | 緑系 |
| text-info | bg-info | 薄青系 |
| text-warning | bg-warning | 黄系 |
| text-danger | bg-danger | 薄赤系 |
| text-muted | 灰系 |
ブラウザでの表示例は サンプルページ をご参照ください。