Bootstrap5 导航
Bootstrap5 导航技术文档
概述
Bootstrap是一种流行的前端框架,可以轻松构建适应不同设备的响应式网站。Bootstrap的导航栏是网站的重要组成部分之一。Bootstrap5 导航栏增加了一些新的特性,比如新的样式类,颜色变量以及 JavaScript 事件。
基本结构
Bootstrap5 导航栏包括以下结构:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
navbar
- 导航栏的父容器。navbar-brand
- 网站的logo或品牌名称。navbar-toggler
- 触发导航栏折叠的按钮。navbar-nav
- 导航链接的盒子容器。
紧凑型导航
Bootstrap5 添加了一个“紧凑型”(compact)导航栏选项,当屏幕小于 576 像素时,导航栏将自动使用紧凑型布局。此外,我们还可以通过添加 navbar-expand-sm
类来强制使用紧凑型导航。
<nav class="navbar navbar-expand-sm navbar-light bg-light">
...
</nav>
响应式断点
在Bootstrap5中,之前的4个响应式断点已被替换为以下断点:
sm
- 小屏幕,宽度大于或等于576像素。md
- 中等屏幕,宽度大于或等于768像素。lg
- 大屏幕,宽度大于或等于992像素。xl
- 超大屏幕,宽度大于或等于1200像素。
我们可以通过在class中添加对应的前缀navbar-expand-{sm|md|lg|xl}
来控制导航栏与屏幕的对应。
颜色变量
Bootstrap5 中引入了颜色变量,这意味着您可以轻松地更改导航栏的颜色、背景颜色或悬停颜色。以下是一些可用的颜色变量:
--bs-primary: #0d6efd;
--bs-secondary: #6c757d;
--bs-success: #198754;
--bs-info: #0dcaf0;
--bs-warning: #ffc107;
--bs-danger: #dc3545;
--bs-light: #f8f9fa;
--bs-dark: #212529;
通过定义以下样式,可以更改导航栏的颜色:
.navbar {
background-color: var(--bs-primary);
color: var(--bs-light);
}
.navbar .nav-link {
color: var(--bs-light);
}
.navbar .nav-link:hover {
background-color: var(--bs-light);
color: var(--bs-primary);
}
JavaScript 事件
Bootstrap5提供了一些新的JavaScript事件,用于响应导航栏的不同交互。
隐藏导航栏事件
以下两个事件将在隐藏导航时触发:
hide.bs.dropdown
hidden.bs.dropdown
例如,要在导航栏收起时显示一个警告框:
let dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
let dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
let navbar = document.querySelector('.navbar')
navbar.addEventListener('hide.bs.dropdown', function (event) {
alert('The dropdown will be hidden.')
})
显示导航栏事件
以下两个事件将在显示导航时触发:
show.bs.dropdown
shown.bs.dropdown
例如,要在导航栏展开时进行一些操作:
let dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
let dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
let navbar = document.querySelector('.navbar')
navbar.addEventListener('show.bs.dropdown', function (event) {
console.log('The dropdown will be shown.')
})
总结
Bootstrap5 导航栏是一个十分重要和灵活的组件,可以根据不同需求和设备灵活布局实现响应式和个性化导航交互。Bootstrap5 持续更新和完善,使用新特性和技术也能为您的项目带来更多选择和优势。