HTML/CSS/Bootstrap | Bootstrap 导航栏
HTML/CSS/Bootstrap | Bootstrap Navbar
我是编程的新手，也是 HTML 的新手。目前正在为我的 Web 开发 class 做一个 class 作业，我们正在为一家名为 "DW Gift Company." 的虚构公司制作网页，项目要求之一是顶部的导航栏（不固定）这会导致几个不同的子页面（关于、项目、订单等）。但是，我被困在导航栏部分，似乎无法让导航栏看起来正确。
下面是我的代码。我有导航标签，我相当确定 classes 以及 ul 和 li 是正确的（我知道 ul 是一个无序列表，但我不是 100% 确定 li 是什么。我正在关注我教授的在线视频，我是 Germ X 级别 (99.9%)，确定我已经正确地跟进并输入了他所拥有的内容，但我的看起来与他的完全不同（我附上了它应该看起来的样子喜欢和我的样子以及他有什么）。
我的代码：
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="css/DWstyle.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<img src="C:\Users\Mason\Desktop\h4_starter\DWGiftLogo.png">
<nav class="navbar navbar-expand-lg navbar-light bg-beige">
<a class="navbar-brand">DW Gift Company</a>
<div class="collapse navbar-collapse" id="DWnavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 6</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 7</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 8</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 9</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
大致是我想要的样子 like。
我的样子 like。
我教授的长相like。
我想子弹和 li 有关系，但我不确定。
Tl;dr：我正在尝试在 HTML 中为一个网站制作一个导航栏，但它看起来并不像它应该的那样，尽管我觉得我已经完全按照我的讲师代码从他的在线视频。
我不想为你做功课，但我可以为你指明正确的方向。
如果你用的是Bootstrap4，看看这个页面
https://getbootstrap.com/docs/4.0/components/navbar/
如果你用的是Bootstrap3，看看这个页面
像这样从它的 CDN 路径中包含 bootstarp 的文件
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
很可能您的文件没有按照您的 html 代码出现在您期望的位置。
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
这两行意味着您的 css（bootstrap.min.css 和 bootstrap-theme.css）必须存在于与html.
您应该下载 boostrap 的 css 并将它们保存在与您的 html 文件平行的名为 css 的文件夹中，或者只从它们的 CDN 路径（由bootstrap 本身）.
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-beige">
<a class="navbar-brand"><img src="C:\Users\Mason\Desktop\h4_starter\DWGiftLogo.png">DW Gift Company</a>
<div class="collapse navbar-collapse" id="DWnavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 6</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 7</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 8</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 9</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
改用此代码。我觉得你的代码对新手来说有点难理解，如果你真的想了解更多关于网络开发的知识，请学习 CSS 而不是跳到 Bootstrap。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body><nav class="navbar navbar-default">
<div class="container-fluid">
<div class="row">
<div class="navbar-header">
<img src="C:\Users\Mason\Desktop\h4_starter\DWGiftLogo.png">
<a class="navbar-brand">DW Gift Company</a></div>
<div class="collapse navbar-collapse" id="DWnavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">item 2 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
<li><a href="#">item 5</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
</body>
</html>
我是编程的新手，也是 HTML 的新手。目前正在为我的 Web 开发 class 做一个 class 作业，我们正在为一家名为 "DW Gift Company." 的虚构公司制作网页，项目要求之一是顶部的导航栏（不固定）这会导致几个不同的子页面（关于、项目、订单等）。但是，我被困在导航栏部分，似乎无法让导航栏看起来正确。
下面是我的代码。我有导航标签，我相当确定 classes 以及 ul 和 li 是正确的（我知道 ul 是一个无序列表，但我不是 100% 确定 li 是什么。我正在关注我教授的在线视频，我是 Germ X 级别 (99.9%)，确定我已经正确地跟进并输入了他所拥有的内容，但我的看起来与他的完全不同（我附上了它应该看起来的样子喜欢和我的样子以及他有什么）。
我的代码：
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="css/DWstyle.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<img src="C:\Users\Mason\Desktop\h4_starter\DWGiftLogo.png">
<nav class="navbar navbar-expand-lg navbar-light bg-beige">
<a class="navbar-brand">DW Gift Company</a>
<div class="collapse navbar-collapse" id="DWnavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 6</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 7</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 8</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 9</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
大致是我想要的样子 like。
我的样子 like。
我教授的长相like。
我想子弹和 li 有关系，但我不确定。
Tl;dr：我正在尝试在 HTML 中为一个网站制作一个导航栏，但它看起来并不像它应该的那样，尽管我觉得我已经完全按照我的讲师代码从他的在线视频。
我不想为你做功课，但我可以为你指明正确的方向。
如果你用的是Bootstrap4，看看这个页面
https://getbootstrap.com/docs/4.0/components/navbar/
如果你用的是Bootstrap3，看看这个页面
像这样从它的 CDN 路径中包含 bootstarp 的文件
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
很可能您的文件没有按照您的 html 代码出现在您期望的位置。
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
这两行意味着您的 css（bootstrap.min.css 和 bootstrap-theme.css）必须存在于与html.
您应该下载 boostrap 的 css 并将它们保存在与您的 html 文件平行的名为 css 的文件夹中，或者只从它们的 CDN 路径（由bootstrap 本身）.
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-beige">
<a class="navbar-brand"><img src="C:\Users\Mason\Desktop\h4_starter\DWGiftLogo.png">DW Gift Company</a>
<div class="collapse navbar-collapse" id="DWnavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 6</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 7</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 8</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 9</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
改用此代码。我觉得你的代码对新手来说有点难理解，如果你真的想了解更多关于网络开发的知识，请学习 CSS 而不是跳到 Bootstrap。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body><nav class="navbar navbar-default">
<div class="container-fluid">
<div class="row">
<div class="navbar-header">
<img src="C:\Users\Mason\Desktop\h4_starter\DWGiftLogo.png">
<a class="navbar-brand">DW Gift Company</a></div>
<div class="collapse navbar-collapse" id="DWnavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">item 2 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
<li><a href="#">item 5</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
</body>
</html>