Bootstrapにはいくつかのカラーが用意されています。 今回はカラーの使い方を紹介します。
Bootstrap4のバージョン4.3をベースに書いています。
テキストカラー
文字色の指定は text-○○ で指定します。
白など一部見辛い色は背景色を指定しています。
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50
上記を踏まえた例になります。
class名に指定することにより色が反映されます。
・文字の色
テキスト
・コード
<p class="text-success">テキスト</p>・リンクの場合
リンク
・コード
<a href="#" class="text-success">リンク</a>アンカーに使用した場合、擬似クラスのホバー（:hover）がデフォルト指定されています。
マウスオーバー時に色が暗く変化します。
バックグラウンドカラー
背景色の指定は bg-○○ で指定します。
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent
テキストの例でカラーをアンカーに指定した場合、色が暗く変化する例を書きましたが、背景をした場合も同様にマウスオーバー時に色が変化します。例を載せてみたので、実際に確認してみてください。
アンカーに背景色を指定
・コード
<a href="#" class="p-3 mb-2 bg-primary text-white">アンカーに背景色を指定</a>テキストや背景だけでは無く、ボーダーやボタン等にも色を指定する事ができます。Bootstrapで用意された色のみだと、どうしても似たようなサイトになってしまいますが、あらかじめ擬似クラスも指定されているので、CSSが苦手な方にはこの方法を覚えておいて損はないかと思います。
このサイトも使用している箇所が多いです♪
時短にもなるし便利だと思いますよ。
今回は、サンプルを用意していませんが、いろいろ試してみてください。
