bootstrap5-ui

Bootstrap 5 UI

Bootstrap 5.3 を使用して、HTML および ASP.NET Core Razor Pages/Views でレスポンシブかつアクセシブルな Web UI を構築するための、本番環境向けパターンです。Bootstrap 5.3.x（現在の CDN：5.3.8）を対象とします。Bootstrap 5 では jQuery への依存が完全になくなりました。

ASP.NET Core でのセットアップ

CDN（クイックスタート）

_Layout.cshtml または _Host.cshtml に記述します。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
      crossorigin="anonymous">


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
        crossorigin="anonymous"></script>

LibMan（本番環境に推奨）

// libman.json
{
  "version": "1.0",
  "defaultProvider": "jsdelivr",
  "libraries": [
    {
      "library": "[email protected]",
      "destination": "wwwroot/lib/bootstrap/"
    }
  ]
}

レイアウトでローカルのファイルを参照します。

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

必須のグローバル設定

常に <head> に含めます。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

グリッドシステム

Bootstrap は、6 つのレスポンシブブレークポイントを備えた 12 カラムの Flexbox グリッドを使用します。

ブレークポイント	プレフィックス	最小幅
特小	.col-	<576px
小	.col-sm-	>=576px
中	.col-md-	>=768px
大	.col-lg-	>=992px
特大	.col-xl-	>=1200px
XXL	.col-xxl-	>=1400px

基本パターン

<div class="container">
  <div class="row">
    <div class="col-md-8">Main content</div>
    <div class="col-md-4">Sidebar</div>
  </div>
</div>

主なルール

• カラムは必ず .container（全幅にする場合は .container-fluid）内の .row で囲みます
• カラムは行の直接の子要素にする必要があります
• ガターには .g-* クラスを使用します（.g-0 はガターを削除し、.gx-* は水平方向、.gy-* は垂直方向のガターを設定します）
• カラム数を均等にするには、行に .row-cols-* を使用します：<div class="row row-cols-1 row-cols-md-3 g-4">
• ブレークポイントを組み合わせます：<div class="col-6 col-md-4 col-lg-3"> — xs では 2 列、md では 3 列、lg では 4 列に折り返します

コンテナーの種類

• .container — レスポンシブな固定幅
• .container-fluid — 常に全幅
• .container-{breakpoint} — ブレークポイントまでは流動幅、それ以降は固定幅

余白ユーティリティ

形式：{property}{sides}-{breakpoint}-{size}

プロパティ： m（マージン）、p（パディング） 辺： t 上、b 下、s 開始（左）、e 終了（右）、x 水平方向、y 垂直方向、空欄 = すべて サイズ： 0=0、1=0.25rem、2=0.5rem、3=1rem、4=1.5rem、5=3rem、auto

<div class="mt-3 mb-4 px-2">Spaced element</div>
<div class="mx-auto" style="width: 200px;">Centered block</div>
<div class="py-md-5">Padding only on md+</div>

カラーモード（ダーク／ライト）

Bootstrap 5.3 は、ダークモード用の data-bs-theme 属性をサポートしています。

<html lang="en" data-bs-theme="dark">


<div class="card" data-bs-theme="dark">...</div>
<nav class="navbar bg-dark" data-bs-theme="dark">...</nav>

カラーモードに応じて変化するセマンティックカラークラスを使用します。

• bg-body、bg-body-secondary、bg-body-tertiary — テーマに応じて変化します
• text-body、text-body-secondary、text-body-emphasis — テーマに応じて変化します
• border-body — テーマに応じて変化します

色を固定値で指定するのは避けてください。 テーマに対応した背景色には、bg-light ではなく bg-body-tertiary を使用します。

よく使うコンポーネントのパターン

ナビゲーションバー

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button"
            data-bs-toggle="collapse" data-bs-target="#mainNav"
            aria-controls="mainNav" aria-expanded="false"
            aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

グリッド内のカード

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Title</h5>
        <p class="card-text">Description text.</p>
        <a href="#" class="btn btn-primary">Action</a>
      </div>
    </div>
  </div>
  
</div>

フォーム

<form method="post">
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="remember">
    <label class="form-check-label" for="remember">Remember me</label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

フローティングラベル

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatEmail" placeholder="[email protected]">
  <label for="floatEmail">Email address</label>
