LoginSignup
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@tinatina0823

Bootstrap チートシート【ほぼ自分用】

Posted at

Bootstrapとは？ — 公式ドキュメント紹介

Bootstrapは、Twitter社が開発した人気のフロントエンドフレームワークで、WebサイトやWebアプリのレスポンシブなデザインを簡単に実装できます。

公式ドキュメント（https://getbootstrap.jp/docs/5.3/getting-started/introduction/）によると、BootstrapはCSSとJavaScriptのコンポーネント群で構成されており、以下の特徴があります。

  • レスポンシブ対応のグリッドシステム
  • 使いやすいUIコンポーネント（ボタン、フォーム、モーダルなど）
  • 豊富なユーティリティクラスで高速なスタイリング
  • カスタマイズしやすい設計

Bootstrapを利用することで、ブラウザ間の互換性を気にせず効率的に画面設計ができるのが大きなメリットです。

1. Bootstrapを使うための準備

Bootstrapを使うには、以下のいずれかの方法でCSSとJavaScriptをプロジェクトに読み込む必要があります。

方法：CDNを使う（もっとも簡単）

以下のコードをHTMLファイルの<head>と</body>直前に追加することで、Bootstrapをすぐに使い始めることができます。

<!-- Bootstrap CSS（head内に追加）-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap JavaScript（body終了直前に追加） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

2. Bootstrapの基本レイアウト構造

Bootstrapは「コンテナ」「行（row）」「列（col）」の3つを使ってレイアウトを構成します。レスポンシブで整ったデザインを簡単に作ることができます。

基本構造の例

<div class="container">
  <div class="row">
    <div class="col">
      カラム1
    </div>
    <div class="col">
      カラム2
    </div>
    <div class="col">
      カラム3
    </div>
  </div>
</div>

解説

  • .container
    中央寄せされたレイアウトの基本枠。幅が画面サイズに応じて変化します

  • .row
    横方向に行を作ります。中には .col で分割されたカラムを配置します

  • .col
    幅は自動で均等に分割されます。12分割を意識してサイズ指定も可能です（例：.col-6 や .col-md-4 など）

3. Bootstrapの基本的な使い方：フォーム（入力フィールド）の例と解説

<div class="container mt-4">
  <form>
    <div class="mb-3">
      <label for="exampleInputEmail1" class="form-label">メールアドレス</label>
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="name@example.com">
    </div>
    <div class="mb-3">
      <label for="exampleInputPassword1" class="form-label">パスワード</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="パスワードを入力">
    </div>
    <button type="submit" class="btn btn-primary">送信</button>
  </form>
</div>

📝 解説

  • .form-label：フォームのラベル用クラス。入力欄の上にテキストを表示します

  • .form-control：テキストボックスやパスワード欄の見た目を整えるクラス

  • .mb-3：入力欄ごとに下マージンを付ける（margin-bottom: 1rem相当）

  • <button type="submit">：フォーム送信用のボタン。.btnと.btn-primaryで見た目をスタイリング

フォームの例（コード）

<form>
  <div class="mb-3">
    <label for="email" class="form-label">メールアドレス</label>
    <input type="email" class="form-control" id="email" placeholder="name@example.com">
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">パスワード</label>
    <input type="password" class="form-control" id="password" placeholder="パスワードを入力">
  </div>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

📝 解説

  • .mb-3：各フォーム要素の下に余白を作るためのクラス

  • <label>タグと.form-labelクラスで入力欄の説明を表示

  • <input>タグに.form-controlを付けて、Bootstrapのスタイルを適用

  • 送信ボタンは.btnと.btn-primaryで青いボタンにスタイリング

ボタンとアラートの使い方

<!-- ボタン -->
<button type="button" class="btn btn-primary">プライマリーボタン</button>
<button type="button" class="btn btn-success">成功ボタン</button>
<button type="button" class="btn btn-danger">危険ボタン</button>

<!-- アラート -->
<div class="alert alert-success mt-3" role="alert">
  成功しました！
</div>
<div class="alert alert-danger" role="alert">
  エラーが発生しました。
</div>

