Base Nav 基础导航 bootstrap react

pencil 26天前 25

引导中的导航位都共享一个通用的导航组件和样式。交换变体以在每个样式之间切换。基本的Nav组件是用FrasBox构建的,并为构建所有类型的导航组件提供了坚实的基础。
<Nav>标记非常灵活,样式是通过类控制的,因此您可以使用任何您喜欢的元素来构建您的Nav。默认情况下,<Nav>和<Nav.Item>都渲染<div>s,而不是分别渲染<ul>和<li>元素。这是因为可以(而且很常见)去掉<Nav.Item>,直接呈现<Nav.Link>,这将在默认情况下创建无效的标记(ul>a)。
当a<ul>合适时,可以通过as prop渲染一个;一定要把你的物品也设置成<li>
对齐和定向
您可以通过使用flexbox布局实用程序类来控制导航的方向和方向。默认情况下,导航是左对齐的,但很容易更改为中心对齐或右对齐。
Vertical 垂直
通过使用.flex column类或您自己的css更改flex项的方向来创建堆叠的导航。您甚至可以使用响应版本在某些视口中进行堆栈,但在其他视口中(例如,flex sm column)则不行。
Tabs 标签
直观地将导航项目表示为“选项卡”。这种样式与我们的选项卡组件创建的选项卡区域非常匹配。
注意:引导程序的默认样式表不支持使用标签样式创建垂直导航(.flex column)。
Pills 药丸
另一种视觉变体。
Fill and justify 填充并对齐

强制导航的内容扩展全部可用宽度。要按比例填充空间,请使用fill。请注意,nav是整个宽度,但每个nav项的大小不同。
Using dropdowns 使用下拉列表
您可以将下拉列表组件与NavLink和NavItem组件混合并匹配,以创建一个在Nav组件中发挥良好作用的下拉列表


API
    Nav
    Nav.Item
    Nav.Link
    NavDropdown

最新回复 (0)
返回
发新帖