这里使用了navbar类来定义导航栏的基本样式。navbar - expand - lg类表示在大屏幕（lg，例如屏幕宽度大于等于 992px）上展开导航栏。navbar - dark bg - dark用于设置导航栏为深色主题（背景色和文本颜色都是深色相关的样式）。导航栏品牌（Logo / 名称）通过<a class="navbar - brand" href="#">Your Bra...
我们可以使用 .navbar 类来创建一个标准的导航栏,后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开,小屏幕垂直堆叠)。 导航栏上的选项可以使用 <ul> 元素并添加 class="navbar-nav" 类。然后在 <li> 元素上添加 .nav-item 类, <a> 元素上使用 .nav-link 类:实例 ...
活动状态指示:用.active表示当前页面,可直接应用于.nav-link或.nav-item上。 <navclass="navbar navbar-expand-lg navbar-light bg-light"><aclass="navbar-brand"href="#">Navbar</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarNav"aria-controls="navbarNa...
-- 添加文本 --><navclass="navbar navbar-expand-lg bg-light mt-5"><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 mr-auto"><liclass="nav-item">...
<nav>元素:这是 HTML 中的导航元素,用于创建导航条。 class="navbar navbar-expand-lg navbar-light bg-light":这是 Bootstrap 提供的导航条类,定义了导航条的样式和行为。 <a>元素:这是链接元素,用于显示网站的标志。 <button>元素:这是按钮元素,通常用于在小屏幕上切换导航栏的可见性。
请注意,还应该在.nav-link 本身上添加 aria-current属性。 Navbar Home Features Pricing Disabled Copy <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" ...
顶部导航栏 (navbar navbar-expand-lg navbar-light bg-light):创建一个响应式且可折叠的顶部导航栏。 品牌链接 (navbar-brand):通常用来放置网站的标志或标题。 导航链接 (nav-item 和 nav-link):创建导航栏中的链接项。 侧边导航栏 (bg-light 和 list-group):使用 list-group 类创建一个简单的侧边导...
.navbar-nav li { display: block; width: 100%; } </style> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item"> ...
我们可以使用 .navbar 类来创建一个标准的导航栏,后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开,小屏幕垂直堆叠)。 导航栏上的选项可以使用 元素并添加 class="navbar-nav" 类。 然后在 元素上添加 .nav-item 类,元素上使用 .nav-link 类: ...
1<navclass="navbar navbar-expand-lg navbar-light bg-light fixed-top">2<buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarTogglerDemo03"aria-controls="navbarTogglerDemo03"aria-expanded="false"aria-label="Toggle navigation">3<spanclass="navbar-toggler-icon"...