집 > 기사 > 웹 프론트엔드 > Bootstrap에 탐색 도구 모음을 추가하는 방법은 무엇입니까? Navbar 컴포넌트 사용법에 대한 간략한 분석

Bootstrap에 탐색 도구 모음을 추가하는 방법은 무엇입니까? Navbar 컴포넌트 사용법에 대한 간략한 분석

青灯夜游앞으로: 2021-11-24 19:35:595971검색

Bootstrap에 탐색 도구 모음을 추가하는 방법은 무엇입니까? 다음 기사에서는 Bootstrap5 탐색 도구 모음(Navbar) 구성 요소의 사용법을 소개합니다. 도움이 되기를 바랍니다.

1 작동 원리

Bootstrap 탐색 도구 모음(Navbar)은 이전 섹션에서 배운 탐색보다 더 강력하고 반응성이 뛰어납니다. 구조에는 접는 플러그인뿐만 아니라 브랜드, 탐색, 양식 등이 포함됩니다. 지원하다. [관련 추천: "부트스트랩 튜토리얼"]

네비게이션 바를 사용하기 전에 다음 사항을 알아야 합니다.

네비게이션 바는 .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 콘텐츠를 스크롤하려면 선택 사항인 .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 컴포넌트 사용법에 대한 간략한 분석

아래 그림을 표시하려면 오른쪽의 가로 세 개를 클릭하고, 복원하려면 여기를 클릭하세요

Bootstrap에 탐색 도구 모음을 추가하는 방법은 무엇입니까? Navbar 컴포넌트 사용법에 대한 간략한 분석

After 위의 예에서는 코드를 직접 작성하려면 구현하는 데 많은 노력이 필요하지만 이제는 간단히 복사하여 붙여넣기만 하면 됩니다. 아래에서는 각 구성 요소의 기능과 사용법을 자세히 소개합니다.

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 Navigation

탐색 연결은 이전에 배운 .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>

둘은 동일한 효과를 가집니다

탐색 모음의 탐색 요소에서 드롭다운 메뉴를 사용할 수도 있습니다. 드롭다운 메뉴에는 위치 지정을 위한 래퍼 요소가 필요합니다. 아래와 같이 .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 Forms

13.2.1의 검색 양식과 같이 탐색 모음에 다양한 양식과 구성 요소를 배치할 수 있습니다. 탐색 모음의 직접 하위 요소는 플렉스 레이아웃을 사용하며 기본값은 justify-content입니다. : 공백 사이, 즉 양쪽 끝을 정렬합니다. 이 동작을 조정하려면 필요에 따라 다른 단일 별 상자 클래스를 사용하십시오.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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

성명：

이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：Bootstrap에 탐색 구성 요소와 탭 구성 요소를 추가하는 방법은 무엇입니까? 사용법에 대한 간략한 분석다음 기사：Bootstrap에 탐색 구성 요소와 탭 구성 요소를 추가하는 방법은 무엇입니까? 사용법에 대한 간략한 분석