导航栏是网站和应用中最重要的组件之一，用于：
Bootstrap 4 提供了强大的导航栏组件，使用 .navbar 类创建导航栏容器。
<!-- 基本导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">网站名称</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarBasic" aria-controls="navbarBasic" aria-expanded="false" aria-label="切换导航">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarBasic">
<ul class="navbar-nav mr-auto">
<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>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="搜索">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
</form>
</div>
</nav>
Bootstrap 4 提供了多种导航栏颜色方案，包括浅色和深色主题。
<!-- 浅色主题导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">浅色导航栏</a>
<!-- 导航内容 -->
</nav>
<!-- 深色主题导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">深色导航栏</a>
<!-- 导航内容 -->
</nav>
<!-- 主要颜色主题导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">主要颜色导航栏</a>
<!-- 导航内容 -->
</nav>
Bootstrap 4 提供了灵活的导航栏布局选项，包括品牌位置、内容对齐等。
<!-- 品牌居中导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCentered" aria-controls="navbarCentered" aria-expanded="false" aria-label="切换导航">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCentered">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">产品</a>
</li>
</ul>
<a class="navbar-brand mx-auto" href="#">居中品牌</a>
<ul class="navbar-nav ml-auto">
<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>
<!-- 固定内容导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">固定宽度导航栏</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarFixed" aria-controls="navbarFixed" aria-expanded="false" aria-label="切换导航">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarFixed">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">产品</a>
</li>
</ul>
</div>
</div>
</nav>
导航栏可以包含多种类型的内容，包括文本、表单、按钮和下拉菜单等。
<!-- 带下拉菜单的导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">网站名称</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">首页</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
产品
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">产品一</a>
<a class="dropdown-item" href="#">产品二</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">所有产品</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">服务</a>
</li>
</ul>
<span class="navbar-text mr-3">
欢迎，用户！
</span>
<button class="btn btn-outline-success" type="button">登录</button>
</div>
</nav>
<!-- 带表单的导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">网站名称</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarForm" aria-controls="navbarForm" aria-expanded="false" aria-label="切换导航">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarForm">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<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>
<form class="form-inline my-2 my-lg-0">
<div class="input-group">
<input type="text" class="form-control" placeholder="搜索产品..." aria-label="搜索产品">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>
</div>
</nav>
Bootstrap 4 提供了固定导航栏选项，可以将导航栏固定在页面顶部或底部。
<!-- 顶部固定导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand" href="#">顶部固定导航栏</a>
<!-- 导航内容 -->
</nav>
<!-- 底部固定导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-bottom">
<a class="navbar-brand" href="#">底部固定导航栏</a>
<!-- 导航内容 -->
</nav>
Bootstrap 4 的导航栏是响应式的，可以在不同屏幕尺寸下自动调整布局。
<!-- 响应式导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">响应式导航栏</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="切换导航">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<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>
<li class="nav-item">
<a class="nav-link" href="#">关于我们</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">联系我们</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="搜索">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
</form>
</div>
</nav>
通过自定义CSS，您可以创建独特的导航栏样式，以适应您的设计需求。
<!-- 自定义样式导航栏 -->
<style>
.custom-navbar {
background: linear-gradient(135deg, #6f42c1, #e83e8c);
}
.custom-navbar .navbar-brand,
.custom-navbar .navbar-nav .nav-link {
color: white;
}
.custom-navbar .navbar-toggler {
border-color: rgba(255,255,255,0.5);
}
.custom-navbar .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
</style>
<nav class="navbar navbar-expand-lg custom-navbar">
<a class="navbar-brand" href="#">
<i class="fas fa-rocket mr-2"></i>自定义导航栏
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCustom" aria-controls="navbarCustom" aria-expanded="false" aria-label="切换导航">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCustom">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<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>
<li class="nav-item">
<a class="nav-link" href="#">关于我们</a>
</li>
</ul>
</div>
</nav>