Bootstrap - ボタン-group: 初心者向けガイド
こんにちは、ウェブ開発者の卵さんたち！今日は、Bootstrapボタン-groupの素晴らしい世界に飛び込みます。あなたの近所の親切なコンピュータ教師として、この旅を案内するのがとても楽しみです。コードを書いたことがない人も心配しないでください - 基礎から始めて少しずつ進んでいきます。それでは、始めましょう！
ボタン-groupとは？
コードに飛び込む前に、ボタン-groupとは何かを理解しましょう。テレビのリモコンを作成していると仮定しましょう。すべてのボタンが散らばっている代わりに、似ているボタンを一緒にまとめます。これが、ウェブデザインでボタン-groupを行うことです！
Bootstrapのボタン-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>このコードは、「左」、「中央」、「右」というラベルの3つのボタンのグループを作成します。それを分解してみましょう：
- ボタンを
<div>で囲み、クラスbtn-groupを追加します。 -
role="group"属性は、スクリーンリーダーがこれらのボタンが関連していることを理解する助けになります。 -
aria-labelは、ボタン-groupの説明を提供します。 - 各
<button>にはbtnとbtn-primaryのクラスが付いており、Bootstrapのボタンスタイルを与えます。
このコードを実行すると、3つの青いボタンがまるで豆の pods のように一緒に並んでいるのを見ることができます！
組み合わせスタイル
それでは、少し凝らしてみましょう。現実の世界では、すべてのボタンが平等ではありません。いくつかは他のボタンよりも重要であり、視覚的にそれを示すことができます：
<div class="btn-group" role="group" aria-label="組み合わせスタイル">
<button type="button" class="btn btn-danger">削除</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-success">承認</button>
</div>この例では、異なるBootstrapの色のクラスを使用しています：
-
btn-dangerは赤い「削除」ボタン -
btn-warningは黄色の「警告」ボタン -
btn-successは緑の「承認」ボタン
これにより、機能ごとに色分けされた視覚的に印象的なボタンのグループが作成されます。まるでウェブページの交通信号灯！
枠線スタイル
時々、ボタンを少し控えめにしたいときがあります。その際には、枠線スタイルが便利です：
<div class="btn-group" role="group" aria-label="枠線スタイル">
<button type="button" class="btn btn-outline-primary">主要</button>
<button type="button" class="btn btn-outline-secondary">副</button>
<button type="button" class="btn btn-outline-info">情報</button>
</div>btn-outline-* を btn-* の代わりに使用することで、色の枠線とテキストを持つボタンが得られ、背景は透明です。デザインに軽いタッチを加えるのに最適です。
チェックボックスとラジオボタンGROUP
少しインタラクティブにしてみましょう。Bootstrapを使用して、チェックボタンやラジオボタンのように動作するボタンのグループを作成できます：
<div class="btn-group" role="group" aria-label="基本的なチェックボタン切换ボタングループ">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck1">チェックボックス1</label>
<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck2">チェックボックス2</label>
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck3">チェックボックス3</label>
</div>このコードは、3つのチェックボタンのようなグループを作成します。複数のボタンをクリックし、再クリックするまで「押されている」状態になります。まるでボタングループの中にチェックリストがあるかのようです！
ボタンツールバー
時々、ボタングループをまとめたいときがあります。その際にはボタンツールバーが役立ちます：
<div class="btn-toolbar" role="toolbar" aria-label="ボタングループを持つツールバー">
<div class="btn-group me-2" 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 me-2" role="group" aria-label="2番目のグループ">
<button type="button" class="btn btn-secondary">4</button>
<button type="button" class="btn btn-secondary">5</button>
</div>
<div class="btn-group" role="group" aria-label="3番目のグループ">
<button type="button" class="btn btn-info">6</button>
</div>
</div>これにより、3つのボタングループを持つツールバーが作成されます。まるでキッチン用品を整理するように、フォークを一つの引き出しに、スプーンを別の引き出しに、そして阿姨がくれた奇妙なガジェットを特別な場所にそれぞれ収納するようなものです。
サイズ
人間と同様に、ボタンもさまざまなサイズがあります。Bootstrapを使用すると、ボタングループ全体のサイズを簡単に変更できます：
<div class="btn-group btn-group-lg" role="group" aria-label="大きなボタングループ">
<button type="button" class="btn btn-outline-dark">左</button>
<button type="button" class="btn btn-outline-dark">中央</button>
<button type="button" class="btn btn-outline-dark">右</button>
</div>コンテナに btn-group-lg を追加することで、すべてのボタンを大きくできます。小さなボタンには btn-group-sm を使用できます。まるでゴールデンラッシュのように、適したサイズを見つけることができます！
ネスト
時々、ボタングループの中に別のボタングループが必要です。Bootstrapはそれをサポートしています：
<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>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
ドロップダウン
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#">ドロップダウンリンク</a></li>
<li><a class="dropdown-item" href="#">ドロップダウンリンク</a></li>
</ul>
</div>
</div>これにより、2つの通常のボタンとドロップダウンボタンを持つボタングループが作成されます。まるでロシアのマatrioshka人形のように、ボタンの中に別のボタンが入っているようなものです！
縦方向のバリエーション
最後に、縦方向にしてみましょう。縦方向のボタングループ：
<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>
<button type="button" class="btn btn-primary">ボタン</button>
<button type="button" class="btn btn-primary">ボタン</button>
</div>btn-group-vertical を btn-group の代わりに使用することで、ボタンを縦方向に並べます。ボタンが塔のように並ぶのに最適です！
結論
そして、ここまでがBootstrapボタン-groupの旅です！基本的な例から縦方向のバリエーションまで、さまざまなことを学びました。練習は完璧を生みますので、これらの例を試してみてください。さまざまなスタイル、サイズ、レイアウトを組み合わせて、あなたのプロジェクトに最適なボタングループを作成してみてください。
ウェブ開発は創造力と問題解決が求められますが、ボタングループはその中の多くのツールの1つです。学び続け、コードを書き続け、そして最も重要なのは、楽しむことです！次回まで、ハッピーコーディング！
Credits: Image by storyset