Webデザイン初心者でも簡単に使える！Bootstrap4基本の使い方【ボタングループ編】

おはようございます！社員Aです👩

連載しております「Bootstrapシリーズ」ですが、第10回目になりました！

Bootstrap4基本の使い方シリーズ

複数記事に分けてWEB制作でよく使うBootstrapの機能や意外と知られていない便利な機能なども紹介していきますので、初めてBootstrapにチャレンジされる方も、既にBootstrapを使って開発をされている方にも読んでいただけると嬉しいです。

第10回目の今回は「ボタングループ編」！Bootstrap4でイメージを設定する方法を解説していきたいと思います。Webデザイン初心者の方でも簡単に使えるので、ぜひこの機会にBootstrap4の使いかたをマスターしてみませんか？

Bootstrap4 基本のボタングループ

基本のルールについて

1. クラス「.btn」を「.btn-group」で囲む。

表示

ソース

<div class="btn-group">
  <button type="button" class="btn btn-secondary">前へ</button>
  <button type="button" class="btn btn-secondary">一覧へ</button>
  <button type="button" class="btn btn-secondary">次へ</button>
</div>

Bootstrap4 ボタンツールバー

ボタングループをまとめたものがボタンツールバーになります。

基本のルールについて

1. クラス「.btn-group」を「.btn-toolbar」で囲む。

表示

ソース

<div class="btn-toolbar">
  <div class="btn-group mr-2">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">4</button>
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
  </div>
</div>

Bootstrap4 ボタングループのサイズ

ボタングループのサイズは変更することができます。

基本のルールについて

1. クラス「.btn-group」に「.btn-group-lg」を追加すとボタングループが大きくなる
2. クラス「.btn-group」に「.btn-group-sm」を追加すとボタングループが小さくなる

表示

ソース

<div class="box">
	<h5>大きいサイズ</h5>
	<div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
  </div>
</div>

<div class="box">
	<h5>標準サイズ</h5>
	<div class="btn-group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
  </div>
</div>

<div class="box">
	<h5>小さいサイズ</h5>
	<div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
  </div>
</div>

Bootstrap4 ドロップダウンボタン付きグループボタン

基本のルールについて

1. クラス「.btn-group」の中の「.btn」に「.dropdown-toggle[data-toggle=”dropdown”]」を追加する。

表示

ソース

<div class="btn-group">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>
  <button type="button" class="btn btn-secondary">3</button>
  <div class="btn-group" role="group">
    <button type="button" id="btnGroupDrop1" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">4 </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">テスト</a>
      <a class="dropdown-item" href="#">テスト</a>
    </div>
  </div>
</div>