directory search
Getting started Accessibility(无障碍) Browsers and devices(浏览器和设备) Build tools(构建工具) Contents(内容) Download(下载) JavaScript Theming Bootstrap(主题Bootstrap) Webpack Components: Alerts Alerts(警报) Components: Badges Badges(徽章) Components: Breadcrumb Breadcrumb Components: Button group Button group(按钮组) Components: Buttons Buttons(按钮) Components: Cards Components: Carousel Cards(卡) Carousel(圆盘传送带) Components: Collapse Collapse(折叠) Components: Dropdowns Dropdowns(下拉菜单) Components: Forms Forms(表单) Components: Input group Input group(输入群组) Components: Input group Jumbotron(广告大屏幕) Components: List group List group(列表组) Components: Modal Modal(互动视窗) Components: Navbar Navbar(导航栏) Components: Navs Navs(导航栏) Components: Pagination Pagination(分页) Components: Popovers Popovers(弹出框) Components: Progress Progress(进度条) Components: Scrollspy Scrollspy(滚动监听) Components: Tooltips Tooltips(提示工具) Content Code(代码) Figures(图片区) Images(图片) Reboot(重置) Tables(表格) Typography(排版) Layout Grid(网格) Layout(布局) Media object(多媒体对象) Utilities for layout(排版通用类别) Migration Migrating to v4(迁移到v4) Utilities Borders(边框) Clearfix(清除浮动) Close icon(关闭图标) Colors(颜色) Display property(显示属性) Embeds(内嵌) Flex(弹性) Float(浮动) Image replacement(图像替换) Position(位置) Screenreaders(荧幕阅读器) Sizing(尺寸) Spacing(间隔) Text(文本) Vertical alignment(垂直对齐) Visibility(能见度)
characters

有关如何使用 Bootstrap 包含的导航组件的文档和示例。

基本导航

在Bootstrap中分享一些导航中可用的标记和风格, 从基础的 .nav 类中通过切换修饰符类以在可用和禁用状态之间切换。

基础的.nav 组件是用fiexbox组建的,为组建各种类型的导航组件提供坚实的基础。其包含一些样式的覆盖(用于处理列表),一些link有更大的padding并且禁用了一些基础样式。

基础的.nav 组件不包含任何.active 状态。 下面的例子就使用了这个类, 主要是证明这个特定的类不会触发任何特殊的样式。

举个例子

<ul class="nav">  <li class="nav-item">    <a class="nav-link active" 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="#">Disabled</a>  </li></ul>

类在整个页面中生效,因此你可以非常灵活的使用。像上面使用 <ul>, 或者用你自己的<nav> 标签。因为这个 .nav 标签使用了 display: flex, 导航链接的动过和导航的动作是相同的,只是没有额外标记出而已。

举个例子

<nav class="nav">  <a class="nav-link active" href="#">Active</a>  <a class="nav-link" href="#">Link</a>  <a class="nav-link" href="#">Link</a>  <a class="nav-link disabled" href="#">Disabled</a></nav>

可用样式

通过改变修饰符和组件来改变.nav 的样式。根据需要自行搭配,或者使用自己创建的样式。

水平对齐

通过使用Flexbox来更改导航的水平对齐方式。默认情况下,导航是左对齐的,但您可以很容易地将它们更改为居中或右对齐。

居中 .justify-content-center:

举个荔枝

<ul class="nav justify-content-center">  <li class="nav-item">    <a class="nav-link active" 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="#">Disabled</a>  </li></ul>

优对齐 .justify-content-end:

举个栗子

<ul class="nav justify-content-end">  <li class="nav-item">    <a class="nav-link active" 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="#">Disabled</a>  </li></ul>

垂直对齐

Stack your navigation by changing the flex item direction with the .flex-column utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., .flex-sm-column).

举个梨子

<ul class="nav flex-column">  <li class="nav-item">    <a class="nav-link active" 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="#">Disabled</a>  </li></ul>

当然,不用 <ul>也可以做到。

举个

Previous article: Next article: