如何解决请有人解释为什么我的 Bootstrap 不适用?
我正在尝试使用 Bootstrap 构建我的第一个网页,但是我添加的 Bootstrap 代码似乎只有一半响应(例如,导航栏似乎知道它提供了某种 Bootstrap 类,但其他类,例如 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>
解决方法
对于引导程序 3.4.1,您需要使用
derived::foo()
对于引导程序 4,您需要使用
https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css
你写的是 bootstrap 4 的语法,但链接到 bootstrap 3
对于引导程序 5(最新测试版),您需要使用
https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css
您使用的是旧版本的 Bootstrap。 将版本更改为 4.4 以使其正常工作
,要应用您要应用的任何版本的引导程序,请从任何在线 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>
有问题的是,您使用的类与最新版本的引导程序有关。您应该使用最新版本。
<!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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。