ボタングループを使う - Bootstrapのチュートリアル

このレッスンではボタンをグループ化する スタイルについてご紹介をします。 今あらかじめ ボタンが用意されています。 少し大きさや数が違ったりしていますけど カラーについては btn-secondary を使っています。 ですからグレーですね。 まずこの３つある ボタンですね。 Left・Middle・Right とありますが これをグループ化してみましょう。 この３つのボタンは ここなんですけど グループ化するには div 要素で囲みます。 クラスには btn-group という指定をします。 そしてここにインデントを かけましょうかね。 見やすいように その上で閉じます。 そうするとこのように ボタンがくっついてしまうんですね。 でも重ねるとハイライトしますから それぞれは別のボタンですけど 一体化したような スタイルになるわけですね。 これは組み合わせることもできます。 例えば同じ設定ですから コピーしちゃいましょう。 これをコピーしてきて この数字ですね、 数字の所に設定をしていきますけど ［ペースト］ そしてインデントを４番までかけて ここまでを１つのグループにします。 div を閉じて またペーストですね。 インデントを今度は ３つかけて 閉じます。 そしてまたペーストですね。 最後は１個だけのグループ ということなってしまうんですけど インデントをかけて 閉じると。 そうするとこんなスタイルになりますね。 これをまとめてまた１つの ツールバーに してしまうということができます。 これはまた div で囲むんですけど class として btn-toolbar というふうにします。 閉じてしまいましょう。 そうしたらこの１から ８までの数字ですね。 これをドラッグして移動して インデントをかけます。 そうすると、こんな風に ちょっと寄っちゃいましたけど この８つが１つのグループに なったわけです。 もう少し正確にいうと ３つのボタングループを １つにまとめてツールバーにした。 ただ間隔が詰まってしまうのは ちょっと見にくいので これは class で加えることにしましょう。 btn-group それぞれに マージン right ですね。 単位２ぐらいでいきましょう。 これが２ですね。 では１つこちらも マージン right の ２ということで見やすくなりました。 btn-group についてなんですが btn-group に大小、 サイズを決めることができます。 ではこの最初の３つの ボタンのグループですね。 これを［コピー］して ［ペースト］ ３種類試すので ３つペーストします。 そうするとこんな風になりました。 btn-group にすると インラインのように並んでしまうんですね。 ということですからここは hr で区切り線を入れましょう。 これで３つ分かれましたね。 真ん中は基準として 見比べるために置いたので ここにはスタイルは 加えません。 上の方には btn-group の後にさらに btn-group- large、lg ですね。 真ん中にしちゃいましたね。 上にしましょう。 こちらですね。 上が大きくなりました。 真ん中は触れずに 下は同じ、今度は小さいほうですね。 btn-group-sm、 small ということで このような３つのサイズが 出来上がります。 では先ほどのコピーは 生きてますかね。 btn-group のコピーをしたのが 生きていればいいんですけど ペーストしてみましょう。 ［ペースト］すると 生きてましたね。 今度はまた新たに一番上と 同じボタンが出来上がりましたけど これを縦に並べるということができます。 この場合は btn-group に さらにクラスを加えるのではなくて このオプションですね。 vertical というオプションがありまして vertical に書き換えます。 そうすると縦に並んだボタンに なるということです。 このレッスンではボタンを グループ化する btn-group のスタイルについて ご紹介しました。 まず一番上は通常の 場合なんですけど btn-group を設定する。 それから２つ目はそのグループを 複数用意した上で ３つのグループをまとめて ツールバーにしました。 それから btn-group に 対してはサイズが選べまして btn-group に追加する形でクラスを btn-group-lg または sm で 大きい、小さいが選べます。 それから最後にご紹介したのは btn-group-vertical で 縦に並べることが できるということでした。