カードにリストやナビーゲーションを加える - Bootstrapのチュートリアル

このレッスンでは、カードに リストグループと ナビゲーションを加えてみます。 今、ドキュメントには基本的なカードの スタイルが出来上がっています。 まずは、header があって body があって そしてタイトルですね、があって それから本文、card-text がある。 後、リンクが３つあるのですが、 このリンクをまずはリストグループに してみましょう。 リストグループはこの card-body の 外に作ります。 そして基本は ul 要素ですね。 そしてクラスを設定します。 クラスは list−group をまず１つ 設定して それからカードにリストグループを 入れる場合には list-group-flush という このクラスを指定します。 そして閉じると。 後はこの a 要素をドラッグして 持ってきます。 もちろん li で囲まないといけないのですが それはこれから加えていきます。 では、まずマルチカーソルで 加えたいので Option/Alt キーを押して ドラッグすると Dreamweaver の場合には 複数行にマルチカーソルが入ります。 ここで li というのを 加えましょう。 後はクラスを加えますが クラスは ちょっと長いですね、 長いので、１個１個加えましょう。 list−group-item です。 li 要素は item になりまして それからリンクはマウスポインタを 重ねた時に その反応をするといった インタラクションが必要ですね。 その場合には、list-group-item-action を 必要となります。 ということなので、これを コピーしたほうが楽そうですね。 コピーして ペースト ペーストです。 そして li 要素を閉じます。 どうでしょうか？ こんなスタイルになりましたね。 では、保存をして ブラウザで確認をしてみましょう。 リストグループが表示されています。 そしてクラスの list−group−item−action を 加えましたので マウスポインタを重ねると カラーが変わって 後、背景も薄っすらと変わるのですが クリックすると少しわかりやすいですね。 背景が少しグレーが濃くなりますので これでリストグループを加えることが できました。 次は、ナビゲーションです。 ナビゲーションはヘッダーに 加えることにしましょう。…