code.makery

Learning how to code.

Subscribe to Updates
Edit on GitHub
More HTML & CSS

JavaScript with Bootstrap

Achtung: Diese Seite wird gerade aktualisiert auf Bootstrap 4, beinhaltet aber noch Informationen zu Bootstrap 3. Bitte verwenden Sie in der Zwischenzeit die Originaldokumentation von Bootstrap.

The Bootstrap core is its CSS. However, there is also a JavaScript file that is very useful. Have a look at the Bootstrap JavaScript page to find out what’s possible.

In HTML & CSS Tutorial - Part 7, we have seen how the Bootstrap CSS can be integrated. Now, we also want to use the JavaScript file.

Integrating the Bootstrap JavaScript

While the Bootstrap CSS is always inserted into the head area, the JavaScript comes at the very end of the body section. The Bootstrap JavaScript also depends on another JavaScript, called jQuery. So, our HTML looks like this:

HTML Template for Bootstrap
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="main.css">
    <title>Bootstrap Template</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  </body>
</html>

Three things are needed:

  • Bootstrap CSS in the head.
  • jQuery JavaScript at the end of body.
  • Bootstrap JavaScript at the end of body.

Check the Bootstrap Website to get the latest version numbers of Bootstrap and jQuery.

**Note:** The JavaScript could also be included in the `head` area, but this is not optimal. The browser loads the website step-by-step from top to bottom. When the JavaScript comes too early, this could slow down the loading of the entire web page. That's why it is usually better to have the JavaScript at the very end.

Collapsing Navigation

With only the Bootstrap CSS we were already able to program a pretty decent navigation in our Part 7 of our HTML & CSS Tutorial. Now we further improve this navigation so that it automatically collapses on small screens.

Navigation collapsed

The HTML code looks like this:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="main.css">
    <title>Portfolio Marco</title>
  </head>
  <body>
    <div class="navbar navbar-default navbar-static-top">
      <div class="container">
        
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#my-navbar">
            <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Portfolio Marco</a>
        </div>
        
        <div class="collapse navbar-collapse" id="my-navbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="./">Home</a></li>
            <li><a href="blog/">Blog</a></li>
            <li><a href="projects/">Projects</a></li>
            <li><a href="contact/">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
    
    <div class="container">
      <h1 class="title">Welcome to my Portfolio</h1>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  </body>
</html>

Comments