我试图用Bootstrap建立我的第一个网页,但是我添加的Bootstrap代码似乎是半响应的(例如导航栏似乎知道它已经提供了某种Bootstrap类,但其他类如导航栏-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。将版本更改为4.4以使此工作
对于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的语法,但链接到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有关。你应该用最新的版本。
<!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>