📝 解説

  • .btn：Bootstrapのボタンの基本クラス
  • .btn-primary / .btn-success / .btn-danger：ボタンの種類や色を指定するクラス（青・緑・赤など）
  • .alert：アラート（通知）を表示するための基本クラス
  • .alert-success：成功時の緑色の通知
  • .alert-danger：エラー時の赤色の通知
  • .mt-3：上にマージンを追加（margin-top: 1rem 相当）

フォームのチェックボックスとラジオボタン

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1" />
  <label class="form-check-label" for="check1">チェックボックス</label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="radioGroup" id="radio1" />
  <label class="form-check-label" for="radio1">ラジオボタン1</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="radioGroup" id="radio2" />
  <label class="form-check-label" for="radio2">ラジオボタン2</label>
</div>

📝 解説

  • .form-check：チェックボックスやラジオボタンをまとめるラッパークラス

  • .form-check-input：チェックボックス・ラジオボタンの入力部分にスタイルを適用

  • .form-check-label：対応するラベルにスタイルを適用し、クリックで入力切替可能に

  • name属性は同じラジオボタンをグループ化するために使う

セレクトボックスとオプション

<form>
  <div class="mb-3">
    <label for="exampleSelect" class="form-label">選択してください</label>
    <select class="form-select" id="exampleSelect">
      <option selected>選択してください</option>
      <option value="1">オプション1</option>
      <option value="2">オプション2</option>
      <option value="3">オプション3</option>
    </select>
  </div>
</form>

📝 解説

  • .form-select：Bootstrapでセレクトボックスにスタイルを適用するクラス

  • <option>タグ：選択肢を表し、value属性で値を指定可能

  • selected属性を付けたオプションが初期選択状態になる

テキストエリア

<form>
  <div class="mb-3">
    <label for="exampleTextarea" class="form-label">コメント</label>
    <textarea class="form-control" id="exampleTextarea" rows="3" placeholder="ここに入力してください"></textarea>
  </div>
</form>

📝 解説

  • .form-control：テキストエリアにも適用して見た目を整えるクラス

  • rows：テキストエリアの高さ（行数）を指定

  • placeholder：入力が空のときに薄く表示されるヒントテキスト

入力バリデーションの見た目

<form>
  <div class="mb-3">
    <label for="inputInvalid" class="form-label">無効な入力例</label>
    <input type="text" class="form-control is-invalid" id="inputInvalid" placeholder="エラーがあります">
    <div class="invalid-feedback">
      こちらの入力は必須です。
    </div>
  </div>
</form>

📝 解説

  • .is-invalid：入力フォームにエラー状態のスタイルを付与するクラス

  • .invalid-feedback：エラーメッセージの表示に使うクラスで、.is-invalidが付いたフォームの直後に配置する

  • バリデーション結果に応じてJavaScriptなどで.is-invalidクラスを付け外しして使うことが多い

フォームのグリッドレイアウト（複数のフォーム要素を横並びにする）

<form>
  <div class="row mb-3">
    <div class="col-md-6">
      <label for="firstName" class="form-label">名前</label>
      <input type="text" class="form-control" id="firstName" placeholder="名前">
    </div>
    <div class="col-md-6">
      <label for="lastName" class="form-label">苗字</label>
      <input type="text" class="form-control" id="lastName" placeholder="苗字">
    </div>
  </div>
</form>

📝 解説

  • .rowでフォームグループ全体の行を作る

  • .col-md-6で画面幅「md（768px）以上」の場合、2分割して横並びに

  • 画面幅が狭い場合は縦並びに自動で切り替わるレスポンシブ対応

  • 複数のフォーム入力を横並びにしてコンパクトに配置したい時に便利

4. Bootstrapの便利なUIコンポーネント

モーダル

Bootstrapのモーダルは、画面中央にポップアップで表示されるダイアログのことです。確認ダイアログやフォーム表示などによく使われます。

<!-- 開くボタン -->
<button type="button" class="btn btn-primary" id="openModalBtn">
  モーダルを開く
</button>

<!-- モーダル本体 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      
      <div class="modal-header">
        <h5 class="modal-title">モーダルのタイトル</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
      </div>
      
      <div class="modal-body">
        ここにモーダルの内容を記述します。
      </div>
      
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">保存する</button>
      </div>

    </div>
  </div>
</div>

<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<!-- モーダルを開くJavaScript -->
<script>
  document.getElementById('openModalBtn').addEventListener('click', function () {
    var myModal = new bootstrap.Modal(document.getElementById('exampleModal'));
    myModal.show();
  });
