极客教程如何在Bootstrap中显示黑色导航栏
每个网站都会使用导航栏，使其更加方便用户使用，从而使网站的导航变得容易，用户可以直接搜索他们感兴趣的主题。有以下两种方法来显示黑色导航栏。
使用 .navbar-dark和.bg-dark类：Bootstrap的 .navbar-dark类使navbar中的文本白色，.bg-dark类使navbar类的背景颜色黑色。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Geeksforgeeks</a>
<div class="collapse navbar-collapse">
<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="#">Course</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Job Portal</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-light my-2 my-sm-0"
type="submit">
Search
</button>
</form>
</div>
</nav>
</body>
</html>
输出:
输出
使用style属性设置背景色：我们可以使用<nav>标签的style属性来设置navbar的背景色。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<nav
class="navbar navbar-expand-lg navbar-dark"
style="background-color: black"
>
<a class="navbar-brand" href="#">Geeksforgeeks</a>
<div class="collapse navbar-collapse">
<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="#">Course</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Job Portal</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-light my-2 my-sm-0"
type="submit">
Search
</button>
</form>
</div>
</nav>
</body>
</html>
输出:
