ホームページ >ウェブフロントエンド >ブートストラップのチュートリアル >Bootstrap にナビゲーションツールバーを追加するにはどうすればよいですか? Navbar コンポーネントの使用法に関する簡単な分析

Bootstrap にナビゲーションツールバーを追加するにはどうすればよいですか? Navbar コンポーネントの使用法に関する簡単な分析

青灯夜游転載: 2021-11-24 19:35:596035ブラウズ

Bootstrap にナビゲーションツールバーを追加するにはどうすればよいですか? Bootstrap5 のナビゲーションツールバー (Navbar) コンポーネントの使い方を次の記事で紹介しますので、ご参考になれば幸いです。

1 動作原理

ブートストラップナビゲーションツールバー (Navbar) は、前のセクションで学習したナビゲーションよりも強力で、応答性が高く、構造化されています。ブランド、ナビゲーション、フォームなどに加えて、折りたたみプラグインのサポートも含まれます。 [関連する推奨事項: "bootstrap チュートリアル "]

ナビゲーションバーの使用を開始する前に、次のことを理解しておく必要があります:

ナビゲーションバーでは、次のことを行う必要があります。 .navbar とともにパッケージ化され、 .navbar-expand{-sm|-md|-lg|-xl} を使用して応答性の高い折りたたみを提供し、カラースキームクラスを使用します。
ナビゲーションバーのデフォルトのコンテンツ幅はフローティングです。コンテナを変更すると、さまざまな方法で水平幅が制限されます。
スペースおよびフレキシブルボックスの共通クラスを使用して、ナビゲーションバー内のオブジェクトの間隔と配置を制御します。
ナビゲーションバーはデフォルトで応答しますが、このオプションは簡単に変更できます。
nav 要素を使用してアフィニティを確保するか、div などのより一般的な要素を使用します。
現在のページに aria-current="page" を設定するか、グループ内の現在の項目に aria-current="true" を設定して、現在の場所を示します。

2 ナビゲーションバーの構造

2.1 サポートされるサブ要素

ナビゲーションバーには、いくつかのサブ要素のサポートが組み込まれています。要件に基づいて次のオプションから選択します。

navbar-brand 会社名、製品名、またはプロジェクト名。
navbar-nav は、非常に完成度の高い軽量のナビゲーション (ドロップダウンリストのサポートを含む) を提供します。
navbar-toggler は、折りたたみプラグインやその他のナビゲーションの切り替え動作に使用されます。
スペースとフレキシブルボックスの共通クラスは、フォームの制御と動作に使用されます。
navbar-text は、垂直方向の中央揃えのテキスト文字列に使用されます。
.collapse.navbar-collapse 親レイヤーのブレークポイントを通じてナビゲーションバーのコンテンツをグループ化し、非表示にします。
オプションの .navbar-scroll を追加して、最大高さを設定し、展開されたナビゲーションバーのコンテンツをスクロールします。

次は、md ブレークポイントで自動的に折りたたまれる、応答性の高いナビゲーションバーに含まれる子要素の例です。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
      <br><br>
        <div class="container">
            <nav class="navbar navbar-expand-md navbar-light bg-light">
                <div class="container-fluid">
                <a class="navbar-brand" href="https://www.bootstrap.cn"><img src="pic/logo.jpg"  height="60px"  alt=""></a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                  <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 dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                      版本
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                      <li><a class="dropdown-item" href="#">Bootstrap 4</a></li>
                      <li><a class="dropdown-item" href="#">Bootstrap 5</a></li>
                      <li><hr class="dropdown-divider"></li>
                      <li><a class="dropdown-item" href="#">早期版本</a></li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">留言</a>
                  </li>
                </ul>
                <form class="d-flex">
                  <input class="form-control me-2" type="search" placeholder="关键词" aria-label="Search">
                  <button class="btn btn-outline-success text-nowrap" type="submit">搜索</button>
                </form>
                </div>
                </div>
                </nav>

        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

