-3

I have recently been messing around with bootstrap-4.0.0-alpha.6 after downloading the 'source'.

Some of the example themes 'bootstrap-4.0.0-alpha.6\bootstrap-4.0.0-alpha.6\docs\examples' have this script (specifically the navbar-top-fixed)

<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>

I am trying to move the example theme 'navbar-top-fixed' to a different location, so I am also moving the scripts associated and updating the paths.

I can't find this file ANYWHERE?

Is it even used?

assets/js/vendor path shows jquery-slim but not jquery.min

baransjd
  • 21
  • 1
  • 5

2 Answers2

1

Bootstrap-4.0.0-alpha.6 is outdated.

Bootstrap 4.0.0 final was released a few weeks ago.

And yes, jQuery is required for navbars.

You can use the following as a starter template:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Reference:

https://getbootstrap.com/docs/4.0/getting-started/introduction/

WebDevBooster
  • 14,674
  • 9
  • 66
  • 70
  • Appreciate this. I see now 'That’s all you need for overall page requirements. Visit the Layout docs or our official examples to start laying out your site’s content and components.' – baransjd Feb 12 '18 at 01:34
0

If you look into the source code for Bootstrap 4 Alpha's JavaScript, you'll see that jQuery is indeed listed as a requirement:

if (typeof jQuery === 'undefined') {
  throw new Error('Bootstrap\'s JavaScript requires jQuery. jQuery must be included before Bootstrap\'s JavaScript.')
}

+function ($) {
  var version = $.fn.jquery.split(' ')[0].split('.')
  if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] >= 4)) {
    throw new Error('Bootstrap\'s JavaScript requires at least jQuery v1.9.1 but less than v4.0.0')
  }
}(jQuery);

Specifically, Bootstrap requires a jQuery version of at least 1.9.1, but less than 4.0.0.

Note that Bootstrap 4 Alpha is outdated, and the jQuery dependency hasn't changed in the latest version of Bootstrap 4, though it now additionally requires Popper.js:

if (!this._inNavbar) {
  /**
   * Check for Popper dependency
   * Popper - https://popper.js.org
   */
  if (typeof Popper === 'undefined') {
    throw new TypeError('Bootstrap dropdown require Popper.js (https://popper.js.org)');
  }
...

Hope this helps!

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • Fairly new to bootstrap. Was curious as to why the theme in question referenced a file that didn't exist (or maybe just one I could not find). Appreciate the response. – baransjd Feb 12 '18 at 01:32
  • No problem :) If you look at the bottom of most of the Bootstrap examples, you'll see the link to `bootstrap.min.js`, which **in itself** references jQuery :) – Obsidian Age Feb 12 '18 at 01:37