基于 Bootstrap 创建响应式导航栏，点击 navbar-toggler 按钮可触发折叠/展开效果。若要实现右侧滑出的全屏导航菜单，需额外 CSS 动画和 JavaScript 交互。
在 Bootstrap 框架中，导航栏（Navbar）是一个非常重要的组件，它通常用于网站的顶部，提供了一个导航菜单，方便用户快速浏览网站的各个页面。导航栏可以是静态的，也可以是响应式的，在不同的屏幕大小下自动调整布局。
在这篇文章中，我们将介绍如何使用 Bootstrap 创建一个响应式导航栏，并实现点击 Navbar-toggler 按钮触发折叠/展开效果。此外，我们还将介绍如何使用额外的 CSS 动画和 JavaScript 交互来实现右侧滑出的全屏导航菜单。
首先，我们需要在 HTML 中引入 Bootstrap 的 CSS 和 JavaScript 文件。你可以从 Bootstrap 的官方网站上下载这些文件，然后将它们放在你的项目目录中。在 HTML 文件的<head>部分，添加以下链接：
html
<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script>
接下来，我们可以创建一个导航栏的 HTML 结构。在 HTML 文件的<body>部分，添加以下代码：
html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">首页 <span class="sr-only">(当前页)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">关于我们</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">服务</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">联系我们</a>
</li>
</ul>
</div>
</nav>
在上面的代码中，我们使用了 Bootstrap 的navbar、navbar-expand-lg、navbar-dark和bg-dark类来创建一个响应式导航栏，并且设置了导航栏的颜色为黑色。navbar-brand类用于创建导航栏的品牌标识，navbar-toggler类用于创建一个折叠/展开按钮，navbar-collapse类用于创建一个可折叠的导航菜单，nav-item类用于创建导航菜单的项，nav-link类用于创建导航菜单的链接。
为了使导航栏在不同的屏幕大小下自动调整布局，我们需要使用一些媒体查询（Media Query）。在 CSS 文件中，添加以下代码：
css
/* 大屏幕（>=992px） */
@media (min-width: 992px) {
.navbar {
padding: 0;
}
.navbar-nav {
flex-direction: row;
}
.nav-item {
margin-right: 20px;
}
}
/* 中屏幕（>=768px） */
@media (min-width: 768px) {
.navbar-toggler {
display: none;
}
.navbar-collapse {
display: flex;
justify-content: space-between;
}
.nav-item {
margin-right: 0;
}
}
/* 小屏幕（<=767px） */
@media (max-width: 767px) {
.navbar {
padding: 10px;
}
.navbar-nav {
flex-direction: column;
}
.nav-item {
margin-right: 0;
text-align: center;
}
}
在上面的代码中，我们使用了媒体查询来根据不同的屏幕大小调整导航栏的布局。在大屏幕（>=992px）下，导航栏的项将水平排列，并且每个项之间有一定的间隔。在中屏幕（>=768px）下，导航栏的折叠/展开按钮将隐藏，导航栏的项将水平排列，并且每个项之间有一定的间隔。在小屏幕（<=767px）下，导航栏的项将垂直排列，并且每个项之间没有间隔。
接下来，我们将实现点击 Navbar-toggler 按钮触发折叠/展开效果。在 JavaScript 文件中，添加以下代码：
javascript
document.querySelector('.navbar-toggler').addEventListener('click', function() {
document.querySelector('#navbarNav').classList