请有人解释为什么我的 Bootstrap 不适用?
Please could somebody explain why my Bootstrap doesn't apply?
我正在尝试使用 Bootstrap 构建我的第一个网页,但我添加的 Bootstrap 代码似乎只有一半响应(例如,导航栏似乎知道它已经提供了某种 Bootstrap class,但其他 classes(例如 navbar-dark 什么都不做)。我也不得不自己从我的 ul 中删除要点,即使我正在学习的教程没有。
我觉得我的问题好像是 Bootstrap 如何链接到我的 HTML 文件,但仍然很困惑。
先感谢您。这是我的代码...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>White Rose Crew Company Website</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="./recources/css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#aboutUs">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ourWork">OUR WORK</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#theCrew">THE CREW</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contactUs">CONTACT US</a>
</li>
</ul>
</nav>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</main>
</body>
</html>
对于bootstrap 3.4.1 你需要使用
https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css
对于bootstrap 4 你需要使用
https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css
你写的是 bootstrap 4 语法,但是 link 到 bootstrap 3
对于 bootstrap 5(最新测试版)您需要使用
https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css
要应用 bootstrap 无论您想应用哪个版本,请从任何在线 CDN 库中选择正确的 css 文件。例如
https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css
<!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.5.2/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#aboutUs">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ourWork">OUR WORK</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#theCrew">THE CREW</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contactUs">CONTACT US</a>
</li>
</ul>
</nav>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</main>
</body>
</html>
您使用的是旧版本 Bootstrap。
将版本更改为 4.4 以使其工作
问题是您使用的 类 与最新版本的 bootstrap 有关。你应该使用最新版本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>White Rose Crew Company Website</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#aboutUs">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ourWork">OUR WORK</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#theCrew">THE CREW</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contactUs">CONTACT US</a>
</li>
</ul>
</nav>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </body>
</html>
我正在尝试使用 Bootstrap 构建我的第一个网页,但我添加的 Bootstrap 代码似乎只有一半响应(例如,导航栏似乎知道它已经提供了某种 Bootstrap class,但其他 classes(例如 navbar-dark 什么都不做)。我也不得不自己从我的 ul 中删除要点,即使我正在学习的教程没有。 我觉得我的问题好像是 Bootstrap 如何链接到我的 HTML 文件,但仍然很困惑。 先感谢您。这是我的代码...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>White Rose Crew Company Website</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="./recources/css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#aboutUs">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ourWork">OUR WORK</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#theCrew">THE CREW</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contactUs">CONTACT US</a>
</li>
</ul>
</nav>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</main>
</body>
</html>
对于bootstrap 3.4.1 你需要使用
https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css
对于bootstrap 4 你需要使用
https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css
你写的是 bootstrap 4 语法,但是 link 到 bootstrap 3
对于 bootstrap 5(最新测试版)您需要使用
https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css
要应用 bootstrap 无论您想应用哪个版本,请从任何在线 CDN 库中选择正确的 css 文件。例如 https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css
<!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.5.2/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#aboutUs">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ourWork">OUR WORK</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#theCrew">THE CREW</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contactUs">CONTACT US</a>
</li>
</ul>
</nav>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</main>
</body>
</html>
您使用的是旧版本 Bootstrap。 将版本更改为 4.4 以使其工作
问题是您使用的 类 与最新版本的 bootstrap 有关。你应该使用最新版本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>White Rose Crew Company Website</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#aboutUs">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ourWork">OUR WORK</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#theCrew">THE CREW</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contactUs">CONTACT US</a>
</li>
</ul>
</nav>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </body>
</html>