ブレークポイントの前後に表示されるナビゲーションは、図に示すとおりです。

Bootstrap にナビゲーションツールバーを追加するにはどうすればよいですか? Navbar コンポーネントの使用法に関する簡単な分析

3 つの横のアイコンをクリックします。右側の行を削除すると、次の画像が表示されます。復元するには、ここをクリックしてください。

Bootstrap にナビゲーションツールバーを追加するにはどうすればよいですか? Navbar コンポーネントの使用法に関する簡単な分析

上記の例の後、コードを手書きで実装したい場合は、かなりの時間がかかります。あとはコピーして貼り付けるだけです。各コンポーネントの機能と使い方を詳しく紹介します。

2.2 ブランド (navbar-brand)

テキスト、画像、画像、およびテキストの組み合わせを配置できます。上の例では、ロゴ画像を配置します。

#Text

<!-- 可以放链接 -->
<nav>
<div>
<a>Navbar</a>
</div>
</nav>

<!-- 也可以放纯文本标签 -->
<nav>
<div>
<span>Navbar</span>
</div>
</nav>

Bootstrap にナビゲーションツールバーを追加するにはどうすればよいですか? Navbar コンポーネントの使用法に関する簡単な分析 #画像は上の例で使用されています。今度は画像とテキストを混ぜてみましょう

<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/static/doc5.0/assets/brand/bootstrap-logo.svg" alt="" width="30"    style="max-width:90%" class="d-inline-block align-text-top">
Bootstrap
</a>
</div>
</nav>

Bootstrap にナビゲーションツールバーを追加するにはどうすればよいですか? Navbar コンポーネントの使用法に関する簡単な分析 2.3 ナビゲーション

ナビゲーション接続は前に学習した .nav 上で確立され、適切な応答スタイルを確立するにはトグラークラスを使用する必要があります。ナビゲーションバーのナビゲーション要素は、ナビゲーションバーのコンテンツを安全に整列させるために、可能な限り多くの水平方向のスペースを占有します。

有効ステータス - .active を使用して、現在のページを表します。 .nav-link または .nav-item で直接使用できます。

.nav-link 自体に aria-current 属性を追加する必要があることに注意してください。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
      <br><br>
        <div>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div>
                <a href="#">品牌</a>
                <button type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                <ul>
                  <li>
                    <a class="nav-link active" aria-current="page" href="#">首页</a>
                  </li>
                  <li>
                    <a href="#">功能</a>
                  </li>
                  <li>
                    <a href="#">价格</a>
                  </li>
                  <li>
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                  </li>
                </ul>
                </div>
                </div>
            </nav>

        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap にナビゲーションツールバーを追加するにはどうすればよいですか? Navbar コンポーネントの使用法に関する簡単な分析リストを使用しない簡潔な方法。

 <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="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav">
                  <a class="nav-link active" aria-current="page" href="#">首页</a>
                  <a class="nav-link" href="#">功能</a>
                  <a class="nav-link" href="#">价格</a>
                  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </div>
                </div>
                </div>
            </nav>

この 2 つは同じ効果があります

ナビゲーションバーのナビゲーション要素でドロップダウンメニューを使用することもできます。ドロップダウンメニューには、位置を指定するためのラッパー要素が必要です。以下に示すように、.nav-item と .nav-link には必ず個別のネストされた要素を使用してください。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
      <br><br>
        <div>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div>
                <a href="#">品牌</a>
                <button type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul>
                  <li>
                    <a class="nav-link active" aria-current="page" href="#">首页</a>
                  </li>
                  <li>
                    <a href="#">功能</a>
                  </li>
                  <li>
                    <a href="#">价格</a>
                  </li>
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                      下拉菜单
                    </a>
                    <ul aria-labelledby="navbarDropdownMenuLink">
                      <li><a href="#">菜单一</a></li>
                      <li><a href="#">菜单二</a></li>
                      <li><a href="#">菜单三</a></li>
                    </ul>
                  </li>
                </ul>
                </div>
                </div>
            </nav>

        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap にナビゲーションツールバーを追加するにはどうすればよいですか? Navbar コンポーネントの使用法に関する簡単な分析 2.4 フォーム

