Question

暂时一直在试图弄清楚如何在本地正确引用jquery和bootstrap ....注意到我的导航栏下拉菜单不工作......无法找出原因并决定粘贴两个jquery的cnd链接和bootstrap，它工作正常。

<!DOCTYPE html>

<html lang="en">

    <head>
   <link href="css/bootstrap.css" rel="stylesheet" />
   <link href="css/bootstrap-theme.css" rel="stylesheet" />

   <script type = "text/javascript" src="js/jquery-3.2.1.min.js"></script>
   <script type = "text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
   <script type = "text/javascript" src="js/bootstrap.min.js"></script>
   <script type = "text/javascript" src="js/script.js"></script>

</head>
<body>


<nav class="navbar navbar-default bg-primary">
         <div class="container-fluid">
            <!--logo-->
            <div class="navbar-header">
               <a href="index.html" class="navbar-brand">WebsiteBrand</a>
            </div>
            <!--navbar items-->
            <div>
               <ul class="nav navbar-nav" >
                  <li class="active"><a href="index.html">Home</a></li>
                  <li><a href="#">About</a></li>
                  <!--dropdown-->
                  <li class="dropdown">
                     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
                     <span class="caret"></span></a>
                     <ul class="dropdown-menu">
                        <li><a href="#">Page 1-1</a></li>
                        <li><a href="#">Page 1-2</a></li>
                        <li><a href="#">Page 1-3</a></li>
                     </ul>
                  </li>
               </ul>
            </div>
         </div>
      </nav>
</body>








</html>

这是我的头文件。我把cdn链接放在同一个地方。对不起，如果这是一个愚蠢的问题，但在四处寻找这么长时间之后iv

Answer 1

您订购文件链接＆amp;标记应该是

 <head>
   <link href="css/bootstrap.css" rel="stylesheet" />
   <link href="css/bootstrap-theme.css" rel="stylesheet" />

   <script type = "text/javascript" src="js/jquery-3.2.1.min.js"></script>
   <script type = "text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
   <script type = "text/javascript" src="js/bootstrap.min.js"></script>
   <script type = "text/javascript" src="js/script.js"></script>

</head>

您错过了bootstrap.min.js

中的 .js 文字

考虑文件夹结构，如下所示

的index.html
css文件夹
- bootstrap.css
- 自举-theme.css
js文件夹
- 的jquery-3.2.1.min.js
- bootstrap.min.js
- 的script.js

在更新问题时更新答案

Bootstrap v3

以下是解决方案https://jsfiddle.net/9zgddjjf/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default bg-primary">
 <div class="container-fluid">
    <!--logo-->
    <div class="navbar-header">
       <a href="index.html" class="navbar-brand">WebsiteBrand</a>
    </div>
    <!--navbar items-->
    <div>
       <ul class="nav navbar-nav" >
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="#">About</a></li>
          <!--dropdown-->
          <li class="dropdown">
             <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
             <span class="caret"></span></a>
             <ul class="dropdown-menu">
                <li><a href="#">Page 1-1</a></li>
                <li><a href="#">Page 1-2</a></li>
                <li><a href="#">Page 1-3</a></li>
             </ul>
          </li>
       </ul>
    </div>
 </div>
</nav>

Bootstrap v4

您可以使用解决方案https://jsfiddle.net/9zgddjjf/2/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
   <a href="index.html" class="navbar-brand">WebsiteBrand</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">About</a></li>
      <li class="nav-item dropdown">
         <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Page 1
         <span class="caret"></span></a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a  class="dropdown-item" href="#">Page 1-1</a>
            <a class="dropdown-item" href="#">Page 1-2</a>
            <a class="dropdown-item" href="#">Page 1-3</a>
         </div>
      </li>
    </ul>
  </div>
</nav>

我如何正确本地链接Jquery / Bootstrap和脚本-Noob-

1 个答案: