とほほのBootstrap 4入門

1. トップ
2. Bootstrap 4入門
3. ボタン

ボタン

.btn はボタンを示します。.btn-* でボタンの種類を指定します。Bootstrap 3 の .btn-default は .btn-secondary に名称変更されました。

<button type="button" class="btn">Button</button>
<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>

ボタンタグ

.btn は <button>, <input>, <a> タグに使用することができます。<a> に使用する場合は、role="button" を指定するのが望ましいです。

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

アウトラインボタン

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

ボタンの大きさ

.btn-lg, .btn-sm でボタンの大きさを指定します。Bootstrap 3 の .btn-xs は廃止されました。

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

ブロックレベルボタン

.btn-block は、横幅いっぱいのブロックレベルボタンを表示します。

<button class="btn btn-primary btn-block">Block evel button</button>

アクティブ状態

フォーカスがあたったボタンには .active が適用されます。

<button class="btn btn-primary">Normal</button>
<button class="btn btn-primary active">Active</button>

無効化状態

ボタンに disabled 属性を指定すると、無効化されたボタンとなります。

<button class="btn btn-primary">Normal</button>
<button class="btn btn-primary" disabled>Disabled</button>

トグル状態

data-toggle="button" を指定すると、トグルボタンを作成することができます。トグルボタンは、クリック後にボタンからマウスを離してもアクティブな状態が維持され、ボタンの色が濃いままとなります。周りに薄い枠が付くのはアクティブ状態ではなく、フォーカス状態です。アクティブな状態では active クラスと aria-pressed="true" 属性が追加されます。Firefox でリロード後も状態が維持されてしまうのを回避するため、Firefox 独自属性ですが autocomplete="off" を指定しています。

<button class="btn btn-primary">No Toggle</button>
<button class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">Toggle</button>

ボタングループ

.btn-group は、ボタングループを表示します。音声読み上げブラウザなどのために、ボタングループには role="group" と aria-label="..." をつけるのが望ましいです。

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">A</button>
  <button type="button" class="btn btn-secondary">B</button>
  <button type="button" class="btn btn-secondary">C</button>
</div>

ボタングループの大きさ

.btn-group-lg は大きなボタングループ、.btn-group-sm は小さなボタングループを表示します。

<div class="btn-group btn-group-lg">
  :
</div>
<div class="btn-group">
  :
</div>
<div class="btn-group btn-group-sm">
  :
</div>

ボタングループの縦並び

.btn-group-vertical は、縦に並ぶボタンを表示します。

<div class="btn-group-vertical">
  <button type="button" class="btn btn-secondary">A</button>
  <button type="button" class="btn btn-secondary">B</button>
  <button type="button" class="btn btn-secondary">C</button>
</div>

ネスティング

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>
  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

チェックボックス

チェックボックスをボタンにするには、下記の様にラベルに .btn を使用し、全体を .btn-group, .btn-group-toggle クラスと data-toggle="buttons" 属性で囲んでください。チェック状態のボタンは少し色が濃くなります。

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off">CheckboxA
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off">CheckboxB
  </label>
</div>

ラジオボタン

チェックボックスと同様にラジオボタンを表示します。

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked>RadioA
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off">RadioB
  </label>
</div>

ボタンツールバー

.btn-toolbar は、ボタンツールバーを表示します。音声読み上げブラウザなどのために、ボタンツールバーには role="toolbar" と aria-label="..." をつけるのが望ましいです。

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">A</button>
    <button type="button" class="btn btn-secondary">B</button>
    <button type="button" class="btn btn-secondary">C</button>
  </div>
  <div class="btn-group" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">X</button>
    <button type="button" class="btn btn-secondary">Y</button>
    <button type="button" class="btn btn-secondary">Z</button>
  </div>
</div>

---