ナビゲーションバーには、13.2.1 の検索フォーム、13.2.1 の検索フォームなど、さまざまなフォームやコンポーネントを配置できます。 navbar 直接の子要素はフレックスレイアウトを使用し、デフォルトは justify-content: space-between で、両端を揃えることを意味します。この動作を調整するには、必要に応じて他の単一スターボックスクラスを使用します。

input群组也可以这样使用。如果导航条整个都是表单，或者大部分是表单，则可以使用form元素作为容器并保存HTML。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
      <br><br>
        <div>
            <nav class="navbar navbar-light bg-light">
                <form>
                <div>
                <span id="basic-addon1">@</span>
                <input type="text" placeholder="请输入用户名" aria-label="Username" aria-describedby="basic-addon1">
                </div>
                </form>
            </nav>

        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap にナビゲーションツールバーを追加するにはどうすればよいですか? Navbar コンポーネントの使用法に関する簡単な分析

表单导航条也支持各种按钮。这也大大的提醒了我们可以使用垂直对齐工具来对齐不同大小的元素。

<nav class="navbar navbar-light bg-light">
<form class="container-fluid justify-content-start">
<button class="btn btn-outline-success me-2" type="button">Main button</button>
<button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
</form>
</nav>

Bootstrap にナビゲーションツールバーを追加するにはどうすればよいですか? Navbar コンポーネントの使用法に関する簡単な分析

2.5 文本

透过.navbar-text导航条可以包含一些文本。该class调整了文本字串的垂直对齐和水平间距。貌似这个用的不多，直接拿官方例子。

<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>

Bootstrap にナビゲーションツールバーを追加するにはどうすればよいですか? Navbar コンポーネントの使用法に関する簡単な分析

根据需要与其他元件和通用类别混合使用。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<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="#">Features</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Pricing</a>
  </li>
</ul>
<span class="navbar-text">
  Navbar text with an inline element
</span>
</div>
</div>
</nav>

1Bootstrap にナビゲーションツールバーを追加するにはどうすればよいですか? Navbar コンポーネントの使用法に関する簡単な分析

3 配色方案

由于主题class和background-color通用类别class的结合，主题化导航条从未如此简单。从navbar-light选用浅色背景颜色，或者navbar-dark用于深色背景颜色。然后，使用.bg-*通用类别自定义。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
      <br><br>
      <div>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
          <div>
            <a href="#">品牌</a>
            <button type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
              <span></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarColor01">
              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li>
                  <a class="nav-link active" aria-current="page" href="#">首页</a>
                </li>
                <li>
                  <a href="#">功能</a>
                </li>
                <li>
                  <a href="#">价格</a>
                </li>
                <li>
                  <a href="#">关于</a>
                </li>
              </ul>
              <form>
                <input class="form-control me-2" type="search" placeholder="输入关键词" aria-label="Search">
                <button class="btn btn-outline-light text-nowrap" type="submit">搜索</button>
              </form>
            </div>
          </div>
        </nav>
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
          <div>
            <a href="#">品牌</a>
            <button type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
              <span></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarColor02">
              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li>
                  <a class="nav-link active" aria-current="page" href="#">首页</a>
                </li>
                <li>
                  <a href="#">功能</a>
                </li>
                <li>
                  <a href="#">价格</a>
                </li>
                <li>
                  <a href="#">关于</a>
                </li>
              </ul>
              <form>
                <input class="form-control me-2" type="search" placeholder="输入关键词" aria-label="Search">
                <button class="btn btn-outline-light text-nowrap" type="submit">搜索</button>
              </form>
            </div>
          </div>
        </nav>
        <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
          <div>
            <a href="#">品牌</a>
            <button type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
              <span></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarColor03">
              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li>
                  <a class="nav-link active" aria-current="page" href="#">首页</a>
                </li>
                <li>
                  <a href="#">功能</a>
                </li>
                <li>
                  <a href="#">价格</a>
                </li>
                <li>
                  <a href="#">关于</a>
                </li>
              </ul>
              <form>
                <input class="form-control me-2" type="search" placeholder="输入关键词" aria-label="Search">
                <button class="btn btn-outline-primary text-nowrap" type="submit">搜索</button>
              </form>
            </div>
          </div>
        </nav>
      </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

