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、カルーセル機能のを実装方法!

スポンサードリンク

関連コンテンツ

オススメ記事

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

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

キー入力で文字を切り替えるべ

【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門

小学生からのJavaScript講座です。 前回、文字を一文字づつ表示させる方法と改行の方法を紹介しました。今回はこのプログラムに、キー入力によって文字を切り替えられる機能をつけてみましょう。

java

Javaでじゃんけんゲームを作ろう。サンプルコードあり!

※追記(2018/8/29) より分かりやすい記事になるよう修正しました。 今回はJavaを使って、じゃんけんゲームを作る方法を紹介します。 eclipseがインストールされており、Java

carousel

【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

Bootstrap4の使い方、第8回目です。 サイトをみていると、画像を横並びにしてくるくると回転するカルーセル機能を実装しているサイトがありますよね。 Bootstrap4には、カルーセルを

scratch

Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門

さて、プログラミングの勉強をはじめていきましょう! 前回の「Scratchでじゃんけんゲームを作ろう!」では、じゃんけんゲームの作り方を学びました。今回は、もうちょっと本格的(ほんかくてき)な

WordPress|特定カテゴリーに属する記事を一覧表示させる方法!!

今まで、何度かに分けて書いた記事でも、その一覧がなかったので見にくいなーと思っていた@It_is_Rです。 昨日、記事の一覧表示をするショートコードを作って、記事の一覧が欲しい記事にだけ貼り付けてみ

JavaScriptマンガ講座。初心者でも痛いほど理解できる変数の使い方。(実践編)

押入れが部屋になっている@It_is_Rです。 今回の記事はJavaScriptマンガ講座、2回目となりました。 この企画はJavaScriptをフザケまくって覚えようというものです。

おみくじゲームを作るべ!

JavaScriptでおみくじを作ろう! 小学生からのプログラミング入門

さて、今日も楽しく、プログラミングを学んでいきましょう!今回はなんと、プログラミングでおみくじゲームを作ってみます。 そして今回から、Scratch(スクラッチ)より、少しレベルアップして、J

scratch

Scratchの使い方と、ゲーム作りの基礎知識を学ぼう! 小学生からのプログラミング入門

さて、今回もプログラミングの勉強(べんきょう)をはじめていきましょう!前回の「小学生からのプログラミング入門。プログラミングってなぁに?」では、プログラミングっていうのが、どういうものなのかを学びま

WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!

愛と勇気だけが友達の@It_is_Rです。 今回はPugでWordPressテーマを作る方法を少し紹介します。 詳しいテーマの作り方はこちらをご覧ください。 WordPressのテーマを自作

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

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