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

スポンサードリンク

関連コンテンツ

オススメ記事

Python(Tkinter)でウィンドウを表示するための基本

ゲームなどのアプリを作成したいとき、まず、ウィンドウを表示する必要があります。そこで今回は、Python(Tkinter)を使って、ウィンドウを表示する方法と、その設定を変える方法を紹介します。

【Xcode】Storyboardを使ってMacアプリ開発に挑戦。

こんにちは。@It_is_Rでございます。 さて、今回はStoryboardを使ってのmacOS用のアプリ開発の基本として、ウィンドウに文字の表示させてみたいと思います。開発環境はMac OS

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

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

Yarn

Yarn の使い方。インストールの方法から使い方まで解説します。

最近ドラクエにはまっている@It_is_Rです。PS1 のやつです。ドラクエⅦ。 関係ない話はさておき、今回は Yarn の使い方を解説していきたいと思います。 Yarn とは

WordPress|ショートコードの作り方&使い方。確実に使いこなす為のガイド。

前回、WordPressで、特定のカテゴリ一覧を表示する方法について書きました。 改めまして、@It_is_Rです。 特定のカテゴリ一覧を表示したとき、ショートコードというものを使いましたが、

【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。

頭がお花畑の@It_is_Rです。 今回からは Bootstrap 4 の使い方について、詳しく書いていこうと思います。 このシリーズの、前回の記事はこちらです。 Bootstrap 4 を読み込む

ショートコード

BEMによるCSS設計の方法を解説。命名規則から使い方まで。

完璧を求めすぎて、平均以下な@It_is_Rです。 CSSは比較的簡単なものですが、CSS設計をしっかりしておかなければ、余分なコードが多くなったり、後から修正が大変になったりしてこまることにな

【 WordPress 】functions.php で色んな機能を使ってみよう!【基本】

馬鹿は風邪を引かないといいますが、どうやら引いたようです。@It_is_Rです。 ちなみに、「馬鹿は風邪を引かない」ということわざは、「馬鹿は風邪を引いても気がつかない」という例えだって知ってました

MacにPythonをインストールしてみよう!小学生からのPython入門

さて、今回《こんかい》もプログラミングを学んでいきましょう! 前回はWindows《ウィンドウズ》にPython《パイソン》をインストールする方法《ほうほう》を紹介《しょうかい》しました。今回

M1 Mac対応。DockerでWordPress開発環境を構築する方法

みなさんこんにちは。@It_is_Rです。 ローカルにWordPressの開発環境を作りたいとき、Dockerを使うと、とても簡単に構築することができます。しかし、実際に運営しているWordP

コメントを残す(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。