1Bootstrap にナビゲーションツールバーを追加するにはどうすればよいですか? Navbar コンポーネントの使用法に関する簡単な分析

更多颜色在通用类>背景颜色中查看，在前面章节表格颜色中也有相关介绍。

4 容器

虽然不是必需的，但您可以把导航条包装在.container中，将其置中于页面。您可以使用任意响应式容器以更改导航条中内容的显示宽度。这部分内容比较简单，我就不在演示了。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-md">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>

5 定位

使用我们的定位通用类别将导航条放置在非静态位置。选择固定到顶部、固定到底部、或粘贴到顶部（会随着页面滚动，直到物件达到顶部，并停留在原处）。固定的导航条使用position:fixed，这意味着它们会脱离正常的DOM的文件流，并且可能需要自定义CSS（例如body上的padding-top），以防止与其他元素重叠。还要注意.sticky-top使用position:sticky，并没有被所有浏览器支持。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
      <br><br>
        <div>
            <nav class="navbar navbar-light bg-light">
                <div>
                <a href="#">默认</a>
                </div>
            </nav>

            <nav class="navbar fixed-top navbar-light bg-light">
                <div>
                <a href="#">固定到顶部</a>
                </div>
            </nav>

            <nav class="navbar fixed-bottom navbar-light bg-light">
                <div>
                <a href="#">固定到底部</a>
                </div>
            </nav>

            <nav class="navbar sticky-top navbar-light bg-light">
                <div>
                <a href="#">粘贴到顶部</a>
                </div>
            </nav>
            
            <div style="height: 600px;"></div>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

1Bootstrap にナビゲーションツールバーを追加するにはどうすればよいですか? Navbar コンポーネントの使用法に関する簡単な分析

向下拉动滚动条后变化

1Bootstrap にナビゲーションツールバーを追加するにはどうすればよいですか? Navbar コンポーネントの使用法に関する簡単な分析

通过上面的例子我们可以看出

固定到顶部和固定到底部虽然在container内，但是效果上不会受影响，其宽度超出了container限制。
使用了固定到顶部后，默认导航条会自动排在其后。
粘贴到顶部会自动跟在已有可视元素后面
当拖动滚定条后，固定到顶部和固定到底部位置不变，但默认和粘贴到顶部会被拖上去。

6 滚动

添加.navbar-nav-scroll到 .navbar-nav （或其他navbar子组件），以在折叠的navbar的可切换内容内启用垂直滚动。默认情况下，滚动以75vh（或75%的视口高度）启动，但您可以使用本地CSS自定义属性（--bs-navbar-height或自定义风格）覆盖该属性。在较大的视口中，当导航栏展开时，内容将显示为默认导航栏中的内容。

请注意，当设置overflow-y:auto（需要在此处滚动内容）时，这种行为可能会带来溢出的缺点，overflow-x相当于auto，它将裁剪一些水平内容。

以上是手册对此内容的解释，啰嗦了很多，其实很简单，直接看效果图就好了，说白了就是强制在移动状态下点击三道横线出现一个滚动条，俺老刘觉得这纯属多事。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar scroll</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
  <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="#">Link</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
      Link
    </a>
    <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
      <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="#" tabindex="-1" aria-disabled="true">Link</a>
  </li>
