背景色を定める - Bootstrapのチュートリアル

このレッスンでは Bootstrap に あらかじめ用意された背景色を 要素に定めてみたいと思います。 今 div 要素が ９個ありまして ここにはまだカラーが 定められていません。 クラスで定めるんですけどそのクラス名、 実はここに書いてある通りです。 ９つのカラーを 設定してみたいと思います。 まず最初の div 要素から class で bg-primary そしてテキストはちょっと 黒だと冴えないので テキストにカラーを 設定しましょう。 テキストを白くしたいと思いますが ここでも Bootstrap のクラスが使えます。 text-white というのが テキストを白くします。 では次ですね。 class で bg-secondary これもテキストは 白抜きにしましょう。 text-white ということで こんな感じですね。 では３番目 どんどん続けていきます。 class で bg-success 成功したということですね。 これも白で抜いておきましょうか。 text-white それから次は class で bg-danger 危険ということで 注意なんかに使えますね。 予想通り赤いです。 これも抜きましょうか。 text-white ということで 次は class で bg-warning danger ほどはきつくないですけど 黄色ということですね。 これは白抜きにすると ちょっと見にくいかもしれませんので このままいきます。 次に class で bg-info 情報ということですね。 これは白の方が映えますかね。 text-white 次に class は bg-light ちょっとグレー気味になるんですけど 少し見にくいかもしれませんね。 薄いグレーがかかっているんですが 今度はこっちははっきりわかります。 class は bg-dark です。 今度は文字が見えなくなりますね。 最も真っ黒ではないのでよく見ると 文字が見えるんですけど ここはやはり文字は 白抜きにしましょう。 text-white 最後ですね。 これは class で bg-white これはもともと white ですから やっても区別がないですが white というクラスも 用意されています。 ちょっと行間が 狭くて見づらいので ここは style 要素で…