</script>

📝 解説

  • .modal：モーダルの最外枠。fadeクラスを付けるとフェードイン・アウトのアニメーションになる

  • id="exampleModal"：モーダルを特定するためのID。JavaScriptで指定する

  • .modal-dialog：モーダルのダイアログ枠

  • .modal-content：モーダル内のコンテンツ全体を囲む

  • .modal-header：タイトルや閉じるボタンの領域

  • .modal-title：モーダルのタイトルテキスト

  • .btn-close：右上の閉じるボタン。data-bs-dismiss="modal"でモーダルを閉じる動作がつく

  • .modal-body：モーダルのメインコンテンツ

  • .modal-footer：操作ボタンの領域（閉じる、保存など）

  • JavaScriptの new bootstrap.Modal() でモーダルを操作。show()で表示、hide()で非表示にできる

ナビゲーションバー

ナビゲーションバーは、ウェブサイトの上部に配置されるメニューのことです。レスポンシブ対応で、画面サイズに応じて折りたたみメニューに切り替わります。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">サイト名</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
      aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーションの切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">ホーム</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">特徴</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">価格</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

📝 解説

  • .navbar：ナビゲーションバーの基本クラス
  • .navbar-expand-lg：大きい画面では展開、小さい画面では折りたたみになる
  • .navbar-light と .bg-light：背景と文字色のテーマを設定
  • .navbar-toggler：折りたたみメニューを開閉するボタン
  • .collapse + .navbar-collapse：折りたたみ部分のコンテナ
  • .nav-item と .nav-link：メニュー項目とリンクのスタイル
  • .nav-link.disabled：無効化されたリンクを表す

ツールチップ

ツールチップは、要素にマウスを乗せた時に小さな説明テキストを表示する機能です。ユーザーに補足情報を提供するのに便利です。

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="ツールチップのテキスト">
  ホバーしてね
</button>

<script>
  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
  tooltipTriggerList.forEach(tooltipTriggerEl => {
    new bootstrap.Tooltip(tooltipTriggerEl)
  })
</script>

📝 解説

  • data-bs-toggle="tooltip"：ツールチップを有効にする属性
  • data-bs-placement：ツールチップの表示位置を指定（top、bottom、left、right）
  • title属性でツールチップのテキストを指定
  • JavaScriptで bootstrap.Tooltip を初期化し、機能を動作させる必要がある

ポップオーバー

ポップオーバーはツールチップに似ていますが、タイトルや本文を含むよりリッチな情報を表示できます。クリックやホバーで表示されます。

<button type="button" class="btn btn-info" data-bs-toggle="popover" data-bs-placement="right" title="ポップオーバータイトル" data-bs-content="ここがポップオーバーの内容です。">
  クリックしてね
</button>

<script>
  const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
  popoverTriggerList.forEach(popoverTriggerEl => {
    new bootstrap.Popover(popoverTriggerEl)
  })
</script>

📝 解説

  • data-bs-toggle="popover"：ポップオーバーを有効にする属性
  • data-bs-placement：ポップオーバーの表示位置を指定
  • title属性でポップオーバーのタイトルを設定
  • data-bs-content属性でポップオーバーの本文を設定
  • JavaScriptで bootstrap.Popover を初期化し、動作させる必要がある

トースト通知

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">通知タイトル</strong>
      <small>今</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
    </div>
    <div class="toast-body">
      これはトースト通知の本文です。
    </div>
  </div>
</div>

<button type="button" class="btn btn-primary" id="showToastBtn">トーストを表示</button>

<script>
  const toastTrigger = document.getElementById('showToastBtn')
  const toastLiveExample = document.getElementById('liveToast')
  const toast = new bootstrap.Toast(toastLiveExample)

  toastTrigger.addEventListener('click', () => {
    toast.show()
  })
</script>

📝 解説

  • .toast：トースト通知の基本クラス
  • .toast-header：通知のヘッダー部分（タイトルや閉じるボタン）
  • .toast-body：通知本文の表示領域
  • .position-fixed.bottom-0.end-0：画面右下に固定表示するためのクラス
  • JavaScriptで bootstrap.Toast を初期化し、.show() メソッドで表示できる
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?