Bootstrap4 导航栏学习笔记
Bootstrap 是一款流行的前端框架,具有响应式设计、移动设备优先等特点。Bootstrap 提供了大量组件和工具,可用于构建现代 Web 应用程序。其中,导航栏是常用的组件之一。
导航栏基础
简单导航栏
使用 Bootstrap 创建简单导航栏只需几个步骤:
- 在 HTML 文件中引入 Bootstrap CDN(或下载本地文件)。
- 创建一个
nav
元素,添加navbar
和navbar-expand-lg
类。 - 在
nav
元素中添加一个div
元素,添加container
类。 - 在
div
元素中添加一个a
元素,作为网站的标志。 - 在
div
元素中添加一个button
元素,添加navbar-toggler
类和data-toggle="collapse"
属性,以便在小屏幕上切换导航栏的显示/隐藏。 - 在
div
元素中添加一个div
元素,添加collapse navbar-collapse
类,作为导航链接的容器。 - 在
div
元素中添加一个ul
元素,添加navbar-nav
类,作为导航链接的列表。 - 在
ul
元素中添加li
元素,每个元素都包含一个a
元素。
示例代码:
htmlCopy Code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Navigation Bar</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">My Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
<a class="nav-link" 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>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>
导航栏颜色
Bootstrap 提供了多种导航栏颜色,可以使用 .bg-*
类进行设置。例如:.bg-primary
表示导航栏的背景色为蓝色。
示例代码:
htmlCopy Code<nav class="navbar navbar-expand-lg navbar-light bg-primary">
<!-- 导航栏内容 -->
</nav>
固定导航栏
Bootstrap 还提供了固定导航栏的选项,可以使用 .fixed-top
或 .fixed-bottom
类来设置。
示例代码:
htmlCopy Code<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<!-- 导航栏内容 -->
</nav>
导航栏高级
带下拉菜单的导航栏
在导航栏中添加下拉菜单,可以使用 Bootstrap 的 .dropdown
类和 jQuery 插件。
示例代码:
htmlCopy Code<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">My Website</a>
<!-- 切换按钮 -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Categories</a>
<!-- 下拉菜单 -->
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Category 1</a>
<a class="dropdown-item" href="#">Category 2</a>
<a class="dropdown-item" href="#">Category 3</a>
</div>
</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>
带表单的导航栏
在导航栏中添加搜索表单,可以使用 Bootstrap 的 .form-inline
类。
示例代码:
htmlCopy Code<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">My Website</a>
<!-- 切换按钮 -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
</ul>
<!-- 搜索表单 -->
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
总结
在本文中,我们学习了 Bootstrap4 导航栏的基础和高级用法。通过示例代码,可以快速掌握导航栏的创建和使用。