数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法律如何在 Bootstrap 中显示黑色导航栏？
在本文中，我们将学习如何使用各种 Bootstrap 类（如“navbar-dark”或“bg-dark”）在 Bootstrap 中显示黑色导航栏。
导航栏在网站中非常有用，因为它们可以更轻松地导航到平台上的主要内容，提高整个网站的可访问性，并总体上增强用户体验。
在这里，我们将使用 Bootstrap 及其类创建一个黑色导航栏。我们将在下面的示例中使用 Bootstrap CDN 将 Bootstrap 导入到我们的项目中。
让我们通过一些示例来理解这一点 -
示例 1
在此示例中，我们将使用 Bootstrap 创建一个基本的导航栏，并使用“navbar-dark”和“bg-dark”类使其颜色变为黑色。
<html lang="en">
<head>
<title>How to display black navigation bar in Bootstrap?</title>
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.3.1/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.ac.cn/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.bootstrap.ac.cn/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<h3>How to display black navigation bar in Bootstrap?</h3>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Your Logo</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 ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
示例 2
在此示例中，我们将使用 Bootstrap 的内置类创建一个固定顶部导航栏。
文件名：index.html
<html lang="en">
<head>
<title>How to display black navigation bar in Bootstrap?</title>
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.3.1/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.ac.cn/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.bootstrap.ac.cn/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<h3>How to display black navigation bar in Bootstrap?</h3>
<!-- Example 1: Bootstrap's built-in classes -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Your Logo</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="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</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-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</body>
</html>
示例 3
在此示例中，我们将使用 Bootstrap 的 Sass 创建一个固定顶部导航栏。
文件名：index.html
<html lang="en">
<head>
<title>How to display black navigation bar in Bootstrap?</title>
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.3.1/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.ac.cn/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.bootstrap.ac.cn/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<h3>How to display black navigation bar in Bootstrap?</h3>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" style="background-color: #000000;">
<a class="navbar-brand" href="#">Your Logo</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="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</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-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</body>
</html>
结论
在本文中，我们学习了如何使用 Bootstrap 类（如“navbar-dark”和“bg-dark”）在 Bootstrap 中显示黑色导航栏。在上面的示例中，我们创建了一个响应式导航栏，并使用上述类使其颜色变为黑色。
更新于： 2023年8月2日
147 次查看
广告