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

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

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

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

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

ボタングループの使ってみます。
まず、ボタンを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】ボタン(btn)の作り方。色やサイズなどの指定方法!
  6. 【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法
  7. 【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方
  8. 【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

スポンサードリンク

関連コンテンツ

オススメ記事

クイックタグ

【WordPress】クイックタグを編集し効率よく記事を書こう!

WordPressで記事を投稿するとき、クイックタグを使うと便利です。 デフォルトで用意されているクイックタグもありますが、それだけでは少々不便なところもあります。 今回は効率よく記事を書くた

【Bootstrap 4】ボタン(btn)の作り方。色やサイズなどの指定方法!

Bootstrap4の使い方、第5回目となりました。 Bootstrapの機能のひとつとして、クラスを組み合わせて指定するだけで、色々なボタンが作れます。 今回はBootstrap4を使ったボ

Swift

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

何だか今日はトイレが近い。@It_is_Rでございます。 現在開発中の人魚のゲームは今ストーリーを練っている所です。まだまだ時間がかかりそうです。 さて、Rは今、Macアプリ開発を勉強中なので

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

愛と勇気だけが友達の@It_is_Rです。 WordPress テーマ自作シリーズ第五回目です。 今回から、本格的にテーマを作っていきます。 前回の記事はこちらです。 WordPres

WordPress テーマ自作!投稿ページ、固定ページの作り方。

サンタは何故お爺さんなんでしょうか。@It_is_Rです。 今年からサンタのギャルにしましょう。 WordPress テーマ自作シリーズ第7回目です。 今回は、投稿ページと固定ページを作って

webpackの設定ファイル「webpack.config.js」の使い方を覚えよう

webpack.config.jsはwebpackを使う上での設定ファイルです。 今回は、webpack.config.jsの使い方を紹介します。 webpack.config.jsとは

WordPress テーマ自作 | functions.php から CSS を読み込む方法。

ふぁ……ふぁ……、ファンクションッ!! あ、どうも@It_is_Rです。 なに笑ってるんですか? WordPress テーマ自作シリーズ第10回目です。 今回は、 functions.php

【Gitの使い方 – その2】GitをMacにインストールする方法!

いらないファイルは残っているのに、欲しいファイルに限って見つからない@It_is_Rです。 Gitの使い方、第2回目の今回はGitをMacにインストールする方法を紹介します。

Android アプリ開発入門! Android Studio のインストール手順。

人の笑顔が大嫌い。 @It_is_R です。 Android アプリ開発では、 Eclipse や Android Studio を使ってアプリを開発するのが一般的です。 一般的に言語は Ja

WordPressカスタムヘッダーを完璧に使いこなしたい人へ告ぐ!

森の中に昔から住んでる@It_is_Rです。 WordPressのカスタマイズをする上で、カスタムヘッダーを使うと、色やヘッダー画像をWordPressの管理画面から操作できるようになり便利です

コメントをどうぞ!

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