©
本文档使用 PHP中文网手册 发布
有关如何使用 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>
也可以做到。