Bootstrap ボタン

説明: この記事では、Bootstrap のボタンコンポーネントの使用方法について説明します。ボタンの種類、サイズ、状態、オプション、拡張機能などについて解説します。

ボタンの種類

Bootstrap は、さまざまな目的に使用できるさまざまな種類のボタンを提供しています。

ボタンの種類	説明
`.btn-primary`	ページ上の主要な操作を強調表示するために使用されます。
`.btn-secondary`	あまり重要でない操作に使用されます。
`.btn-success`	成功した操作を表すために使用されます。
`.btn-danger`	危険な操作を表すために使用されます。
`.btn-warning`	警告情報を表すために使用されます。
`.btn-info`	一般的な情報を表すために使用されます。
`.btn-light`	薄い色の背景で使用されます。
`.btn-dark`	濃い色の背景で使用されます。
`.btn-link`	ボタンをリンクのように見せます。

例:


<button type="button" class="btn btn-primary">主要ボタン</button>
<button type="button" class="btn btn-secondary">次要ボタン</button>
<button type="button" class="btn btn-success">成功ボタン</button>

ボタンのサイズ

ボタンのサイズを変更するには、次のクラスを使用します。

クラス	説明
`.btn-lg`	大きいボタンを表示します。
`.btn-sm`	小さいボタンを表示します。

例:


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

ボタンの状態

ボタンの状態を変更するには、次のクラスを使用します。

クラス	説明
`.active`	ボタンがアクティブな状態であることを示します。
`.disabled`	ボタンを無効にします。

例:


<button type="button" class="btn btn-primary active">アクティブなボタン</button>
<button type="button" class="btn btn-secondary disabled">無効なボタン</button>

ボタンのオプション

ボタンの外観を変更するには、次のクラスを使用します。

クラス	説明
`.btn-outline-*`	アウトラインボタンを表示します。
`.btn-block`	ボタンをブロックレベルの要素にします。

例:


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

ボタンの拡張

Bootstrap は、ボタンを拡張するためのいくつかのコンポーネントを提供しています。

ボタンのプラグイン: トグルボタンを作成できます。詳細については、Bootstrap のドキュメントを参照してください。
ボタングループ: 複数のボタンをグループ化できます。詳細については、Bootstrap のドキュメントを参照してください。
ドロップダウンメニュー: ドロップダウンメニューを作成できます。詳細については、Bootstrap のドキュメントを参照してください。

よくある質問

Q: Bootstrap のボタンのスタイルを変更するにはどうすればよいですか？

A: Bootstrap のボタンのスタイルを変更するには、カスタム CSS を使用します。

Q: Bootstrap のボタンを無効にするにはどうすればよいですか？

A: Bootstrap のボタンを無効にするには、disabled 属性を使用します。

Q: Bootstrap のボタンにアイコンを追加するにはどうすればよいですか？

A: Bootstrap のボタンにアイコンを追加するには、Font Awesome などのアイコンフォントを使用します。

その他の参考記事:bootstrap ボタン中央