Bootstrap 4参考手册
组件·导航 | Navs
导航栏 | Navs
有关如何使用 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>
也可以做到。
组件·导航 | Navs相关
Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出原型或者构建整个 app 。
主页 | https://getbootstrap.com/ |
源码 | https://github.com/twbs/bootstrap |
版本 | 4 |
发布版本 | 4.0.0-beta.2 |