BootstrapのPillボタンの使用方法

まず最初に、BootstrapのCSSとJavaScriptを読み込む必要があります。以下のコードをHTMLのセクションに追加します:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

次に、Pillボタンを作成するための基本的なHTMLコードを示します。以下のコードを適切な場所に追加します:

<button class="btn btn-primary btn-pill">Pillボタン</button>

このコードでは、btnクラスとbtn-primaryクラスを使用して、基本的なPillボタンを作成しています。ボタンに特定のスタイルを適用するために、さまざまなクラスを追加することもできます。たとえば、btn-dangerクラスを使用すると、赤い背景色のPillボタンが作成されます。

さらに、Pillボタンのサイズを変更することもできます。以下のように、btn-smクラスやbtn-lgクラスを使用してサイズを指定します:

<button class="btn btn-primary btn-pill btn-sm">小さいPillボタン</button>
<button class="btn btn-primary btn-pill">通常のサイズのPillボタン</button>
<button class="btn btn-primary btn-pill btn-lg">大きいPillボタン</button>

さらに、Pillボタンを連結してグループ化することもできます。以下のように、btn-groupクラスを使用してグループを作成します:

<div class="btn-group" role="group" aria-label="Pillボタングループ">
  <button class="btn btn-primary btn-pill">ボタン1</button>
  <button class="btn btn-primary btn-pill">ボタン2</button>
  <button class="btn btn-primary btn-pill">ボタン3</button>
</div>

これにより、複数のPillボタンがグループ化され、一緒に表示されます。

以上が、BootstrapのPillボタンの基本的な使用方法といくつかのコード例です。これらの例を参考にして、自分のプロジェクトにPillボタンを導入してみてください。より詳細な情報やカスタマイズオプションについては、Bootstrapの公式ドキュメントを参照してください。