</ul>
<form class="d-flex">
  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>

1Bootstrap にナビゲーションツールバーを追加するにはどうすればよいですか? Navbar コンポーネントの使用法に関する簡単な分析

7 响应性行为

导航条可以使用.navbar-toggler，.navbar-collapse和.navbar-expand{-sm|-md|-lg|-xl}决定它们的内容何时会摺叠。结合其他通用类别，您可以选择何时显示或隐藏特定元素。

对于不需要折叠的导航条，在导航条中加入.navbar-expand。对于总是折叠的导航条，不要加任何.navbar-expand class。

8 切换元素

导航条的切换元素（toggler）预设情况下会对齐左边，但如果它们位于同层级的.navbar-brand后面，它们将自动和最右边对齐。反转您的标记将对调切换元素的位置。以下是不同切换元素样式的示例。

8.1 在最小断点没有.navbar-brand：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<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="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
<form class="d-flex">
  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>

1Bootstrap にナビゲーションツールバーを追加するにはどうすればよいですか? Navbar コンポーネントの使用法に関する簡単な分析

8.2 在最小断点左侧有一个品牌名称，右边是切换元素：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<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="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
<form class="d-flex">
  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>

1Bootstrap にナビゲーションツールバーを追加するにはどうすればよいですか? Navbar コンポーネントの使用法に関する簡単な分析

8.3 在最小断点左侧有一个切换元素，右边是品牌名称

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<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="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
<form class="d-flex">
  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>

1Bootstrap にナビゲーションツールバーを追加するにはどうすればよいですか? Navbar コンポーネントの使用法に関する簡単な分析

8.3 外部内容

有时会需要使用折叠插件来触发位于.navbar外的容器内容。因为插件是透过匹配id和data-bs-target来执行的，这将很容易完成！这个很有意思，给个完整代码，自己试试看。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
      <br><br>
        <div>
            <div id="navbarToggleExternalContent">
                <div class="bg-dark p-4">
                <h5 class="text-white h4">Collapsed content</h5>
                <span>Toggleable via the navbar brand.</span>
                </div>
                </div>
                <nav class="navbar navbar-dark bg-dark">
                <div>
                <button type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
                <span></span>
                </button>
                </div>
            </nav>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

今天的课程就到这里，。请关注我，及时学习俺老刘原创的《Bootstrap5零基础到精通》第14节 Bootstrap5滑动导航组件使用。

如果这篇文章对你有帮助，记得随手点赞哦！

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

以上がBootstrap にナビゲーションツールバーを追加するにはどうすればよいですか? Navbar コンポーネントの使用法に関する簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css bootstrap html 子类 auto class dom position overflow padding background flex input

声明：

この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：Bootstrap でナビゲーションコンポーネントとタブコンポーネントを追加するにはどうすればよいですか?使用状況の簡単な分析次の記事：Bootstrap でナビゲーションコンポーネントとタブコンポーネントを追加するにはどうすればよいですか?使用状況の簡単な分析

続きを見る

Bootstrap にナビゲーション ツールバーを追加するにはどうすればよいですか? Navbar コンポーネントの使用法に関する簡単な分析

1 動作原理

2 ナビゲーション バーの構造

2.1 サポートされるサブ要素

2.2 ブランド (navbar-brand)

2.5 文本

3 配色方案

4 容器

5 定位

6 滚动

7 响应性行为

8 切换元素

8.1 在最小断点没有.navbar-brand：

8.2 在最小断点左侧有一个品牌名称，右边是切换元素：

8.3 在最小断点左侧有一个切换元素，右边是品牌名称

8.3 外部内容

関連記事

Bootstrap にナビゲーションツールバーを追加するにはどうすればよいですか? Navbar コンポーネントの使用法に関する簡単な分析

2 ナビゲーションバーの構造