リストグループを使う - Bootstrapのチュートリアル

このレッスンではリストグループの スタイルをご紹介します。 今このドキュメントには ２種類のグループのテキストがあるんですけど 上の方は文字通り ul のリストですね。 li 要素が４つあります。 下の方は a 要素を div で囲ってあります。 どちらもリストグループのスタイルを 割り当てることができます。 その結果ほぼ同じスタイルになります。 まずは ul の方から 早速やってみましょう。 ul に対しては class は list-group ですね。 これを設定します。 そして今度は li 要素 それぞれに対してなんですけど class で list-group-item ということで設定していきます。 これはコピーしましょうか。 結構リストグループの クラス名は長いので 打ってると面倒臭いんですよね。 刻々とこちらが 変わってきますね。 これがリストグループの スタイルです。 モバイルとか画面の小さい デバイスで使うのに適していると思います。 そして active とか disabled というのがありますけど その設定を加えることができます。 li 要素の方に active とすると このようにブルーで背景が、 しかも文字は白抜きですね。 今度は最後４つ目なんですけど disabled というふうにするとグレーで 押せない感じになります。 下のこの a 要素、随分 雰囲気違うんですけど 同じスタイルにすることができます。 まず一番親の div 要素には ul と同じように リストグループを設定します。 それから a 要素にはクラスとして list-group-item を 同じように設定するんですが a 要素ということは クリックしたら反応すると いうことになりますよね。 あとマウスポインタを重ねた時に 重ねたということがわかるような スタイルにしたいと、 そういう場合には もう１つクラスを加えます。 list-group-item-action 長いですね。 これはもう全部コピーします。 ［コピー］して ［ペースト］ ［ペースト］ ［ペースト］と。 それから active と disabled も 付け加えましょう。 active と disabled。 そして結果は ブラウザで確認しましょう。 ファイルを保存します。 ul のリストも a…