<navclass="navbar navbar-expand-md bg-dark navbar-dark"><!--Brand--><aclass="navbar-brand"href="#">Navbar</a><!--Toggler/collapsibe Button--><buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#collapsibleNavbar"><spanclass="navbar-toggler-icon">...
navbar-light:亮色背景的导航栏。 navbar-dark:深色背景的导航栏。 bg-primary、bg-secondary:不同颜色的背景导航栏。 navbar-expand-lg、navbar-expand-md:根据屏幕尺寸展开或折叠导航栏。 示例代码: 代码语言:javascript 复制 <navclass="navbar navbar-dark bg-primary"><!--导航栏内容--></nav> 这些样...
导航栏需要使用.navbar来定义,并使用.navbar-expand{-sm|-md|-lg|-xl}用于响应式布局以及使用配色方案Class 。 导航栏默认内容是流式的,使用containers容喇来限制它们的水平宽度。 使用我们提供的间隙间距和flex布局 classes 来定义导航栏中元素的间距和对齐。
<navclass="navbar navbar-expand-md bg-light"><ahref="#"class="navbar-brand"><imgsrc="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg"alt=""width="30"class="align-top">Bootstrap</a><ulclass="navbar-nav"><liclass="nav-item"><ahref="#"class="nav-link">入...
<nav class="navbar navbar - expand - lg navbar - light bg - light"> <!-- 导航栏内容 --> </nav> navbar - dark则相反，适用于深色背景的导航栏，会设置文本颜色为浅色。导航栏的大小调整类 除了前面提到的navbar - expand - lg，还有navbar - expand - md（在中等屏幕上展开，屏幕宽度大于...
.navbar-expand-*:这个类可以用于<nav>元素,它指定了在不同的屏幕尺寸下导航栏是否应该展开。*的取值可以是sm、md、lg或xl,分别代表小屏、中屏、大屏或超大屏。 .navbar-toggler:这个类用于<button>元素,当点击这个按钮时,导航栏会展开或折叠。通常用于移动设备的小屏幕上。
导航栏需要以 .navbar-expand{-sm|-md|-lg|-xl|-xxl} 来包装 .navbar, 以便响应折叠和配色方案 类。 默认情况下,导航栏及其内容是流动的。更改容器以不同方式限制其水平宽度。 使用我们的spacing 和flex实用程序类来控制导航栏中的间距和对齐方式。 默认情况下,导航栏是有响应的,但是您可以轻松地修改它们来...
我们可以使用 .navbar 类来创建一个标准的导航栏,后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开,小屏幕垂直堆叠)。 导航栏上的选项可以使用 元素并添加 class="navbar-nav" 类。 然后在 元素上添加 .nav-item 类,元素上使用 .nav-link 类: ...
导航条需要使用.navbar包装,并透过.navbar-expand{-sm|-md|-lg|-xl}给予响应式的折叠以及使用color scheme class。 导航条预设的内容宽度是浮动的,更改containers以不同的方式来限制水平宽度。 使用间距及弹性盒子通用类来控制物件在导航条的间隔及对齐。
可在导航条里加文本,通过设置.navbar-text属性使文本样式与导航条样式更统一 可用.active或.disabled属性设置菜单选项的激活与禁用状态 练习: <!--<navclass="navbar navbar-expand-md navbar-dark bg-dark"><spanclass="navbar-brand">LOGO</span><buttonclass="navbar-toggler"data-toggle="collapse"data-...