English 中文 العربية 日本語 Português

Bootstrap: Navbar、Dropdown、およびOffcanvas

最終更新：2026-08-26

1. コースの紹介

(1) 前提条件

(2) 🎯 学習内容

(3) ペインポイント

ボブの会社のWebサイトでは、デスクトップでは水平ナビゲーションを完全に表示し、モバイルではハンバーガーメニューに折りたたむ必要があります。純粋なHTML/CSS/JSでレスポンシブNavbarを実装するには、レイアウト、イベント、ブレークポイントを処理するための多くのコードが必要です。

(4) 解決策

Bootstrapのnavbar-expand-*とハンバーガーボタンを使用すると、約10行のコードで実現できます。BootstrapのNavbarコンポーネントは、レスポンシブな折りたたみ、ドロップダウン、オフキャンバスパネルを統合しており、単一のコードベースでモバイルとデスクトップに適応できます。

理解: Navbar = コンテナ + ブランド + 折りたたみ可能パネル + インタラクティブコンポーネント（ドロップダウン/検索/ボタン）。navbar-expand-*は水平ナビゲーションを展開するタイミングを制御し、ブレークポイント以下では自動的に折りたたまれます。

(5) メリット

BootstrapのNavbarを使用することで、ボブはわずか数行のコードでレスポンシブナビゲーション全体を完成させました。デスクトップでは水平に展開され、モバイルではハンバーガーメニューに折りたたまれ、ドロップダウンサポートが組み込まれています。

2. 基本的なNavbar構造

HTML 
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
      </ul>
    </div>
  </div>
</nav>
▶ 試してみよう

出力: Bootstrap 5.3 スタイルのコンポーネント効果（例: ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。

(1) 主要コンポーネント

コンポーネント クラス 目的
Navbarコンテナ navbar Navbarを宣言し、フレックスレイアウトを提供する
展開ブレークポイント navbar-expand-lg lg以上で水平に展開し、それ以下では折りたたむ
ブランド navbar-brand ロゴ / サイト名
ハンバーガーボタン navbar-toggler モバイルで表示され、クリックで折りたたみをトリガーする
折りたたみ可能パネル collapse navbar-collapse ハンバーガーボタンによって制御されるメニューパネル
ナビゲーションリスト navbar-nav ナビゲーションリンクのリスト（フレックス）
リンクアイテム nav-item / nav-link 単一のナビゲーションリンク

▶ サンプル テーマ付きNavbar

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navbar Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#">Alice's Site</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navDark">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navDark">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <nav class="navbar navbar-expand-lg bg-primary navbar-dark mt-2">
    <div class="container">
      <a class="navbar-brand" href="#">Brand</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navLight">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navLight">
        <ul class="navbar-nav ms-auto">
          <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>
    </div>
  </nav>

  <div class="container mt-4">
    <p>ブラウザのサイズを変更すると、小さな画面でNavbarが折りたたまれるのを確認できます。</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ 試してみよう

出力: Bootstrap 5.3 スタイルのコンポーネント効果（例: ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。 テーマカラースキーム: | 背景 | テキスト | 効果 | |:-----------|:-----|:-------| | bg-dark navbar-dark | ライトテキスト | ダークNavbar | | bg-light navbar-light | ダークテキスト | ライトNavbar | | bg-primary navbar-dark | ライトテキスト | カラーブランドNavbar |

3. 拡張Navbarコンテンツ

HTML 
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="https://via.placeholder.com/30x30" alt="Logo" class="d-inline-block align-text-top me-2">
      Bootstrap
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navExt">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navExt">
      <ul class="navbar-nav me-auto">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Docs</a></li>
      </ul>
      <form class="d-flex mx-2" role="search">
        <input class="form-control me-2" type="search" placeholder="Search">
        <button class="btn btn-outline-light" type="submit">Search</button>
      </form>
      <a href="#" class="btn btn-success">Sign Up</a>
    </div>
  </div>
</nav>
▶ 試してみよう

出力: Bootstrap 5.3 スタイルのコンポーネント効果（例: ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。

4. ドロップダウン

HTML 
<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
    Dropdown
  </a>
  <ul class="dropdown-menu">
    <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="#">Separated link</a></li>
  </ul>
</li>
▶ 試してみよう

出力: Bootstrap 5.3 スタイルのコンポーネント効果（例: ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。

要素 クラス 説明
トリガー dropdown-toggle 矢印インジケーター付きのドロップダウンボタン
メニューコンテナ dropdown-menu ドロップダウンパネル
メニューアイテム dropdown-item 単一のオプション
ディバイダー dropdown-divider メニューグループを分離
無効アイテム dropdown-item disabled グレー表示でクリック不可

(1) ドロップダウンのバリエーション

HTML 
<div class="btn-group dropup">
  <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">Dropup</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Item 1</a></li>
    <li><a class="dropdown-item" href="#">Item 2</a></li>
  </ul>
