Navbars 导航栏 bootstrap react

pencil 26天前 27

一个强大的,反应灵敏的导航标题,导航栏。包括对品牌、导航等的支
概述
下面是您在开始导航栏之前需要了解的内容:
使用展开道具,允许在较低断点处折叠导航栏。
导航栏及其内容默认为流体。使用可选容器限制其水平宽度。
使用间距和flex实用程序来调整和定位内容
响应式导航头,包括支持品牌、导航等。下面是响应光主题导航栏中包含的所有子组件的示例,该子组件在lg(大型)断点处自动折叠
Brand 品牌
一个简单灵活的品牌组件。支持图像,但可能需要自定义样式才能正常工作
Forms 表单
使用<forminline>和Navbar中的各种表单控件。根据需要将内容与实用程序类对
Text and Non-nav links 文本和非导航链接
松散的文本和链接可以包装Navbar.text,以便正确地垂直对齐
Color schemes  配色方案
由于主题类和背景色实用程序的结合,导航栏的主题化从未如此简单。从variant=“light”中选择用于浅背景色,或从variant=“dark”中选择用于深背景色。然后,自定义与bg道具或任何自定义css
Containers 容器
虽然不是必需的,但是您可以将Navbar包装在<Container>组件中以使其在页面上居中,或者在其中添加一个,以仅使固定或静态顶部Navbar的内容居中
Placement 安置
您可以使用引导的位置实用程序将导航栏放置在非静态位置。选择“固定到顶部”、“固定到底部”或“粘贴到顶部”(滚动页面直到页面到达顶部,然后停留在那里)。Fixed navbar使用position:Fixed,这意味着它们是从DOM的正常流中提取的,可能需要定制CSS(例如,在<body>上填充top)以防止与其他元素重叠。另外请注意,sticky top使用position:sticky,这并不是每个浏览器都完全支持的
由于导航栏的这些定位需求非常普遍,我们为它们添加了便利道
Scrolling 滚动
您可以使用<Nav>中的navbarScroll属性在折叠的navbar的可切换内容中启用垂直滚动。有关更多信息,请参阅引导程序文档
Responsive behaviors 反应性行为
使用expand prop以及Navbar.Toggle和Navbar.Collapse组件控制按钮后面的内容何时折叠。
设置defaultExpanded属性以使导航栏开始展开。设置collapseOnSelect可使导航栏在用户选择项目时自动折叠。您还可以通过使用展开和onToggle道具来精细地控制折叠行为。
API
    Navbar
    Navbar.Brand
    Navbar.Toggle
    Navbar.Collapse


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