文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >HTML/CSS/Bootstrap \ Bootstrap Navbar

问HTML/CSS/Bootstrap \ Bootstrap Navbar
EN

Stack Overflow用户
提问于 2018-06-29 04:28:36
回答 3查看 243关注 0票数 0

我对编程很陌生，对HTML也很陌生。目前，我们正在为我的Web开发课做一次课堂作业，我们正在为一家名为"DW礼品公司“的虚构公司制作一个网页。项目需求之一是顶部的导航栏(而不是固定的)，它会导致几个不同的子页面(关于项目、订单等)。然而，我被困在肚脐部分，似乎不能让肚脐看起来正确。

下面是我的代码。我有导航标签，我相当肯定的是正确的类，以及ul和li的(我知道ul是一个无序列表，但我不能100%肯定li是什么。)我正在跟踪一个来自我的教授的在线vid，我是Germ级(99.9%)，我肯定我一直在正确地输入他拥有的内容，但我的版本看起来与他的完全不同(我已经附上了它应该是什么样子，我的样子和他的样子一样)。

我的代码：

代码语言：javascript
运行
复制
<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>

大概是我想让它看起来像喜欢。

我的看上去像喜欢。

我的教授长什么样子喜欢。

我想子弹跟李的有关，但我不确定。

Tl;dr:我试图用HTML为一个网站制作一个导航栏，虽然我觉得我完全是从他的在线视频中跟踪了我的指导员代码，但它看起来并不是应该的。

adobe-brackets
html
css
bootstrap-4
navbar
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-06-29 05:05:42

从CDN路径中包含bootstarp的文件，如下所示

代码语言：javascript
运行
复制
<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代码所示。

代码语言：javascript
运行
复制
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">

这2行意味着您的css(bootstrap.min.css和引导主题css )必须出现在一个名为css的文件夹中，该文件夹与html并行。

您应该下载引导程序的css，并将它们保存在名为css的文件夹中，与您的html文件并行，或者只需从它们的CDN路径(由引导本身承载)访问这些文件。

​

代码语言：javascript
运行
复制
<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>

​

票数 0
EN

Stack Overflow用户

发布于 2018-06-29 06:33:31

试一试这段代码。我觉得你的代码对新手来说有点难理解，如果你真的想了解更多关于web开发的知识，那么就学习CSS，而不是跳到Bootstrap。

代码语言：javascript
运行
复制
<!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>
票数 1
EN

Stack Overflow用户

发布于 2018-06-29 05:03:35

我不想帮你做作业，但我可以给你指明正确的方向。

如果您使用的是引导程序4，请查看此页面

https://getbootstrap.com/docs/4.0/components/navbar/

如果您使用的是引导程序3，请查看此页面

https://getbootstrap.com/docs/3.3/examples/navbar/

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/51094311

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档