Bootstrapのボタンの装飾まとめ

Bootstrapでは、ボタンにさまざまなスタイルを適用するためのクラスが用意されています。主に、色やサイズ、スタイルなどで分類することができます。以下は、Bootstrapで使用できるボタンの装飾を分類して説明したものです。

1. ボタンの色 (Button Color)

ボタンの色は、btn-クラスを使って指定します。Bootstrapは、色別に多くのオプションを提供しています。

• 基本の色
  • btn-primary: メインのアクションボタン（通常、青色）
  • btn-secondary: セカンダリのアクションボタン（通常、灰色）
  • btn-success: 成功を示すボタン（通常、緑色）
  • btn-danger: エラーメッセージや警告を示すボタン（通常、赤色）
  • btn-warning: 警告を示すボタン（通常、黄色）
  • btn-info: 情報を示すボタン（通常、水色）
  • btn-light: 明るい背景色のボタン（通常、薄い色）
  • btn-dark: ダークな色のボタン（通常、黒に近い色）
  • btn-link: リンクのように表示されるボタン（通常、リンク色）

例：

<button class="btn btn-primary">Primary</button>
<button class="btn btn-danger">Danger</button>

2. ボタンのサイズ (Button Size)

ボタンのサイズを変更するためのクラスも提供されています。

• 小さめのボタン
  • btn-sm: 小さいサイズのボタン
• 大きめのボタン
  • btn-lg: 大きいサイズのボタン

例：

<button class="btn btn-primary btn-sm">Small Button</button>
<button class="btn btn-success btn-lg">Large Button</button>

3. ボタンの形状 (Button Shape)

ボタンの角を丸くしたり、円形にすることもできます。

• 角丸ボタン
  • btn-rounded: 丸みを帯びたボタン（デフォルトで角が丸い）

例：

<button class="btn btn-primary btn-rounded">Rounded</button>

4. ボタンのスタイル (Button Style)

ボタンのスタイルには、いくつかのオプションがあります。

• アウトラインボタン (Outline Buttons)
  • btn-outline-*: ボタンに背景色を付けず、枠線だけを表示したボタン。色は通常のbtn-*クラスと同じです。

例：

<button class="btn btn-outline-primary">Outline Primary</button>
<button class="btn btn-outline-danger">Outline Danger</button>

• リンク風ボタン
  • btn-link: ボタンをリンクのように表示する。背景色やボーダーがなく、テキストだけの表示。

例：

<button class="btn btn-link">Link Button</button>

5. ボタンの状態 (Button State)

ボタンの状態に関するクラスも用意されています。

• アクティブ状態 (Active)
  • active: アクティブ状態のボタン（クリック時などに使う）

例：

<button class="btn btn-primary active">Active Button</button>

• 無効状態 (Disabled)
  • disabled: ボタンを無効にして、クリックできない状態にします。

例：

<button class="btn btn-primary" disabled>Disabled Button</button>

6. ボタンのブロック表示 (Block Button)

ボタンを親要素の幅に合わせてフル幅で表示することができます。

• ブロックボタン
  • btn-block: ボタンを幅100%にして表示

例：

<button class="btn btn-primary btn-block">Block Button</button>

7. ボタンのグループ化 (Button Group)

複数のボタンをグループとして一緒に配置することができます。

• ボタングループ
  • btn-group: 複数のボタンをグループとして横並びにする
  • btn-toolbar: ボタングループをさらにカスタマイズして整列

例：

<div class="btn-group" role="group">
  <button class="btn btn-primary">Left</button>
  <button class="btn btn-primary">Middle</button>
  <button class="btn btn-primary">Right</button>
</div>

8. その他のオプション

• ローディングボタン
  • btn-loading: ローディング状態を示すクラス（カスタムで実装する場合）

まとめ

Bootstrapのボタンには、さまざまなカスタマイズオプションがあります。以下に簡単に分類します。

1. 色: btn-primary, btn-secondary, btn-success, btn-danger, など
2. サイズ: btn-sm, btn-lg
3. 形状: btn-outline-*, btn-link, btn-rounded
4. 状態: active, disabled
5. レイアウト: btn-block, btn-group, btn-toolbar

これらのクラスを組み合わせることで、用途に応じたボタンのスタイルを簡単に作成できます。