</div>

レスポンシブテーブル

<div class="table-responsive">
  <table class="table table-striped table-hover">
    <thead class="table-dark">
      <tr><th>Name</th><th>Email</th><th>Actions</th></tr>
    </thead>
    <tbody>
      <tr><td>John</td><td>[email protected]</td><td><a class="btn btn-sm btn-outline-primary">Edit</a></td></tr>
    </tbody>
  </table>
</div>

Razor Pages との統合

タグヘルパー、検証、レイアウト、部分ビューなど、ASP.NET Core Razor Pages との詳細な統合パターンについては、references/razor-integration.md を参照してください。

主なポイント：

• Bootstrap クラスとともに asp-for、asp-page、asp-action タグヘルパーを使用します
• asp-validation-for を .invalid-feedback／.is-invalid クラスと組み合わせます
• jQuery Validation Unobtrusive またはカスタム JS を使って Bootstrap の検証クラスを設定します
• レイアウト内でページ固有のスクリプトを指定するには、@section Scripts を使用します

コンポーネントリファレンス

コンポーネントの完全なパターン（モーダル、アラート、トースト、アコーディオン、ページネーション、パンくずリスト、バッジ、オフキャンバス、スピナー、プログレスバー）については、references/components.md を参照してください。

ユーティリティクラス早見表

表示

d-none、d-block、d-flex、d-grid、d-inline、d-inline-block レスポンシブ：d-md-none、d-lg-flex

Flexbox

justify-content-{start|center|end|between|around|evenly} align-items-{start|center|end|stretch} flex-{row|column}、flex-wrap、flex-grow-1

テキスト

text-{start|center|end}、text-{lowercase|uppercase|capitalize} fw-{bold|semibold|normal|light}、fs-{1-6} text-truncate、text-nowrap、text-break

色

text-{primary|secondary|success|danger|warning|info|light|dark} bg-{primary|secondary|success|danger|warning|info|light|dark} text-bg-{color} — テキストと背景に対応する色をまとめて設定します

境界線と影

border、border-{top|bottom|start|end}、border-{color}、border-{1-5} rounded、rounded-{0-5|circle|pill} shadow、shadow-sm、shadow-lg、shadow-none

サイズ

w-{25|50|75|100|auto}、h-{25|50|75|100|auto} mw-100、mh-100、vw-100、vh-100 min-vw-100、min-vh-100

位置

position-{static|relative|absolute|fixed|sticky} top-{0|50|100}、start-{0|50|100}、translate-middle

アクセシビリティ要件

• アイコンのみのボタンや切り替えボタンには、必ず aria-label を含めます
• アクティブなナビリンクには aria-current="page" を使用します
• 折りたたみやドロップダウンのトリガーには aria-expanded を使用します
• 画像には alt テキストを指定し、スクリーンリーダー専用のテキストには .visually-hidden を使用します
• コントラスト比が WCAG 2.1 AA を満たすようにします（テキストは 4.5:1、大きなテキストは 3:1）
• セマンティック HTML（<nav>、<main>、<header>、<footer>、<section>、<article>）を使用します
• :focus スタイルを削除しないでください。カスタムのフォーカスには Bootstrap の .focus-ring ユーティリティを使用します

避けるべきパターン

• 親の .row なしで col-* を使用する — グリッドの配置が崩れます
• コンテナーを入れ子にする — 入れ子にできるのは行だけです。コンテナーの中にコンテナーを配置しないでください
• 余白のために <br> やインラインスタイルを使用する — 余白ユーティリティ（mt-3、mb-4）を使用します
• bg-light／bg-dark を固定で指定する — テーマに応じた背景には bg-body-tertiary を使用します
• navbar-expand-{breakpoint} を指定し忘れる — ナビバーがレスポンシブに折りたたまれません
• Bootstrap 4 のクラス（例：ml-3、mr-3）を混在させる — ms-3、me-3（論理プロパティの start／end）を使用します
• フォーム内の送信ボタン以外で type="button" を省略する — 意図しないフォーム送信が発生します
• href のないアクションに <a> を使用する — アクションには <button>、ナビゲーションには <a> を使用します
• フォーム入力に .form-label を付けない — アクセシビリティが損なわれます
• テーブルを .table-responsive で囲まない — モバイルで横方向にはみ出します