1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. Bootstrap
  6. »
  7. 【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法

【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法

Bootstrap4の使い方、第6回目です。

前回、Bootstrap4でのボタンの作り方を紹介しましたが、今回はそのボタンをグループにしてひとまとめにする方法です。
Bootstrapにはボタングループという機能があり、今回はそれを使っていこうと思います。

目次
  1. ボタングループの基本的な使い方
  2. ボタングループのサイズを指定する
  3. ツールバー
  4. 縦並びのボタングループ
  5. まとめ
  6. 参考サイト

ボタングループの基本的な使い方

ボタングループの使ってみます。
まず、ボタンを3つ作成してみましょう。

<button type="button" class="btn btn-primary">ボタン</button>
<button type="button" class="btn btn-primary">ボタン</button>
<button type="button" class="btn btn-primary">ボタン</button>

このように横並びのボタンができます。
これは前回と同じ方法です。

ではこれらのボタンをグループにしていきたいと思います。
ボタンをグループにするには、btn-groupというクラスを使います。
使い方は、先ほどのボタンをdivタグで囲み、そのdivタグにbtn-groupクラスを指定します。

<div class="btn-group" role="group" aria-label="ボタングループサンプル">
	<button type="button" class="btn btn-primary">ボタン</button>
	<button type="button" class="btn btn-primary">ボタン</button>
	<button type="button" class="btn btn-primary">ボタン</button>
</div>

ボタングループのサイズを指定する

ボタンと同様に、ボタングループにもサイズを指定することができます。
サイズの指定には「btn-group-lg」「btn-group-sm」を使用します。

<div class="btn-group btn-group-lg" role="group" aria-label="ボタングループサンプル">
	<button type="button" class="btn btn-primary">ボタン</button>
	<button type="button" class="btn btn-primary">ボタン</button>
	<button type="button" class="btn btn-primary">ボタン</button>
</div>
<div class="btn-group" role="group" aria-label="ボタングループサンプル">
	<button type="button" class="btn btn-primary">ボタン</button>
	<button type="button" class="btn btn-primary">ボタン</button>
	<button type="button" class="btn btn-primary">ボタン</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="ボタングループサンプル">
	<button type="button" class="btn btn-primary">ボタン</button>
	<button type="button" class="btn btn-primary">ボタン</button>
	<button type="button" class="btn btn-primary">ボタン</button>
</div>

ツールバー

ボタングループをツールバーとしてさらにひとまとめにすることもできます。

<div class="btn-toolbar" role="toolbar" aria-label="ツールバー">
	<div class="btn-group" role="group" aria-label="ボタングループ">
		<button type="button" class="btn btn-primary">1</button>
		<button type="button" class="btn btn-primary">2</button>
		<button type="button" class="btn btn-primary">3</button>
	</div>
	<div class="btn-group" role="group" aria-label="ボタングループ">
		<button type="button" class="btn btn-primary">4</button>
		<button type="button" class="btn btn-primary">5</button>
	</div>
	<div class="btn-group" role="group" aria-label="ボタングループ">
		<button type="button" class="btn btn-primary">6</button>
	</div>
</div>

縦並びのボタングループ

次に縦並びのボタングループを作成してみましょう。
縦並びのボタングループを作成するには、「btn-group-vertical」クラスを使います。

<div class="btn-group-vertical" role="group" aria-label="ボタングループサンプル">
	<button type="button" class="btn btn-primary">ボタン</button>
	<button type="button" class="btn btn-primary">ボタン</button>
	<button type="button" class="btn btn-primary">ボタン</button>
</div>

まとめ

bootstrap4のボタングループ機能を使うと、ボタンをひとまとまりにすることができ、サイトの見た目がよくなります。
さらにボタングループは、横並びにも縦並びにもすることができますし、ボタングループをさらにひとまとめにすることもできます。

ボタングループの使い方を覚えておくと、サイトを作るうえでとても便利になります。
以上、ボタングループの使い方の紹介でした。

参考サイト

参考サイト : Bootstrap 公式ページ

この企画の一覧はこちら

  1. Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。
  2. 【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。
  3. 【Bootstrap 4】badgeを使ってテキスト横に小さな文字を入れる方法
  4. 【Bootstrap 4】パンくずリスト(Breadcrumb)を作ってみよう!
  5. Bootstrap 4によるボタンの作り方。色やサイズなどの指定方法!
  6. 【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法
  7. 【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方
  8. 【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

スポンサードリンク

関連コンテンツ

オススメ記事

SCSS vs SASS どっちが便利か違いを比較。おまいら SASS 使えよ!

CSS を書くときに、 Sass はもう手放せません。 @It_is_R です。 さて、今回のテーマとなる Sass の表記には、2種類ありますよね。 SCSS と、 SASS です。

【Android Studio】TextView を使ってテキストを変更、追加する方法。

TextViewの文字列を変更するより、これまでの人生を変更したい@It_is_Rです。 Android Studioを使ったアプリ開発講座6回目です。 今回はアプリに表示されたテキストを変更

enchant.js100行未満!!本格シューティングゲーム作り方

昨日歩き回ったせいで、足がかなり痛い@It_is_Rです。 さて、今回はenchant.jsのネタです。enchant.jsを使うと、javascriptのプログラムがものすごく簡単に書けてし

【Android Studio】 GridLayout の使い方。複雑なレイアウトを表現する方法

スマホの充電がいつの間にか無くなっている@It_is_Rです。 Androidアプリ開発、10回目となりました。 前回、様々なレイアウトの使い方を紹介しましたが、今回はその中でもちょっと難しい

【Android Studio】開発したアプリの実機テストを行う方法。

どうも、頭がすっからかんの@It_is_Rです。 やかましいわ。 今回は Android Studio で実機テストする方法を紹介します。 これからアプリ開発をしていく上で必要不可欠な実機テ

Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。

今回は Bootstrap 4 の使い方です。It_is_Rです。 では詳しくみていきましょう。 Bootstrap とは Bootstrap は Webサイトを制作するときに使う、

webpackでSass(SCSS)をCSSにコンパイルする最もシンプルな方法

webpackを使うと、JavaScriptをまとめることができて便利です。しかし、webpackにはたくさんの機能があり、パッケージをインストールすることで、様々な機能が使えるようになります。

【初心者向け】webpack入門。すぐに使える最も簡単な使い方

webpackは、複数のJavaScriptファイルをまとめてくれる、モジュールバンドラというものです。 今回は、webpack入門ということで、webpack5の使い方を紹介していきたいと思

キャラを決まった間隔ずつ動かすよ!

【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門

小学生からのプログラミング入門講座《にゅうもんこうざ》、今回もはじめていきましょう! 前回は、キャラクターの画像《がぞう》をスムーズに動かす方法でしたが、スピードが速すぎたので、画像の移動間隔

【Xcode7】Swift2でMacアプリ開発。画像を読み込む為のボタンを作る。

犬も歩けば棒にあたる。だからRは歩かない。@It_is_Rです。 最近はSwiftの記事が多いと思っている人もいるのでは無いでしょうか。実はRは現在、Swiftを使ってゲーム開発のお助けアプリを

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です