Bootstrap 5 ボタン

ボタンのスタイル

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-success">リンクボタン</a>
<button type="button" class="btn btn-success">ボタン</button>
<input type="button" class="btn btn-success" value="入力ボタン">
<input type="submit" class="btn btn-success" value="送信ボタン">
<input type="reset" class="btn btn-success" value="リセットボタン">

自分で試してみてください

なぜリンクの href 属性に # を書いているのか？

リンク先のページがないため、また「404」メッセージを受け取りたくないため、# をリンクとして使用しています。現実世界では、「検索」ページの実際の URL となります。

ボタン輪郭

Bootstrap 5 は、さらに 8 つの輪郭/枠ボタンを提供しています。

これらの上にマウスを合わせると、追加の「ホバー」効果が見られます：

例

<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>

自分で試してみてください

ボタン

親要素全体の幅を覆うボタンを作成するには、親要素に以下を使用してください .d-grid 「helper」クラス：

例

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">全幅ボタン</button>
</div>

自分で試してみてください

多くのブロックレベルのボタンがある場合、以下を使用することができます： .gap-* このクラスを使用すると、間隔を制御できます：

例

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">全幅ボタン</button>
  <button type="button" class="btn btn-primary btn-block">全幅ボタン</button>
  <button type="button" class="btn btn-primary btn-block">全幅ボタン</button>
</div>

自分で試してみてください

アクティブ/無効ボタン

ボタンはアクティブ（押された状態に表示）または無効（クリック不可）の状態に設定できます：

クラス .active このクラスを使用すると、ボタンが押された状態に表示されますが、 disabled この属性を使用すると、ボタンをクリック不能にします。ただし、<a>要素は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>

自分で試してみてください

ロードボタンのボタン

ボタンに「spinner」を追加することもできます。さらに詳しい情報は、私たちのBS5Spinnerチュートリアルを学んでください：

例

<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>

自分で試してみてください