Bootstrap5 ボタン
Bootstrap 5 は異なるスタイルのボタンを提供します。
例
<button type="button" class="btn">基本ボタン</button>
<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-info">情報</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危険</button>
<button type="button" class="btn btn-dark">黒</button>
<button type="button" class="btn btn-light">ライト</button>
<button type="button" class="btn btn-link">リンク</button>
試してみる »
ボタンクラスは<a>, <button>、または<input>要素上で使用できます:
例
<a href="#" class="btn btn-info" role="button">リンクボタン</a>
<button type="button" class="btn btn-info">ボタン</button>
<input type="button" class="btn btn-info" value="入力ボタン">
<input type="submit" class="btn btn-info" value="送信ボタン">
<input type="reset" class="btn btn-info" value="リセットボタン">
試してみる »
ボタンの枠線設定
Bootstrap 5 では、ボタンの枠線を設定することもできます。マウスをボタンに移動すると、浮き上がる効果が追加されます。
例
<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-success">成功</button>
<button type="button" class="btn btn-outline-info">情報</button>
<button type="button" class="btn btn-outline-warning">警告</button>
<button type="button" class="btn btn-outline-danger">危険</button>
<button type="button" class="btn btn-outline-dark">黒</button>
<button type="button" class="btn btn-outline-light text-dark">ライト</button>
試してみる »
異なるサイズのボタン
クラスで大きなボタンを設定し、.btn-lgクラスで小さなボタンを設定します：.btn-sm例
例
<button type="button" class="btn btn-primary btn-lg">デフォルトボタン</button>
<button type="button" class="btn btn-primary">小さいボタン</button>
<button type="button" class="btn btn-primary btn-sm">試してみる »</button>
ブロックレベルボタン
ブロックレベルボタン
クラスは親要素に設定します：.btn-block例.d-gridボタン 1
例
<div class="d-grid">
<button type="button" class="btn btn-primary btn-block">複数のブロックレベルボタンがある場合は、</button>
</div>
クラスを使用して設定できます：
例.gap-*100% 幅のボタン
例
<div class="d-grid gap-3">
<button type="button" class="btn btn-primary btn-block">100% 幅のボタン</button>
<button type="button" class="btn btn-primary btn-block">試してみる »</button>
<button type="button" class="btn btn-primary btn-block">アクティブおよび無効なボタン</button>
</div>
ボタンはアクティブ状態またはクリック不可の状態に設定できます。
アクティブおよび無効なボタン
属性を使用すると、ボタンをクリック不可に設定できます。 注意: <a> 要素は disabled 属性をサポートしていないため、次を使用して
.activeクラスでリンクのクリックを無効にすることができます。disabled例.disabledクリック後のボタン
例
<button type="button" class="btn btn-primary active">クリック不可のリンク</button>
<button type="button" class="btn btn-primary" disabled>試してみる »</button>
<a href="#" class="btn btn-primary disabled">読み込みボタン</a>
読み込み中のボタンを設定することもできます。
読み込みボタン
試してみる »
例
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>
AI 思考中...