Bootstrap5 ボタン（Button）の作成と使い方

Bootstrap 5のボタンコンポーネントは、ウェブサイトやアプリケーションでユーザーがアクションを実行するための重要な要素です。ボタンはさまざまなスタイル、サイズ、カラーバリエーションを提供し、カスタマイズ性が高いのが特徴です。

基本的なボタンの構造

基本的なボタンの構造例

<button type="button" class="btn btn-primary">プライマリーボタン</button>
<button type="button" class="btn btn-secondary">セカンダリーボタン</button>
<button type="button" class="btn btn-success">サクセスボタン</button>
<button type="button" class="btn btn-danger">ダンジャーボタン</button>
<button type="button" class="btn btn-warning">警告ボタン</button>
<button type="button" class="btn btn-info">情報ボタン</button>
<button type="button" class="btn btn-light">ライトボタン</button>
<button type="button" class="btn btn-dark">ダークボタン</button>
<button type="button" class="btn btn-link">リンクボタン</button>

主な要素の説明

• .btn: ボタンの基本クラス。
• .btn-primary: プライマリーボタンのスタイル。
• .btn-secondary: セカンダリーボタンのスタイル。
• .btn-success: 成功メッセージ用のスタイル。
• .btn-danger: エラーメッセージ用のスタイル。
• .btn-warning: 警告メッセージ用のスタイル。
• .btn-info: 情報メッセージ用のスタイル。
• .btn-light: ライトテーマ用のスタイル。
• .btn-dark: ダークテーマ用のスタイル。
• .btn-link: リンクボタンのスタイル。

ボタンサイズの調整

Bootstrap 5では、ボタンのサイズを簡単に調整できます。

<!-- 大きなボタン　.btn-lg -->
<button type="button" class="btn btn-primary btn-lg">大きなボタン</button>
<!-- 小さなボタン　.btn-sm -->
<button type="button" class="btn btn-primary btn-sm">小さなボタン</button>

ボタンの状態

ボタンの状態を変更するためのクラスも用意されています。

<!-- 非アクティブ状態: .disabled -->
<button type="button" class="btn btn-primary disabled">無効なボタン</button>
<!-- アクティブ状態: .active -->
<button type="button" class="btn btn-primary disabled">無効なボタン</button>

ボタンのカスタマイズ

カスタムクラスを追加することでさらにカスタマイズできます。

<button type="button" class="btn btn-outline-primary">アウトラインボタン</button>
<button type="button" class="btn btn-primary btn-block">ブロックレベルのボタン</button>

アイコン付きボタン

ボタンにアイコンを追加することもできます。

<button type="button" class="btn btn-primary">
  <i class="bi bi-star-fill"></i> アイコン付きボタン
</button>

Bootstrap 5にはアイコンが用意されています。
Bootstrap Icons

まとめ

Bootstrap 5のボタンコンポーネントを使用することで、さまざまなスタイルやサイズのボタンを簡単に作成できます。ボタンはカスタマイズ性が高く、アイコンやカスタムクラスを追加することで、プロジェクトに合ったデザインを実現できます。

関連投稿:

【初心者の方向け】 Bootstrap4の使い方 ボーダー 【初心者の方向け】 Bootstrap4の使い方 フォーム 【初心者の方向け】 Bootstrap4の使い方 余白 【初心者の方向け】 Bootstrap4の使い方 ドロップダウン