Introduce Bootstrap and dependencies

index.html

@@ -1,22 +1,69 @@
-<!DOCTYPE html>
-<html>
+<!doctype html>
+<html lang="de">
   <head>
-    <title>TODO</title>
-    <meta charset="UTF-8">
-    <link rel="stylesheet" type="text/css" href="style/main.css">
-    <script type="text/javascript" src="js/d3/d3.min.js"></script>
-    <script type="text/javascript" src="js/main.js"></script>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="">
+    <title>F1Vis Projekt</title>
+    <!-- Bootstrap core CSS -->
+    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
+    <!-- Our custom styles -->
+    <link rel="stylesheet" type="text/css" href="css/main.css">
   </head>
   <body>
-    <h1>Hallo!</h1>
-    <p>
-      Eingerückt wird mit 2 Leerzeichen pro Einrückungsebene.<br>
-      Charset ist UTF-8.<br>
-      TODO
-    </p>
-    <div id="loadmask">
-      Arbeite ... bitte warten.
-    </div>
+    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
+      <a class="navbar-brand" href="#">F1Vis</a>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
 
+      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+        <ul class="navbar-nav mr-auto">
+          <li class="nav-item active">
+            <a class="nav-link" href="#">Home <span class="sr-only">(aktuelle Seite)</span></a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Irgendetwas anderes</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link disabled" href="#">TODO ...</a>
+          </li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Hier ...</a>
+            <div class="dropdown-menu" aria-labelledby="dropdown01">
+              <a class="dropdown-item" href="#">... gibt es ...</a>
+              <a class="dropdown-item" href="#">... auch so tolle ...</a>
+              <a class="dropdown-item" href="#">... Menüpunkte!</a>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </nav>
+
+    <main role="main" class="container">
+
+      <div class="starter-template">
+        <h1>Hallo!</h1>
+        <p class="lead">
+         Mit Bootstrap sieht alles per Default ein wenig hübscher aus.<br>
+         Eingerückt wird mit 2 Leerzeichen pro Einrückungsebene.<br>
+         Charset ist UTF-8.<br>
+         TODO
+        </p>
+      </div>
+
+    </main><!-- /.container -->
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="js/jquery/jquery-3.2.1.min.js"></script>
+    <script src="js/popper/popper.min.js"></script>
+    <script src="js/bootstrap/bootstrap.min.js"></script>
+
+    <!-- D3.js and our own JavaScript
+    ================================================== -->
+    <script type="text/javascript" src="js/d3/d3.min.js"></script>
+    <script type="text/javascript" src="js/main.js"></script>
   </body>
-</html>
+</html>