Why is boostrap 3.3.7 and jquery 3.1.1 not compatible?

Question

Why is boostrap 3.3.7 and jquery 3.1.1 not compatible?

Navigation

#1 by (6 votes)

1

What I want to do is put a nav bar in my app, but when I put the jquery in v 3.1.1 and the boostrap in v 3.3.7 I do not deploy the nav bar. Add the boostrap. Css, the boostrap. Js and the jquery from his cdn. I put the jquery first and then the boostrap css and finally the boostrap css. I would like to know if there are conflicts between these versions

Example:

<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>





        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Nav bar code

              <div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div> 
</div>

With boostrap 4.0.0 if the bar works correctly, but I can not change the version because the rest of the app stops working correctly.

jquery bootstrap-3

asked by David 09.04.2018 в 02:10

source

1 answer

How to compare a String in Java - Java How to compare a variable several times with a =

score 6 · Accepted Answer

The problem is that the Hash of bootstrap.min.css does not have the correct length and does not match the content hasheado :

Message from the console:

The hash contained in the integrity attribute has the wrong length.   _display.

None of the "sha384" hashes in the integrity attribute match   the content of the sub-course.

Your Hash

sha384-BVYiiSIFeK1 dm JRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4u

The correct Hash ( source ):

sha384-BVYiiSIFeK1 dGm JRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4u

Edit : After viewing your nav, I think you also have a problem with it. You should follow this structure:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>                 
        </ul>
      </li>
    </ul>
  </div>
</nav>

With that change it works:

<script
			  src="https://code.jquery.com/jquery-3.3.1.js"
			  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
			  crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">
<div class="navbar-header">
  <a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>                 
    </ul>
  </li>
</ul>
  </div>
</nav>