Bootstrapの基本的な使い方　コンポーネント編

もう何番煎じかわかりませんが、自分の備忘録としてBootstrapの使い方をまとめました。この記事では特に単体のコンポーネントについて紹介していきます。

See the Pen
Bootstrap Sample by Imai (@imai1)
on CodePen.

はてなブログにタグを直接埋め込むこともできるのですが、記事コンテンツの外部にも影響が及んでしまうため、CodePenに実装例をまとめました。

Bootstrapをページへ読み込む
Bootstrapの基本
ボタン
ボタンのグルーピング
ドロップダウン
アラート
バッジ
プログレスバー
スピナー
テーブル
カード
ナビゲーションバー
参考文献

Bootstrapをページへ読み込む

Bootstrapは、純粋なスタイルに関するCSSに加え、コンポーネントを機能させるためのJavaScriptで構成されています。

Bootstrapを自ページに導入する方法の一つは、公式？が用意したCDNサーバからCSSおよびJSを読み込むやり方です。以下のタグをページ内に追加します。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

なお、scriptタグおよびスタイルのlinkタグは、headタグとbodyタグのどちらの中にも置くことができます。

また、Bootstrapを使用する場合はDOCTYPEおよびレスポンシブデザインのためのビューポートのmetaタグが必要とのことです。

<!DOCTYPE html>
<html>
  <head>
    ...
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    ...
  </head>
  ...
</html>

なお、CodePenでは「Pen Settings > HTML > Stuff for <head>」でmetaタグの追加が可能です。

Bootstrapの基本

Bootstrapの基本的な使い方は、タグにクラスを設定するだけです。

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

特定のタグに適切なクラスを設定していくだけで、Bootstrapのスタイルや機能が反映されます。

ボタン

ボタンのタグにはbtnクラスを設定します。更に、btn-ホニャララでスタイルを設定できます。

<button type="button" class="btn">Basic</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-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>

なお、このクラスはbuttonタグの他、inputのbuttonタイプやsubmitタイプにも適用できます。

<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

ボタンのグルーピング

btn-groupで配下のボタンを一つのグループにまとめることができます。

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

グループ化されたボタンは横一列に隙間なく並べられます。

なお、ボタンを縦に並べるbtn-group-verticalというクラスもあるようです。

ドロップダウン

ドロップダウンとは、クリックするとポップアップ状のメニューが表示されるボタンです。

Bootstrapでドロップダウンを実現するためには、まずPopper.jsをインクルードするか、またはPopperを含むbootstrap.bundle.min.js / bootstrap.bundle.jsをインクルードする必要があります。

その上で、ドロップダウンは以下のような要素で実現することができます。

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Link 1</a></li>
    <li><a class="dropdown-item" href="#">Link 2</a></li>
    <li><a class="dropdown-item" href="#">Link 3</a></li>
  </ul>
</div>

開閉ボタンおよび表示されるメニュー全体をdropdownクラスで覆います。

開閉ボタンにはdropdown-toggleクラスおよびdata-bs-toggle="dropdown"属性を設定します。

表示されるメニューにはdropdown-menuクラスを設定し、各要素にはdropdown-itemクラスを設定します。

アラート

Bootstrapにおけるアラートとは、背景色を変化させた強調段落の事です。一言メッセージや警告などを表示する際によく使用されます。

<div class="alert alert-success">
  <strong>Success!</strong> alert-successのアラートです。
</div>
<div class="alert alert-info">
  <strong>Info!</strong> alert-infoのアラートです。
</div>
<div class="alert alert-warning">
  <strong>Warning!</strong> alert-warningのアラートです。
</div>
<div class="alert alert-danger">
  <strong>Danger!</strong> alert-dangerのアラートです。
</div>
<div class="alert alert-primary">
  <strong>Primary!</strong> alert-primaryのアラートです。
</div>
<div class="alert alert-secondary">
  <strong>Secondary!</strong> alert-secondaryのアラートです。
</div>
<div class="alert alert-dark">
  <strong>Dark!</strong> alert-darkのアラートです。
</div>
<div class="alert alert-light">
  <strong>Light!</strong> alert-lightのアラートです。
</div>

バッジ

spanに対してbadgeクラスを割り当てることで、バッジを作ることができます。

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning">Warning</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-light">Light</span>
<span class="badge bg-dark">Dark</span>

プログレスバー

progressおよびprogress-barクラスを用いると、プログレスバーを配置できます。

<div class="progress">
  <div class="progress-bar" style="width:10%">10%</div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" style="width:30%">進行中</div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width:50%">計算中</div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:70%"></div>
</div>

progressがプログレスバー全体の要素で、内側のprogress-barが進行度合いの要素です。style="width:X%"で進行度合い＝バーの横幅を変更することができますが、CSSで制御できるのはプログレスバーの見た目だけで、実際のwidthの値はプログレスバーで進行度を表示したい処理の内容に合わせてJavaScriptやサーバサイドのコードなどで制御します。

progress-barの中にテキストを設定するとバーの中に表示されます。

bg-info progress-bar-striped progress-bar-animatedなどでプログレスバーの見た目を変更できます。

スピナー

spinner-borderクラスを利用すると、待ち状態などを表すスピナーを作ることができます。

<div class="spinner-border text-muted"></div>
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-dark"></div>
<div class="spinner-border text-light"></div>

テーブル

テーブルにはtableクラスを設定します。

<table class="table">
...
</table>

この他にもtable-stripedクラスやtable-borderedクラスも使用可能です。それぞれ、行の背景色を縞模様にしたり、枠線をつけたりと、スタイルが少し変わります。

カード

cardクラスおよびいくつかのクラスによってカード状のコンポーネントを作成できます。

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="画像">
  <div class="card-body">
    <h5 class="card-title">カードタイトル</h5>
    <h6 class="card-subtitle mb-2 text-muted">カードのサブタイトル</h6>
    <p class="card-text">card-textクラスの要素内にカードの本文を記述します。</p>
    <a href="#" class="btn btn-primary">ボタン</a>
  </div>
</div>

カードの内部は比較的自由に定義でき、ボタンやリンクなどを配置できます。

ナビゲーションバー

ナビゲーションバーを設置する場合は、navタグにnavbarクラスを設定します。

<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <!-- Links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
    </ul>
  </div>
</nav>

ナビゲーションバーに並べる要素はulおよびliで作成します。それぞれnavbar-navおよびnav-itemを設定します。

liにはドロップダウンやフォームなどが使用できます。

<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <!-- Links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li>
            <hr class="dropdown-divider">
          </li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Link</a>
      </li>
    </ul>
  </div>
</div>