导航栏(navbar)
导航栏是一个将商标、导航以及别的元素简单放置到一个简洁导航页头的容器代码组合,它很容易扩展,而且在折叠板插件的帮助下,它可以轻松与其它内容整合。
运行原理
这些是你开始使用导航条之前需要知道的东西:
- 导航栏需要使用
.navbar
来定义,并使用.navbar-expand{-sm|-md|-lg|-xl}
用于响应式布局以及使用配色方案Class 。 - 导航栏默认内容是流式的,使用 containers容喇来限制它们的水平宽度。
- 使用我们提供的 间隙间距 和 flex 布局 classes 来定义导航栏中元素的间距和对齐。
- Navbars导航栏默认支持响应式,在修改上也很容易,你可以使用轻松的来定义它们-这取决于我们提供的 JavaScript 插件。
- 打印时,导航栏默认隐藏。如果需要打印显示,可以加入
.d-print
样式到.navbar
中,点此参阅 display块元素 通用 class定义。 - 使用
<nav>
导航通用元素来确保可访问性(易用性),或者如果使用更通用的元素,例如<div>
添加一个role="navigation"
,可以为使用者的辅助浏览提供明确标识。
此组件的动画效果取决于prefers-reduced-motion
媒体查询. 请参阅我们的 辅助功能文档的简化动作部分.
继续阅读以获取支持的子组件的示例和列表。
支持的内容
Navbar导航栏内置支持少量子组件。根据需要从以下选择::
.navbar-brand
为您的公司,产品或项目名称。.navbar-nav
提供完整的高和轻便的导航(包括对下拉菜单的支持)。.navbar-toggler
用於我們的折疊插件和其他 navigation toggling 行為。.form-inline
用于任何表单控件和操作。.navbar-text
用于添加垂直居中的文本字符串。.collapse.navbar-collapse
用于通过父断点进行分组和隐藏导航列内容。
以下是一个自动在 lg
(大)断点处的自动响应轻型导航栏中包含的所有子组件的示例。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
This example uses color (bg-light
) and spacing (my-2
, my-lg-0
, mr-sm-0
, my-sm-0
) utility classes.
品牌
.navbar-brand
可以用于大多数元素,但对于链接最有效,因为某些元素可能需要通用样式类别class或自定义样式。
<!-- As a link -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
<span class="navbar-brand mb-0 h1">Navbar</span>
</nav>
如果你喜欢,可以完全不使用列表法来做导航。
<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
</a>
</nav>
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
</nav>
nav导航
导航栏链接建立在我们的.nav
上,享有使用专属的class样式,并可以使用toggler切换触发器来进行响应式切换,在导航栏中的元件,也装饰占用更多的水平空间,以保持导览列内容安全对齐。
活动状态指示:用 .active
表示当前页面,可直接应用于.nav-link
或 .nav-item
上。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
如果你喜欢(或有需要),也可以不使用ul、ol式的列(直接用A其它元素作为列表子项-译者注)。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
您还可以在导航栏中使用下拉列表,下拉菜单最好使用一个菜单进行位置定位包裹,请确保使用单独的元素嵌套.nav-item
和 .nav-link
,如下所示。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
Form表单
在导航栏中使用 .form-inline
放置各种表单控制元件和组件。
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
根据需要将内联表单引用系统提供的内容与对齐等class样式。
<nav class="navbar navbar-light bg-light justify-content-between">
<a class="navbar-brand">Navbar</a>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
还可以引用input-group
输入框组控件:
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
</form>
</nav>
有的导航中需要用到各种按钮,可以使用通用样式Class来作居中对齐处理。
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<button class="btn btn-outline-success" type="button">Main button</button>
<button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
</form>
</nav>
Text文本处理
可以使用.navbar-text
选择器来包裹文字-这已经对文本字符串的垂直对齐、水平间距作了处理优化。
<nav class="navbar navbar-light bg-light">
<span class="navbar-text">
Navbar text with an inline element
</span>
</nav>
根据需要与其它元件或通用样式定义组合使用。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</nav>
Color颜色选择器(配色方案)
基于主题类class和background-color
通用样式class定义,导航栏的配色方案和主题选择从未如此简单!你可以选择.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
主内容-容器
你可以把导航条包裹在一个 .container
容器中,从而使之在网页中呈现居中效果(或在导航栏内部居中)—虽然这不是强制的。
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
</div>
When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified .navbar-expand{-sm|-md|-lg|-xl}
class. This ensures we’re not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
定位
使用系统提供的position位置间距定位通用样式可以使导航栏呈现出随浏览器滚动的效果(非固定位置),可选的流动可以包括固定在顶部、固定在底部、或粘到顶部(与页面滚动,直到顶部并停留到那里)。固定导航栏可以使用position: fixed
属性,这意味着它们从DOM的正常流动和拉动可能需要自定义的CSS(如在 <body>
上定义padding-top
),以防止其重叠覆盖了其它元素。
注意:在.sticky-top
使用 position: sticky
, 目前不支持所有常用浏览器。
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">默认</a>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">固定在顶部</a>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
<a class="navbar-brand" href="#">固定在底部</a>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
<a class="navbar-brand" href="#">呈现粘性(随屏滚动)于浏览器窗口顶部</a>
</nav>
响应式行为处理
当内容在按钮后面折叠时,导航栏可以使用 .navbar-toggler
、.navbar-collapse
和 .navbar-expand{-sm|-md|-lg|-xl}
的 class样式来更改,结合其它常用样式,你可以根据需要定义显示或隐藏特定元素。
對於不需要折疊的導覽列,在導覽列中加入 .navbar-expand。對於總是折疊的導覽列,不要加任何 .navbar-expand class。 对于永不崩溃.navbar-expand的导航栏,请在导航栏上添加该类。对于总是崩溃的导航栏,不要添加任何.navbar-expand类。 对于不需要折叠(隐藏)的导航栏,请在导航栏上增加.navbar-expand
class样式来定义,对于总是要折叠(隐藏)的导航栏,请不要加任何的 .navbar-expand
class样式。
Toggler 切换触发器
Navbar下的Toggler是切换触发器(即手机模式下的MENU下拉项),它们默认是左对齐的。如果在它们中间定义一个同级的兄弟元素.navbar-brand
,它们会自动对齐到窗口右边,反转你的品牌(LOGO或主标题)元素的位置,以下是不同切换形式(位置)的示例(需要在移动窄屏下才能看到效果):
没有在最下最小浏览界面中定义 .navbar-brand
的样式(MENU切换按钮在默认左边):
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
左侧有一个LOGO(主标题),右边是MENU切换按钮:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
右侧有一个LOGO(主标题),左边是MENU切换按钮:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
扩展导航区内容
使用id
和 data-target
搭配,很容易达成:
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h4 class="text-white">Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>