使用的5.3版本Bootstrap框架搭建一个响应式导航栏
时间: 2024-02-24 16:00:21 浏览: 24
以下是使用 Bootstrap 5.3 版本搭建一个基本的响应式导航栏的步骤:
1. 在 HTML head 标签中引入 Bootstrap 5.3 的 CSS 文件和 jQuery:
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" integrity="sha384-8hOQpIY4Z1lq1W9uY1UFm5uLWxDjXUv5hFJLl0QbCnYXoV4p6lVhAgg1Ow5FV4c+" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
```
2. 在 HTML body 标签中添加一个 nav 元素,并在其中添加一个 Bootstrap 的导航栏组件:
```html
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
```
3. 在导航栏中添加一个下拉菜单:
```html
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
```
4. 在 HTML body 标签底部引入 Bootstrap 5.3 的 JavaScript 文件:
```html
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-21T8Z7NnK3H5Q3O5Qa0JXZBZ8GvWbpfTt3zfJcU2xJy3x8XqW0e9LmLJjZC2JmGQ" crossorigin="anonymous"></script>
```
通过以上步骤,你就可以搭建一个基本的响应式导航栏了。请注意,你需要在一个支持 Bootstrap 5.3 的网页中测试以上代码。