©
このドキュメントでは、php中国語ネットマニュアルリリース
有关如何使用 Bootstrap 包含的导航组件的文档和示例。
在Bootstrap中分享一些导航中可用的标记和风格, 从基础的.nav
类中通过切换修饰符类以在可用和禁用状态之间切换。
基础的.nav
组件是用fiexbox组建的,为组建各种类型的导航组件提供坚实的基础。其包含一些样式的覆盖(用于处理列表),一些link有更大的padding并且禁用了一些基础样式。
基础的.nav
组件不包含任何.active
状态。 下面的例子就使用了这个类, 主要是证明这个特定的类不会触发任何特殊的样式。
举个例子
类在整个页面中生效,因此你可以非常灵活的使用。像上面使用
, 或者用你自己的标签。因为这个
.nav
标签使用了display: flex
, 导航链接的动过和导航的动作是相同的,只是没有额外标记出而已。
举个例子
通过改变修饰符和组件来改变.nav
的样式。根据需要自行搭配,或者使用自己创建的样式。
通过使用Flexbox来更改导航的水平对齐方式。默认情况下,导航是左对齐的,但您可以很容易地将它们更改为居中或右对齐。
居中.justify-content-center
:
举个荔枝
优对齐.justify-content-end
:
举个栗子
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
).
举个梨子
当然,不用
也可以做到。