code.makery

Learning how to code.

Subscribe to Updates
Edit on GitHub
Mehr HTML & CSS (Deutsch)

JavaScript mit 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.

Der Kern von Bootstrap ist das CSS. Es gibt jedoch auch eine JavaScript-Datei von Bootstrap, die sehr nützliche Funktionen bietet. Schauen Sie sich mal um auf der Bootstrap JavaScript Seite.

Im HTML & CSS Tutorial - Teil 7 haben wir gesehen, wie das Bootstrap-CSS eingebunden werden kann. Nun wollen wir zusätzlich die JavaScript-Datei einfügen.

Bootstrap-JavaScript einbinden

Das Bootstrap-CSS wird im head-Bereich eingefügt. Das JavaScript wird ganz am Schluss vom body-Bereich eingefügt. Damit das Bootstrap-JavaScript funktioniert, braucht es noch ein JavaScript mit jQuery. So sieht es dann aus:

HTML-Vorlage mit 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-Vorlage</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>

Es braucht also drei Dinge:

  • Bootstrap-CSS im head.
  • jQuery-JavaScript am Ende von body.
  • Bootstrap-JavaScript am Ende von body.

Schauen Sie auf der Bootstrap Website nach, welches die aktuellen Versionen von Bootstrap und jQuery sind, und ändern Sie die Versionsnummern entsprechend.

Hinweis: Das JavaScript könnte auch im `head`-Bereich eingefügt werden, was jedoch nicht optimal ist. Der Browser lädt nämlich die Webseite Schritt-für-Schritt und wenn das JavaScript zu früh kommt, dann könnte das die Ladezeit verlängern. Deshalb kommt JavaScript meist ganz am Schluss.

Einklappende Navigation

Mit dem Bootstrap-CSS alleine konnten wir im HTML & CSS Tutorial - Teil 7 bereits eine ansehnliche Navigation programmieren. Nun verbessern wir diese Navigation weiter, so dass sie auf kleinen Bildschirmen automatisch einklappt.

Navigation eingeklappt

Der Programmcode dazu sieht nun so aus:

<!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="projekte/">Projekte</a></li>
            <li><a href="kontakt/">Kontakt</a></li>
          </ul>
        </div>
      </div>
    </div>
    
    <div class="container">
      <h1 class="title">Willkommen auf meinem Web 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