导航栏
导航栏-Bootstrap 5和Material Design 2.0组件
功能强大的响应式导航标题的文档和示例-MDB导航栏。包括 支持品牌,导航等,包括对我们的合拢插件的支持。
基本例子
导航栏的基本示例,其中包含最常见的元素,例如链接,搜索表单,品牌和 落下。所有这些都在 支持的内容部分.
注意:此示例使用
颜色
(bg-light
)和
间距 ( my-2
,
my-lg-0
, me-sm-0
, my-sm-0
)实用工具类。
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Navbar brand -->
<a class="navbar-brand" href="#">Brand</a>
<!-- Toggle button -->
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left links -->
<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>
<!-- Navbar dropdown -->
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<!-- Dropdown menu -->
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<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"
>Disabled</a
>
</li>
</ul>
<!-- Left links -->
<!-- Search form -->
<form class="d-flex input-group w-auto">
<input
type="search"
class="form-control"
placeholder="Type query"
aria-label="Search"
/>
<button
class="btn btn-outline-primary"
type="button"
data-mdb-ripple-color="dark"
>
Search
</button>
</form>
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</nav>
<!-- Navbar -->
这个怎么运作
在开始使用导航栏之前,您需要了解以下内容:
- 导航栏需要使用环绕式
.navbar
.navbar-expand {-sm | -md | -lg | -xl | -xxl}
用于响应崩溃和 配色方案类。 - 导航栏及其内容默认情况下是流畅的。改变 容器以将其水平宽度限制为不同 方法。
- 使用我们的 spacing 和 flex 实用程序类,用于控制间距 和导航栏中的对齐方式。
- 导航栏默认情况下是响应式的,但是您可以轻松地对其进行修改以进行更改。反应灵敏 行为取决于我们的Collapse JavaScript插件。
-
通过使用
<nav>
元素,或者,如果使用更通用的元素 元素,例如<div>
, 添加一个role="navigation"
对每个 导航栏将其明确标识为辅助技术用户的地标性区域。 - 通过对当前页面使用
aria-current =“ page”
来指示当前项,或者 一组中当前项目的aria-current =“ true”
。
支持内容
Navbars内置了对少数子组件的支持。从以下选择 如所须:
- 您公司,产品或项目名称的
.navbar品牌
。 .navbar-nav
用于全高度和轻量级导航(包括对 下拉菜单)。.navbar-toggler
,用于我们的崩溃插件和其他 导航切换行为。- 用于任何表单控件和动作的Flex和interval实用程序。
.navbar-text
用于添加垂直居中的文本字符串。.collapse.navbar-collapse
用于由父项分组和隐藏导航栏内容 断点。
除了上面列出的内容外,导航栏还支持面包屑,表单,按钮, 图标,标志,化身,徽章等。
牌
.navbar-brand
可以应用于大多数元素,但是锚点效果最好,因为
有些元素可能需要实用程序类或自定义样式。
<!-- As a link -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Navbar</span>
</div>
</nav>
将图像添加到 .navbar-brand
可能总是需要自定义样式或
实用程序以适当大小。以下是一些示例。
<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<img
src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.webp"
height="30"
alt=""
loading="lazy"
/>
</a>
</div>
</nav>
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img
src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.webp"
height="30"
alt=""
loading="lazy"
/>
MDBootstrap
</a>
</div>
</nav>
形式
将各种表单控件和组件放在导航栏中:
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<form class="d-flex input-group w-auto">
<input
type="search"
class="form-control"
placeholder="Type query"
aria-label="Search"
/>
<button
class="btn btn-outline-primary"
type="button"
data-mdb-ripple-color="dark"
>
Search
</button>
</form>
</div>
</nav>
.navbar 的直接子元素使用弹性布局,默认为
justify-content:空格之间
。使用其他
弹性工具根据需要进行调整
行为。
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="d-flex input-group w-auto">
<input
type="search"
class="form-control"
placeholder="Type query"
aria-label="Search"
/>
<button
class="btn btn-outline-primary"
type="button"
data-mdb-ripple-color="dark"
>
Search
</button>
</form>
</div>
</nav>
深色主题的白色形式。
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<form class="d-flex input-group w-auto">
<input
type="search"
class="form-control"
placeholder="Type query"
aria-label="Search"
/>
<button class="btn btn-outline-white" type="button">Search</button>
</form>
</div>
</nav>
文本
导航栏可以在 .navbar-text
的帮助下包含一些文本。这个班
调整文本字符串的垂直对齐方式和水平间距。
<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-mdb-toggle="collapse"
data-mdb-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</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>
落下
您还可以在导航栏导航中使用下拉菜单。下拉菜单需要包装元素
定位,因此请确保使用单独的嵌套元素
.nav-item
和 .nav-link
如下所示。
在我们的网站中了解有关下拉菜单的更多信息 下拉文档.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<ul class="navbar-nav">
<!-- Dropdown -->
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdownMenuLink"
role="button"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
图示
从我们数百种中选择 图标 并简单地将它们添加到导航栏.
注意:我们添加了 .d-flex .flex-row
类以保留图标
导航栏折叠时插入。没有这个,他们将一堆又一堆。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<ul class="navbar-nav d-flex flex-row">
<!-- Icons -->
<li class="nav-item me-3 me-lg-0">
<a class="nav-link" href="#">
<i class="fas fa-shopping-cart"></i>
</a>
</li>
<li class="nav-item me-3 me-lg-0">
<a class="nav-link" href="#">
<i class="fab fa-twitter"></i>
</a>
</li>
<!-- Icon dropdown -->
<li class="nav-item me-3 me-lg-0 dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
<i class="fas fa-user"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<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>
</ul>
</div>
</nav>
徽章
徽章对于演示非常有用 柜台,例如在购物车中。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<ul class="navbar-nav">
<!-- Badge -->
<li class="nav-item">
<a class="nav-link" href="#">
<span class="badge badge-pill bg-danger">1</span>
<span><i class="fas fa-shopping-cart"></i></span>
</a>
</li>
</ul>
</div>
</nav>
通知事项
您可以将图标与下拉列表混合使用,并创建一个通知下拉列表以指示重要新闻
对于游客。添加 .hidden-arrow
类以隐藏下拉箭头。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<ul class="navbar-nav">
<!-- Notification dropdown -->
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle hidden-arrow"
href="#"
id="navbarDropdownMenuLink"
role="button"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
<i class="fas fa-bell"></i>
<span class="badge rounded-pill badge-notification bg-danger">1</span>
</a>
<ul
class="dropdown-menu dropdown-menu-end"
aria-labelledby="navbarDropdownMenuLink"
>
<li><a class="dropdown-item" href="#">Some news</a></li>
<li><a class="dropdown-item" href="#">Another news</a></li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</li>
<!-- Notification dropdown -->
</ul>
</div>
</nav>
标志
结合使用下拉菜单 标志 创建语言切换。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<ul class="navbar-nav">
<!-- Icon dropdown -->
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
<i class="united kingdom flag m-0"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>
<a class="dropdown-item" href="#"
><i class="united kingdom flag"></i>English
<i class="fa fa-check text-success ms-2"></i
></a>
</li>
<li><hr class="dropdown-divider" /></li>
<li>
<a class="dropdown-item" href="#"><i class="poland flag"></i>Polski</a>
</li>
<li>
<a class="dropdown-item" href="#"><i class="china flag"></i>中文</a>
</li>
<li>
<a class="dropdown-item" href="#"><i class="japan flag"></i>日本語</a>
</li>
<li>
<a class="dropdown-item" href="#"><i class="germany flag"></i>Deutsch</a>
</li>
<li>
<a class="dropdown-item" href="#"><i class="france flag"></i>Français</a>
</li>
<li>
<a class="dropdown-item" href="#"><i class="spain flag"></i>Español</a>
</li>
<li>
<a class="dropdown-item" href="#"><i class="russia flag"></i>Русский</a>
</li>
<li>
<a class="dropdown-item" href="#"><i class="portugal flag"></i>Português</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
头像
通过组合简单的图像和下拉菜单,您可以创建具有典型用户选项的头像。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<ul class="navbar-nav">
<!-- Avatar -->
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle d-flex align-items-center"
href="#"
id="navbarDropdownMenuLink"
role="button"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img (31).webp"
class="rounded-circle"
height="22"
alt=""
loading="lazy"
/>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">My profile</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Logout</a></li>
</ul>
</li>
</ul>
</div>
</nav>
内容对齐
要将导航栏内容左右对齐,请使用 me-auto
或
ms-auto
类。用于内容居中使用
flexbox 实用程序。
左对齐
在 .navbar-nav
旁边添加 .me-auto
类,以使内容与
左边。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarLeftAlignExample"
aria-controls="navbarLeftAlignExample"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div class="collapse navbar-collapse" id="navbarLeftAlignExample">
<!-- Left links -->
<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>
<!-- Navbar dropdown -->
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<!-- Dropdown menu -->
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<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"
>Disabled</a
>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</nav>
右对齐
在 .navbar-nav
旁边添加 .ms-auto
类,以使内容与
正确的。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarRightAlignExample"
aria-controls="navbarRightAlignExample"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div class="collapse navbar-collapse" id="navbarRightAlignExample">
<!-- Left links -->
<ul class="navbar-nav ms-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>
<!-- Navbar dropdown -->
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<!-- Dropdown menu -->
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<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"
>Disabled</a
>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</nav>
居中
删除 .ms-auto
或 .me-auto
类并添加
.navbar-collapse
旁边的 .justify-content-center
以将
内容。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarCenteredExample"
aria-controls="navbarCenteredExample"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div
class="collapse navbar-collapse justify-content-center"
id="navbarCenteredExample"
>
<!-- Left links -->
<ul class="navbar-nav 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>
<!-- Navbar dropdown -->
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<!-- Dropdown menu -->
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<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"
>Disabled</a
>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</nav>
色彩
导航主题的主题从未如此简单,这要归功于主题类和
background-color
实用程序。从 .navbar-light
中选择用于
浅色背景色,或 .navbar-dark
深色背景色。然后,
使用 .bg-*
实用程序进行自定义。
另请参阅我们的颜色文档以了解更多信息 关于颜色。
<nav class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-dark bg-primary">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
<!-- Navbar content -->
</nav>
货柜
尽管不是必需的,但您可以将导航栏包装在
.container
使其居中在页面上-尽管请注意,内部容器仍在
需要。或者,您可以在 .navbar
内添加一个容器,以仅将
固定或静态顶部导航栏的内容。
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
</div>
使用任何响应式容器来更改导航栏中内容的宽度 提出了。
<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(例如,&lt; body&gt;
上的 padding-top
)
防止与其他元素重叠。
另请注意
.sticky-top
用途 position: sticky
, 哪一个
并非所有浏览器都完全支持.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Default</a>
</div>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed top</a>
</div>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed bottom</a>
</div>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky top</a>
</div>
</nav>
响应行为
导航栏可以使用 .navbar-toggler
, .navbar-collapse
和
.navbar-expand {-sm | -md | -lg | -xl | -xxl}
类以确定它们何时包含内容
在按钮后面折叠。结合其他实用程序,您可以轻松选择何时
显示或隐藏特定元素。
对于永不崩溃的导航栏,在导航栏上添加 .navbar-expand
类。对于
总是折叠的导航栏,请勿添加任何 .navbar-expand
类。
切换器
导航栏切换器默认情况下是左对齐的,但是它们应跟随同级元素(例如
.navbar-brand
,它们会自动对齐到最右边。倒车
您的标记将反转切换器的位置。以下是不同的示例
切换样式。
在最小的断点处没有显示 .navbar-brand
:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</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-group w-auto">
<input
type="search"
class="form-control"
placeholder="Type query"
aria-label="Search"
/>
<button
class="btn btn-outline-primary"
type="button"
data-mdb-ripple-color="dark"
>
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-mdb-toggle="collapse"
data-mdb-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</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-group w-auto">
<input
type="search"
class="form-control"
placeholder="Type query"
aria-label="Search"
/>
<button
class="btn btn-outline-primary"
type="button"
data-mdb-ripple-color="dark"
>
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-mdb-toggle="collapse"
data-mdb-target="#navbarTogglerDemo03"
aria-controls="navbarTogglerDemo03"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</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-group w-auto">
<input
type="search"
class="form-control"
placeholder="Type query"
aria-label="Search"
/>
<button
class="btn btn-outline-primary"
type="button"
data-mdb-ripple-color="dark"
>
Search
</button>
</form>
</div>
</div>
</nav>
外部内容
有时您想使用折叠插件触发内容的容器元素
在结构上位于
.navbar
。因为我们的插件适用于 id
和
data-mdb-target
匹配,这很容易做到!
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarToggleExternalContent"
aria-controls="navbarToggleExternalContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
</div>
</nav>
进阶范例
导航栏用法的高级示例。
Facebook风格
Facebook导航栏用法的一个典型示例-3列带有图标和与众不同的列 通知以及左侧的搜索字段。
<!-- Navbar-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid justify-content-between">
<!-- Left elements -->
<div class="d-flex">
<!-- Brand -->
<a class="navbar-brand me-2 mb-1 d-flex align-items-center" href="#">
<img
src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.webp"
height="20"
alt=""
loading="lazy"
style="margin-top: 2px;"
/>
</a>
<!-- Search form -->
<form class="input-group w-auto my-auto d-none d-sm-flex">
<input
autocomplete="off"
type="search"
class="form-control rounded"
placeholder="Search"
style="min-width: 125px;"
/>
<span class="input-group-text border-0 d-none d-lg-flex"
><i class="fas fa-search"></i
></span>
</form>
</div>
<!-- Left elements -->
<!-- Center elements -->
<ul class="navbar-nav flex-row d-none d-md-flex">
<li class="nav-item me-3 me-lg-1 active">
<a class="nav-link" href="#">
<span><i class="fas fa-home fa-lg"></i></span>
<span class="badge rounded-pill badge-notification bg-danger">1</span>
</a>
</li>
<li class="nav-item me-3 me-lg-1">
<a class="nav-link" href="#">
<span><i class="fas fa-flag fa-lg"></i></span>
</a>
</li>
<li class="nav-item me-3 me-lg-1">
<a class="nav-link" href="#">
<span><i class="fas fa-video fa-lg"></i></span>
</a>
</li>
<li class="nav-item me-3 me-lg-1">
<a class="nav-link" href="#">
<span><i class="fas fa-shopping-bag fa-lg"></i></span>
</a>
</li>
<li class="nav-item me-3 me-lg-1">
<a class="nav-link" href="#">
<span><i class="fas fa-users fa-lg"></i></span>
<span class="badge rounded-pill badge-notification bg-danger">2</span>
</a>
</li>
</ul>
<!-- Center elements -->
<!-- Right elements -->
<ul class="navbar-nav flex-row">
<li class="nav-item me-3 me-lg-1">
<a class="nav-link d-sm-flex align-items-sm-center" href="#">
<img
src="https://mdbootstrap.com/img/new/avatars/1.webp"
class="rounded-circle"
height="22"
alt=""
loading="lazy"
/>
<strong class="d-none d-sm-block ms-1">John</strong>
</a>
</li>
<li class="nav-item me-3 me-lg-1">
<a class="nav-link" href="#">
<span><i class="fas fa-plus-circle fa-lg"></i></span>
</a>
</li>
<li class="nav-item dropdown me-3 me-lg-1">
<a
class="nav-link dropdown-toggle hidden-arrow"
href="#"
id="navbarDropdownMenuLink"
role="button"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
<i class="fas fa-comments fa-lg"></i>
<span class="badge rounded-pill badge-notification bg-danger">6</span>
</a>
<ul
class="dropdown-menu dropdown-menu-end"
aria-labelledby="navbarDropdownMenuLink"
>
<li><a class="dropdown-item" href="#">Some news</a></li>
<li><a class="dropdown-item" href="#">Another news</a></li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</li>
<li class="nav-item dropdown me-3 me-lg-1">
<a
class="nav-link dropdown-toggle hidden-arrow"
href="#"
id="navbarDropdownMenuLink"
role="button"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
<i class="fas fa-bell fa-lg"></i>
<span class="badge rounded-pill badge-notification bg-danger">12</span>
</a>
<ul
class="dropdown-menu dropdown-menu-end"
aria-labelledby="navbarDropdownMenuLink"
>
<li><a class="dropdown-item" href="#">Some news</a></li>
<li><a class="dropdown-item" href="#">Another news</a></li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</li>
<li class="nav-item dropdown me-3 me-lg-1">
<a
class="nav-link dropdown-toggle hidden-arrow"
href="#"
id="navbarDropdownMenuLink"
role="button"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
<i class="fas fa-chevron-circle-down fa-lg"></i>
</a>
<ul
class="dropdown-menu dropdown-menu-end"
aria-labelledby="navbarDropdownMenuLink"
>
<li><a class="dropdown-item" href="#">Some news</a></li>
<li><a class="dropdown-item" href="#">Another news</a></li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</li>
</ul>
<!-- Right elements -->
</div>
</nav>
<!-- Navbar -->