javascript - How do I properly locally link JqueryBootstrap and scripts?

For a while I've been trying to figure out how to properly reference jQuery and Bootstrap locally. Noticed that my navbar dropdown menu wasn't working. Couldn't figure out why and decided to paste the CDN links for both jQuery and Bootstrap and it worked just as anticipated:

<!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=".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>

<!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./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>

This is my header file. It's the same place I had put the CDN links. Sorry if this is a silly question, but after looking around for such a long time I decided to ask.

Share Improve this question edited Apr 20, 2020 at 12:33 Salek 4511 gold badge10 silver badges19 bronze badges asked Aug 10, 2017 at 5:30 who885 431 gold badge1 silver badge6 bronze badges

Possible duplicate of Include external css/js file into html page – Nisarg Shah Commented Aug 10, 2017 at 5:33

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

You ordering of file linking & tagging should be

 <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./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>

You missed .js text in bootstrap.min.js

Considering folder structure as below

index.html
css folder
- bootstrap.css
- bootstrap-theme.css
js folder
- jquery-3.2.1.min.js
- bootstrap.min.js
- script.js

Updating answer as the question being updated

Bootstrap v3

Here is the solution https://jsfiddle/9zgddjjf/

<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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

Here you go with a solution https://jsfiddle/9zgddjjf/2/

<link href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How do I properly locally link JqueryBootstrap and scripts? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)