</div>

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Account</h6></li>
  <li><a class="dropdown-item" href="#">Profile</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><h6 class="dropdown-header">Help</h6></li>
  <li><a class="dropdown-item" href="#">FAQ</a></li>
</ul>
▶ 試してみよう

出力: Bootstrap 5.3 スタイルのコンポーネント効果（例: ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。

5. Offcanvasコンポーネント

HTML 
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
  <div class="container">
    <a class="navbar-brand" href="#">Offcanvas Nav</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end bg-dark" tabindex="-1" id="offcanvasNav">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title text-white">Menu</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">More</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">About</a></li>
              <li><a class="dropdown-item" href="#">Contact</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>
▶ 試してみよう

出力: Bootstrap 5.3 スタイルのコンポーネント効果（例: ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。

(1) Offcanvasと折りたたみ可能ナビゲーションの比較

比較次元 collapse navbar-collapse offcanvas
アニメーション方向 垂直方向に展開/折りたたむ 横からスライドイン
バックドロップ なし あり（半透明の背景）
ユースケース 単純なリンク（3-5アイテム） 多段階メニュー + 検索 + ユーザーパネル

(2) Offcanvasの方向

クラス 方向 シナリオ
offcanvas-start 左からスライドアウト サイドバーナビゲーション
offcanvas-end 右からスライドアウト ショッピングカート、通知（デフォルト）
offcanvas-top 上からスライドアウト 検索パネル
offcanvas-bottom 下からスライドアウト モバイルでのフィルタリング

6. Navbarコンポーネント図と参照

(1) Navbarコンポーネント階層

100% 
graph TD
    subgraph navbar
        A[.navbar] --> B[.container]
        B --> C[.navbar-brand ブランド識別子]
        B --> D[.navbar-toggler ハンバーガーボタン]
        B --> E[.collapse .navbar-collapse 折りたたみ可能パネル]
        E --> F[.navbar-nav ナビゲーションリスト]
        F --> G[.nav-item リンクアイテム]
        G --> H[.nav-link リンク]
        G --> I[.dropdown ドロップダウンメニュー]
        I --> J[.dropdown-menu]
        J --> K[.dropdown-item]
        E --> L[検索フォーム / ボタンなど]
    end
    subgraph Coloring
        A --> M[bg-* 背景色]
        A --> N[navbar-dark / navbar-light テキスト色]
    end
    subgraph Positioning
        A --> O[fixed-top / fixed-bottom / sticky-top]
    end

出力: Bootstrap 5.3 スタイルのコンポーネント効果（例: ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。

(2) Navbarブレークポイント動作参照表

navbar-expand 値 折りたたみ動作 水平展開画面 典型的なシナリオ
指定なし 常に折りたたむ なし モバイル専用ナビゲーション
navbar-expand-sm 576px未満で折りたたむ >=576px 大型スマートフォン以上
navbar-expand-md 768px未満で折りたたむ >=768px タブレット以上
navbar-expand-lg 992px未満で折りたたむ >=992px デスクトップ以上（最も一般的）
navbar-expand-xl 1200px未満で折りたたむ >=1200px 大型デスクトップ
navbar-expand-xxl 1400px未満で折りたたむ >=1400px 特大画面

