Skip to main content Skip to docs navigation Bootstrap 4 (安定版) はこちらです

Buttons (ボタン)

ボタンはフォームやダイアログなどのアクションにカスタムボタンスタイルを利用できます。 サイズや状態管理に対応しています。ボタンの使い方の例を示します。

目次

Examples

いくつかの定義済みのボタンスタイルがあり, それぞれ目的を持っています。

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>
Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

Disable text wrapping

ボタンのテキストを折り返したくない場合は、.text-nowrap クラスをボタンに追加することができます。Sassでは、$btn-white-space: nowrap を設定することで、各ボタンのテキストの折り返しを無効にすることができます。

Button tags

.btn クラスは <button> 要素で使用するために設計されていますが、これらのクラスは <a><input> 要素でも使うことができます。
(ブラウザによっては若干異なるレンダリングが適用される場合があります)

現在のページ内で、新しいページやセクションへのリンクではなく、ページ内の機能(コンテンツの折りたたみなど)のトリガーとして使用される <a> 要素に、ボタンクラスを使用する場合、これらのリンクには role="button" を与え、スクリーンリーダのような支援技術のためにその目的を適切に伝えるべきです。

Link
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Outline buttons

アウトラインボタン:.btn-outline-* を適用すると枠線を残してボタンの背景色を透過することができます。

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Sizes

ボタンのサイズを .btn-lg.btn-sm を適用すると変更できます。

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

.btn-block を適用すると, 親要素の幅に合わせることができます。

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

Disabled state

ボタンを非アクティブに見せるには、<button> 要素に disabled を追加します。無効化されたボタンには pointer-events: none が適用され、ホバーやアクティブな状態がトリガーされるのを防ぎます。

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

<a> 要素に対してボタンを非アクティブ にする場合は少し異なります。:

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

.disabled クラスは <a> の機能を使えなくする pointer-events: none を使用していますが、この CSS プロパティは標準化されていません。 もしブラウザが pointer-events: none をサポートしていない場合、キーボードナビゲーションが影響を受けず残り続け、キーボードを用いたユーザやスクリーンリーダーなどの補助機能を使ったユーザはこのリンクを開くことができます。 安全のため、これらのリンクに tabindex=”-1” 属性(キーボードからのフォーカスを防ぐ)をつけ、カスタム JavaScript を用いてこれらの機能を無効にしてください。

Button plugin

ボタンのプラグインでは、シンプルなオン/オフのトグルボタンを作成することができます。

Toggle states

ボタンのアクティブ状態を切り替えるには、data-toggle="button" を追加します。ボタンを事前にトグルする場合は、手動で .active クラスと aria-pressed="true"<button> に追加する必要があります。

<button type="button" class="btn btn-primary" data-toggle="button" autocomplete="off">Toggle button</button>
<button type="button" class="btn btn-primary active" data-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-toggle="button" autocomplete="off">Disabled toggle button</button>
<a href="#" class="btn btn-primary" role="button" data-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-toggle="button" aria-pressed="true">Active toggle link</a>
<a href="#" class="btn btn-primary disabled" role="button" data-toggle="button">Disabled toggle link</a>

Methods

ボタンのインスタンスは、例えばボタンのコンストラクタを使って作成することができます。

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
Method Description
toggle プッシュ状態を切り替えます。ボタンがアクティブになったように見せます。
dispose ボタン要素を破棄します。

例えば、すべてのボタンをトグルする例は下記です。

var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
  var button = new bootstrap.Button(button)
  button.toggle()
})