Bootstrap에 탐색 도구 모음을 추가하는 방법은 무엇입니까? 다음 기사에서는 Bootstrap5 탐색 도구 모음(Navbar) 구성 요소의 사용법을 소개합니다. 도움이 되기를 바랍니다.
Bootstrap 탐색 도구 모음(Navbar)은 이전 섹션에서 배운 탐색보다 더 강력하고 반응성이 뛰어납니다. 구조에는 접는 플러그인뿐만 아니라 브랜드, 탐색, 양식 등이 포함됩니다. 지원하다. [관련 추천: "부트스트랩 튜토리얼"]
네비게이션 바를 사용하기 전에 다음 사항을 알아야 합니다.
탐색 모음에는 일부 하위 요소에 대한 지원이 내장되어 있습니다. 요구 사항에 따라 다음 옵션 중에서 선택하세요.
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>
정지점 전후에 표시되는 탐색은 그림과 같습니다
아래 그림을 표시하려면 오른쪽의 가로 세 개를 클릭하고, 복원하려면 여기를 클릭하세요
After 위의 예에서는 코드를 직접 작성하려면 구현하는 데 많은 노력이 필요하지만 이제는 간단히 복사하여 붙여넣기만 하면 됩니다. 아래에서는 각 구성 요소의 기능과 사용법을 자세히 소개합니다.
텍스트, 이미지, 이미지, 텍스트 조합을 넣을 수 있습니다. 위 예에서는 로고 이미지를 넣었습니다.
Text
<!-- 可以放链接 --> <nav> <div> <a>Navbar</a> </div> </nav> <!-- 也可以放纯文本标签 --> <nav> <div> <span>Navbar</span> </div> </nav>
위의 예에서는 이미지가 사용되었습니다. 이제 이미지와 텍스트를 혼합해 보겠습니다.
<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>
탐색 연결은 이전에 배운 .nav에 설정되며 다음이 필요합니다. 적절한 반응형 스타일을 설정하기 위해 토글러 클래스를 사용합니다. 탐색 모음의 탐색 요소는 탐색 모음 콘텐츠를 안전하게 정렬하기 위해 가능한 한 많은 수평 공간을 차지합니다.
<!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>
목록을 사용하지 않고 이를 수행하는 깔끔한 방법입니다.
<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>
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>
表单导航条也支持各种按钮。这也大大的提醒了我们可以使用垂直对齐工具来对齐不同大小的元素。
<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>
透过.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>
根据需要与其他元件和通用类别混合使用。
<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>
由于主题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>
更多颜色在通用类>背景颜色中查看,在前面章节表格颜色中也有相关介绍。
虽然不是必需的,但您可以把导航条包装在.container中,将其置中于页面。您可以使用任意响应式容器以更改导航条中内容的显示宽度。这部分内容比较简单,我就不在演示了。
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-md"> <a class="navbar-brand" href="#">Navbar</a> </div> </nav>
使用我们的定位通用类别将导航条放置在非静态位置。选择固定到顶部、固定到底部、或粘贴到顶部(会随着页面滚动,直到物件达到顶部,并停留在原处)。固定的导航条使用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>
向下拉动滚动条后变化
通过上面的例子我们可以看出
添加.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>
导航条可以使用.navbar-toggler,.navbar-collapse和.navbar-expand{-sm|-md|-lg|-xl}决定它们的内容何时会摺叠。结合其他通用类别,您可以选择何时显示或隐藏特定元素。
对于不需要折叠的导航条,在导航条中加入.navbar-expand。对于总是折叠的导航条,不要加任何.navbar-expand class。
导航条的切换元素(toggler)预设情况下会对齐左边,但如果它们位于同层级的.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>
<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>
<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>
有时会需要使用折叠插件来触发位于.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!