导航/滑动门
有关如何使用引导程序附带的导航组件的文档和示例。更新于: 2023-04-30 14:28:21 查看: 427
发布于: 2021-9-4 11:24 发布者: 大米
基本导航
引导中可用的导航共享常规标记和样式,从基本 .nav 到活动和禁用状态。交换修饰符类以在每个样式之间切换。
基本.nav
组件是用FrasBox构建的,为构建所有类型的导航组件提供了坚实的基础。它包括一些样式覆盖(用于处理列表)、一些链接填充(用于较大的命中区域)和基本的禁用样式。
基本的 .nav
组件不包含任何 .active
状态。 以下示例包括该类,主要是为了证明该特定类不会触发任何特殊样式。
要将活动状态传达给辅助技术,请使用 aria-current
属性-对当前页面使用 page
值,对于集合中的当前项目使用 true
。
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</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>
整个过程都使用了类,因此您的标记可以超级灵活。 如上使用 <ul>
,如果项的顺序很重要,则使用 <ol>
,或者使用
<nav>
元素滚动显示。 由于 .nav
使用 display: flex
,因此导航链接的行为与导航项相同,但没有额外的标记。
<nav class="nav">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
混搭样式
使用修饰符和实用程序更改.nav
组件的样式。 根据需要混合和匹配,或构建自己的。
水平对齐
使用 flexbox实用工具 更改导航的水平对齐方式。 默认情况下,导航是左对齐的,但是您可以轻松地将它们更改为居中或右对齐。
居中使用.justify-content-center
:
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</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>
向右对齐使用 .justify-content-end
:
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</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>
垂直导航
通过使用
.flex-column
实用工具更改弹性项目的方向来堆叠导航。 是否需要将它们堆叠在某些视口上,而不是其他视口上? 使用响应式版本(例如.flex-sm-column
)。
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</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>
与往常一样,垂直导航也可以不使用 <ul>
。
<nav class="nav flex-column">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
导航标签
从上面获取基本导航,并添加
.nav-tabs
类以生成选项卡式界面。 使用它们通过我们的JavaScript标签插件创建可标签区域。
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</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>
圆角导航
使用相同的HTML,但改用 .nav-pills
:
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</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>
水平伸缩
强制 .nav
的内容扩展两个修饰符类之一的全部可用宽度。 要用 .nav-item
按比例填充所有可用空间,请使用 .nav-fill
。 请注意,所有水平空间都被占用,但并非每个导航项都具有相同的宽度。
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Much longer nav link</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>
使用基于 <nav>
的导航时,可以安全地省略 .nav-item
,因为样式 <a> 元素仅需要 .nav-link
。
<nav class="nav nav-pills nav-fill">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
对于等宽元素,请使用 .nav-justified
。 导航链接将占据所有水平空间,但是与上面的 .nav-fill
不同,每个导航项都将具有相同的宽度。
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Much longer nav link</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>
类似于使用基于 .nav-fill
的导航的 <nav> 示例。
<nav class="nav nav-pills nav-justified">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
使用flex工具
如果您需要响应式导航变量,请考虑使用一系列的flexbox实用程序。 这些工具虽然较为冗长,但可以跨响应断点提供更大的自定义。 在下面的示例中,我们的导航将堆叠在最低的断点处,然后适应从小断点开始填充可用宽度的水平布局。
<nav class="nav nav-pills flex-column flex-sm-row">
<a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
<a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
使用下拉菜单
添加带有一些额外HTML的下拉菜单和下拉JavaScript插件。
带有下拉菜单的导航
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<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>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</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>
带有下拉菜单的圆状导航
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<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>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</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>
《待续》