Bootstrap 5 ボタン(button)

目次

1. ボタンのスタイル
2. ボタンのアウトライン
3. ボタンのサイズ
4. ブロックレベルのボタン
5. アクティブ/無効ボタン
6. ローダー ボタン
7. ボタングループ
8. 垂直ボタン グループ
9. 並列ボタン グループ
10. ネストされたボタン グループとドロップダウン メニュー

ボタンのスタイル

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 クラスを使用する必要があることに注意してください。

例

<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>

ローダー ボタン

ボタンに "spinner"を追加することもできます。これについては、BS5 Spinner チュートリアルで詳しく説明します。

例

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

ボタングループ

Bootstrap 5 では、一連のボタンを 1 つのボタン グループに (1 行に) グループ化できます。

ボタン グループを作成するには、<div> 要素を .btn-group クラスとともに使用します。

例

<div class="btn-group">
  <button type="button" class="btn btn-primary">华为</button>
  <button type="button" class="btn btn-primary">大疆</button>
  <button type="button" class="btn btn-primary">小米</button>
</div>

ヒント: ボタン サイズをグループ内の各ボタンに適用する代わりに、大きなボタン グループにはクラス .btn-group-lg を使用します。または、小さなボタン グループには .btn-group-sm を使用します。

例

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">华为</button>
  <button type="button" class="btn btn-primary">大疆</button>
  <button type="button" class="btn btn-primary">小米</button>
</div>

垂直ボタン グループ

Bootstrap 5 は、垂直ボタン グループもサポートしています。

クラス .btn-group-vertical を使用して垂直ボタン グループを作成してください:

例

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">华为</button>
  <button type="button" class="btn btn-primary">大疆</button>
  <button type="button" class="btn btn-primary">小米</button>
</div>

並列ボタン グループ

デフォルトでは、ボタン グループは "inline"であり、複数のボタン グループが並べて表示されます。

例

<div class="btn-group">
  <button type="button" class="btn btn-primary">华为</button>
  <button type="button" class="btn btn-primary">大疆</button>
  <button type="button" class="btn btn-primary">小米</button>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-primary">吉利</button>
  <button type="button" class="btn btn-primary">长城</button>
  <button type="button" class="btn btn-primary">红旗</button>
</div>

ネストされたボタン グループとドロップダウン メニュー

ドロップダウン メニューを作成するためのネストされたボタン グループ (ドロップダウン メニューについては後の章で詳しく学びます):

例

<div class="btn-group">
  <button type="button" class="btn btn-primary">华为</button>
  <button type="button" class="btn btn-primary">大疆</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">小米</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">手机</a>
      <a class="dropdown-item" href="#">平板电脑</a>
    </div>
  </div>
</div>