logo

Bootstrap 4 alpha

Mega Menue Sidebar


Bootstrap 4 Tutorial: 1. HTML - Grundgerüst.

In diesem kleinen Tutorial möchte ich zeigen wie einfach es ist eine Website mit Bootstrap aufzubauen und sie für allen Medien und Bldschirmauflösungen lesbar/verfügbar zu machen.

Das Tutorial ist so aufgebaut das es hier im Contentbereich Erklärungen zu den einzelnen Schritten gibt und am Ende jedes Schrittes die Quellcode (style/html) komplett anzusehen und zum Download bereit stehen.

Das Tutorial ist responsive, und "from" the scratch aufgebaut. Es beginnt mit einer leeren HTML5 Seite welcher eine Sticky Nav mit Search und ein Sticky Footer hinzugefügt wird. Als nächstes kommt zum Aufbau der Seite eine mixed Grid-System (mobil, phone,desktop). Später werden Demoinhalte eingebaut, die dynamisch annavigiert werden (Javascript). Die Inhalte werden hauptsächlich mit neuen Elementen von Bootstrap 4 dargestellt.

 

Grundaufbau der Seite im Tutorial

 

Webseitenaufbau

Als grundsätzlichen Seitenaufbau habe ich mir den Inhalt der Grafik vorgestellt. Eine Bootstrapseite mit fixed navbar und integrierter Suche, einem neuen grid-system und dem sticky footer für z.B. Copyright Hinweise.

Ich habe das Bootstrap 4 Tutorial bei mir auf dem Server angelegt und dafür folgende Vorbereitungen getroffen.

 

Da es sich bei der verwendeten Version um bootstrap 4 alpha 6 handelt sind Änderungen / Anpassungen für die Zukunft bis zum Final Release 4 anzunehmen..

Im nachfolgenden, ersten Schritt legen wir die HTML 5 Seite an mit vordefiniertem Container im Body

 

doctype

Der doctype legt den HTML5 doctype der Seite fest.

html-lang tag

Der html-lang tag legt die Seitensprache fest

meta charset=utf8

Der meta charset=utf8 tag ist vorallem für Sonderzeichen, bzw. Umlaute für deutsprachige Seiten wichtig um dies korrekt auszugeben

meta viewport

Der meta viewport.. tag ist wichtig für reponsive Darstellung für alle Bildschirmauflösungen wobei content="width=device-width" tag die Breite der Seite zwingt sich den verschiedenen Bildschirmauflösungen anzupassen. Der initial-scale Wert legt de Zoom Level fest mit dem die Seite das erste mal im Browser geöffnet wird. Der Shrink-to-fit tag ist für Safari Browser ab Version 9.0 im Split-View Mode wichtig für korrekte responsive Darstellung

andere Meta's

Die meta name description und author sind selbsterklärend und nur als Beispiel zusätzlicher Metatags die hier Platz finden können aufgeführt.

title tag

Der Titel tag legt den Titel der Seite fest die Im Browserfenster oben angezeigt wird.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Bootstrap - Tutorial Template</title>

 

bootstrap.min.css

Vor dem abschliessenden head tag ist es üblich die Verlinkungen zu den externen Stylesheet Dateien vorzunehmen. In diesem Fall wird schon einmal die bootstrap.min.css verlinkt, die für die Platzierung des Containers wichtig ist.

 



    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

  </head>

container

Im Body haben ich erstmal einen Container angelegt, innerhalb dessen später der komplette Inhalt der Seite gerendert wird. Mittels der Überschrift in h1 lege ich die Seitenüberschrift fest und der p=lead Text gibt den Eingangstext der Webseite an

.


  <body>

    <div class="container">
      <div class="">
        <h1>Bootstrap Tutorial Template</h1>
        <p class="lead">Clean Index<br>with prepaired content container</p>
      </div>  
    </div><!-- /.container -->
	

 

externe Verlinkungen

Vor dem abschliessenden Body-Tag lege ich aus Performancegründen die Verweise/Verlinkungen auf externe, in diesem Fall Javascript - Dateien fest.

bootstrap.min.js

Die bootstrap.min.js habe ich hier schon mal verlinkt obwohl sie aktuell noch keine Verwendung hat, später aber für dynamische Inhalte benötigt wird.

...workaround.js

Die ...workaround.js ist, wie der Name schon sagt eine Workaround Datei die einen Bug im Microsoft Surface und Windows 8 korrigiert für korrekte Layout-Darstellung

 


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

 

Preview/Code
Modal Modal Modal Extern
CSS HTML Preview Preview
X