▶ サンプル 固定トップNavbar

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fixed Top Navbar</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body { padding-top: 56px; }
    .scroll-content { height: 1500px; background: linear-gradient(#f8f9fa, #e9ecef); }
  </style>
</head>
<body>
  <nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">Top Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navFixed">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navFixed">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
          <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container scroll-content d-flex justify-content-center align-items-center">
    <p class="text-muted">fixed-topはNavbarをビューポートの上部に固定します。スクロールしても表示されたままになります。</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ 試してみよう

出力: Bootstrap 5.3 スタイルのコンポーネント効果（例: ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。

▶ サンプル 検索とボタン付きNavbar

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navbar with Search</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container">
      <a class="navbar-brand fw-bold" href="#">MyApp</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navSearch">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navSearch">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Explore</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Favorites</a></li>
        </ul>
        <form class="d-flex me-2" role="search">
          <input class="form-control me-2" type="search" placeholder="Search..." aria-label="Search">
          <button class="btn btn-outline-primary" type="submit">Search</button>
        </form>
        <a href="#" class="btn btn-primary">Log In</a>
      </div>
    </div>
  </nav>

  <div class="container mt-4">
    <p>Navbarには検索ボックスとログインボタンが含まれています。折りたたまれると、すべてハンバーガーメニュー内に折りたたまれます。</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ 試してみよう

出力: Bootstrap 5.3 スタイルのコンポーネント効果（例: ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。

▶ サンプル メガメニュー ドロップダウン

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mega Dropdown</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .mega-menu { min-width: 400px; padding: 1rem; }
    @media (max-width: 991.98px) { .mega-menu { min-width: auto; } }
  </style>
</head>
<body>
  <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#">Mega Shop</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMega">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navMega">
        <ul class="navbar-nav">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Product Categories</a>
            <div class="dropdown-menu mega-menu p-4">
              <div class="row g-3">
                <div class="col-6">
                  <h6 class="dropdown-header">Electronics</h6>
                  <a class="dropdown-item" href="#">Phones</a>
                  <a class="dropdown-item" href="#">Computers</a>
                  <a class="dropdown-item" href="#">Headphones</a>
                  <a class="dropdown-item" href="#">Accessories</a>
                </div>
                <div class="col-6">
                  <h6 class="dropdown-header">Home & Living</h6>
                  <a class="dropdown-item" href="#">Furniture</a>
                  <a class="dropdown-item" href="#">Kitchenware</a>
                  <a class="dropdown-item" href="#">Textiles</a>
                  <a class="dropdown-item" href="#">Storage</a>
                </div>
              </div>
            </div>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">New Arrivals</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Promotions</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container mt-4">
    <p>メガメニューは `dropdown-menu` と内部グリッドを使用して多列レイアウトを作成し、多くのカテゴリを含むナビゲーションに適しています。</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ 試してみよう

出力: Bootstrap 5.3 スタイルのコンポーネント効果（例: ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。

▶ サンプル ヒーロー上の透過Navbar

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transparent Navbar</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top" style="background: rgba(0,0,0,0.3); backdrop-filter: blur(4px);">
    <div class="container">
      <a class="navbar-brand fw-bold" href="#">Brand</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navTrans">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navTrans">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Works</a></li>
          <li class="nav-item"><a class="nav-link" href="#">About</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="d-flex justify-content-center align-items-center text-white" style="height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
    <div class="text-center">
      <h1 class="display-3 fw-bold">Creative Design Studio</h1>
      <p class="lead">We tell brand stories through design</p>
      <a href="#" class="btn btn-light btn-lg mt-3">Learn More</a>
    </div>
  </div>

  <div class="container py-5">
    <p>透過Navbarはヒーローの背景に重なり、スクロールするとコンテンツと重なります。`backdrop-filter: blur(4px)` は読みやすさを向上させます。</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ 試してみよう

出力: Bootstrap 5.3 スタイルのコンポーネント効果（例: ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。

❓ よくある質問

Q navbar-expand-lg は lg 未満で折りたたまれますが、それ以前の md 未満で折りたたむようにしたい場合はどうすればよいですか？
A 単にブレークポイントをより小さな値に変更してください：navbar-expand-md は md 以上で水平に展開し、md 未満で折りたたむことを意味します。利用可能な値：sm / md / lg / xl / xxl。navbar-expand-* を省略すると、常に折りたたまれた状態になります。
Q モバイルでNavbarのドロップダウンをクリックできないのはなぜですか？
A ドロップダウントリガーが data-bs-toggle="dropdown" を含む <a> または <button> タグであり、ページの下部にBootstrap JSバンドルが含まれていることを確認してください。
Q OffcanvasとModalの違いは何ですか？
A Offcanvasはサイドにスライドするパネルで、メインコンテンツ領域をブロックしません（デスクトップでは引き続き表示されます）。ナビゲーション/フィルタリングに適しています。Modalは中央に表示されるポップアップで、背景を完全にブロックします。確認ダイアログ/フォーム入力に適しています。
Q Navbarを上部に固定できますか？
A はい。fixed-top クラスを追加すると、ビューポートの上部に固定されます。その場合、高さを補正するために body に padding-top を追加する必要があります。sticky-top オプションもあります：通常はスクロールし、ビューポートからスクロールアウトしたときのみ固定されます。
Q Navbarのアクセシビリティ（A11y）について何に注意すべきですか？
A 重要なポイント：(1) ナビゲーションの目的を説明する aria-label を持つ <nav> タグを使用すること。(2) ハンバーガーボタンに aria-controls を使用し、折りたたみ可能パネルのIDを指し示すこと。(3) 現在のページのリンクに aria-current="page" を追加すること。(4) ドロップダウントリガーに aria-expanded 状態を使用すること。BootstrapのJSコンポーネントは、ほとんどのARIA属性を自動的に処理します。

📖 まとめ

📝 練習問題

  1. ⭐ 完全な企業向けWebサイトのNavbarを作成してください：ダーク背景、左側にブランドロゴ、右側にメニューリンク（Home / About / Services / Contact）、Servicesにはドロップダウンサブメニューを含めます。
  2. ⭐⭐ Navbarの折りたたみ方法をOffcanvas（横からスライドアウト）に変更してください。Offcanvasパネル内に検索ボックスとユーザーログインボタンを追加してください。
  3. ⭐⭐⭐ 下部ツールバーを作成してください：fixed-bottom を使用して固定位置に配置し、4つのアイコンリンクを含め、モバイルアプリの下部ナビゲーションをシミュレートします。

前のレッスン: グリッド · 次のレッスン: ボタンとボタングループ

Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%