--小屏幕上水平导航栏会切换为垂直的--><navclass="navbar navbar-expand-sm bg-light"><!--Links--><ulclass="navbar-nav"><liclass="nav-item"><aclass="nav-link"href="#">Link 1</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link 2</a></li><liclass="nav-item"...
导航栏需要使用.navbar来定义,并使用.navbar-expand{-sm|-md|-lg|-xl}用于响应式布局以及使用配色方案Class 。 导航栏默认内容是流式的,使用containers容喇来限制它们的水平宽度。 使用我们提供的间隙间距和flex布局 classes 来定义导航栏中元素的间距和对齐。
除了前面提到的navbar - expand - lg，还有navbar - expand - md（在中等屏幕上展开，屏幕宽度大于等于 768px）、navbar - expand - sm（在小屏幕上展开，屏幕宽度大于等于 576px）和navbar - expand - xl（在超大屏幕上展开，屏幕宽度大于等于 1200px）等类。这些类可以根据不同的屏幕尺寸需求来调整导航栏...
<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">入...
我们可以使用 .navbar 类来创建一个标准的导航栏,后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开,小屏幕垂直堆叠)。 导航栏上的选项可以使用 元素并添加 class="navbar-nav" 类。 然后在 元素上添加 .nav-item 类,元素上使用 .nav-link 类: ...
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand h1" href="#">Logo</a> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item" style="margin-top: 10px"> <a class="nav-link h5" href="#">Link 1</a> </li>...
导航栏的表单 <form> 元素使用 class="form-inline" 类来排版 输入框与按钮: <nav class="navbar navbar-expand-sm bg-dark navbardark"> <form class="form-inline"> <input class="form-control" type="text" placeholder="Search"> <button class="btn btnsuccess" type="submit">Search</button> ...
</nav> ```在这个示例中，`<nav>`元素被赋予了`navbar`、`navbar-expand-lg`、`navbar-light`和`bg-light`类，以创建一个响应式的、轻量级的、背景色为浅色的导航栏。导航栏包含了一个品牌标识（`navbar-brand`）、一个折叠按钮（`navbar-toggler`）和一个包含导航链接的列表（`navbar-nav`）。当屏幕...
navbar-expand-sm bg-light ul:navbar-nav li:nav-item 表单 form-group label for email input class form-control 按钮组 btn-group 按钮组 btn-group-lg|sm|xs 控制按钮组大小 btn-group-vertical 垂直按钮组 弹性布局 d-flex 弹性伸缩盒显示
Here’s what you need to know before getting started with the navbar: Navbars require a wrapping.navbarwith.navbar-expand{-sm|-md|-lg|-xl}for responsive collapsing andcolor schemeclasses. Navbars and their contents are fluid by default. Useoptional containersto limit their horizontal width...