7. September 2017

Twitter Bootstrap

Twitter Bootstrap is ein HTML5 Programmpaket, welches einem dabei hilft schnell qualitativ hochwertige Webseiten zu erstellen. Es liefert kompilierte CSS und Javascript Elemente und baut auf jQuery auf. Ein Grid (Gitter) System, definierte Objekte wie Buttons und optische ansprechende Layouts ermöglichen eine konsistente und anpassbare Implementierung. Im Standard von Bootstrap ist ein 100% Responsive Design vorgegeben. Das heisst alle Elemente sind auf die Darstellung auf verschiedenen Gerätetypen hin optimiert. Hier erläutere ich, basierend auf dem offiziellen Einsteigertutorial von Twitter wie man eine einfache Webseite erstellt. Wir nutzen hierfür die momentan aktuellste freigegebene Version von Bootstrap: v4.0.0-beta

Basics

Zunächst öffnet ihr eure Lieblings Web-Design Tool oder einfach einen beliebigen Texteditor.

In die Datei fügen wir den Beispielinhalt ein:

<!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-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
 </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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
 </body>
</html>

Wie man sieht haben wir die verlinkten CSS und Javascript Dateien gar nicht heruntergeladen, sondern öffnen diese aus Links im Web. Das erspart uns nicht nur das Herunterladen und die Verwaltung dieser Dateien,  sondern bringt noch einen weiteren Vorteil. Der Vorteil ist, dass durch die häufige Verwendung von Bootstrap und der anderen Quellen durch eine Vielzahl von Websites, die Wahrscheinlichkeit hoch ist, dass euer Browser die Dateien bereits in seinem Cache vorhält. Das wiederum äußert sich in einer erhöhten Darstellungsgeschwindigkeit beim Besuch eurer Website. Der einzige negative Beigeschmack hierbei ist, dass eine Offline-Entwicklung so natürlich nicht möglich ist. Wenn ihr auch ohne Internetverbindung entwickeln möchtet, ladet ich euch das Bootstrap Paket von der offiziellen Queller herunter und bindet die entsprechenden Dateien aus diesem ein.

Nun speichern wir die erzeugte Datei z.B. unter dem Namen “index.html“.

Wenn ihr diese Datei nun öffnet, solltet ihr folgendes dargestellt bekommen:

Jetzt wisst ihr eigentlich schon alles, was grundsätzlich notwendig ist, um Bootstrap zu verwenden.

Ein bisschen mehr

Ein “Hallo Welt!” ist natürlich etwas wenig um von einem Internetauftritt zu besprechen. Deshalb erweitern wir unseren Quellcode um eine Navigationsleiste, eine sogenannte Hero Komponente und ein wenig “Drum-Herum”:

<!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-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t
+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
 </head>
 <body>

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
 <a class="navbar-brand" href="#">Navbar</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">(current)</span></a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">Link</a>
 </li>
 <li class="nav-item">
 <a class="nav-link disabled" href="#">Disabled</a>
 </li>
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
 <div class="dropdown-menu" aria-labelledby="dropdown01">
 <a class="dropdown-item" href="#">Action</a>
 <a class="dropdown-item" href="#">Another action</a>
 <a class="dropdown-item" href="#">Something else here</a>
 </div>
 </li>
 </ul>
 <form class="form-inline my-2 my-lg-0">
 <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
 </form>
 </div>
 </nav>

<!-- Main jumbotron for a primary marketing message or call to action -->
 <div class="jumbotron mt-5">
 <div class="container">
 <h1 class="display-3">Hello, world!</h1>
 <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. 
Use it as a starting point to create something more unique.</p>
 <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
 </div>
 </div>

<div class="container">
 <!-- Example row of columns -->
 <div class="row">
 <div class="col-md-4">
 <h2>Heading</h2>
 <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit 
amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
 <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
 </div>
 <div class="col-md-4">
 <h2>Heading</h2>
 <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit 
amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
 <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
 </div>
 <div class="col-md-4">
 <h2>Heading</h2>
 <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac 
cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
 <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
 </div>
 </div>

<hr>

<footer>
 <p>&copy; Company 2017</p>
 </footer>
 </div> <!-- /container -->

<!-- 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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS
+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-
h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
 </body>
</html>

Dieses Beispiel führt uns näher an einige der wichtigsten Elementet von Bootstrap heran. Zu beachten ist, dass sich gegenüber dem ersten Beispiel nur der Inhalt unter dem “<body>” Tag und über den eingebundenen Javascript Dateien geändert hat. D.h. wir haben keine zusätzlichen Style Informationen Im CSS zur Darstellung angelegt, noch weiteres JavaScript einbinden müssen um die Navigationsleiste funktionsfähig zu machen. Schauen wir uns das Ergebnis im Browser an:

Wenn ihr nun ein wenig mit der Größe des Fensters herumspielt, wird euch auffallen dass alle Elemente sich durchgehend an die aktuelle Größe des Fenster anpassen. Beim Blick zurück in unseren Quellcode fällt auf, dass den meisten DIVs Klassen zugewiesen wurden, z.B. in “<div class='container'>“. Einige wichtige Klassen nenne ich hier:

Container

Der Container ist wie der Name schon vermuten lässt eine Art Stauraum für euren Inhalt. Zeilen “Row” und Spalten “Col” sollten nur innerhalb von Container definiert werden. Es gibt zwei Arten einen Container zu definieren: “<div class='container'>” oder “<div class='container-fluid'>“. Erstere zentriert den Inhalt und sorgt für gleichmäßige Abstände um ihn herum. Zweitere erzeugt einen Container der den gesamten Bildschirminhalt umfasst. Durch geschickte Verknüpfung beider Typen lassen sich optisch ansprechende und zeitgemäße Designs entwerfen.

Row & Column

Ebenfalls im Beispielcode ist die Definition von Reihen “<div class='row'>” und Spalten “<div class='col-xx-x'>” enthalten. Reihen definiert man im wesentlichen um zueinander gehörende Inhalte vertikal zu Gruppieren. Die Spalten machen das gleiche auf horizontaler Ebene. Auch hier ergibt die sinnvolle Kombination beider Typen ein ansprechendes auf verschiedene Endgerätetypen optimiertes Design.

Navbar

Noch vor der Definition des ersten Containers in unserer Beispieldatei, taucht die Navigationsleiste (“<nav class='navbar...'“) auf. Die Navbar hat einen besonderen Stellenwert auf einer Website und wird in unserem Beispiel unter Verwendung des Bootstrap Standards Responsive ausgespielt. Es ist grundsätzlich auch möglich innerhalb einer Seite mehrere Navbars an unterschiedlichen Positionen anzuzeigen. Außerdem lässt sich über die Klassen einer Navbar z.B. definieren, dass diese auch beim herunterscrollen dauerhaft angezeigt werden soll.

Optische Anpassungen

Auch wenn die Standardelemente von Bootstrap schon ganz hübsch sind, möchte man einer Website in der Regel einen individuellen “Anstrich” geben. Der Königsweg hierzu wäre die manuelle Kompilierung von Bootstrap nach jeder Anpassung. Diese stellt sicher, dass nur die Komponenten eingebunden werden, die man auch wirklich benötigt und dass ein “sauberer” Quellcode vorliegt. Aus dem gleichen Grund ist dies aber auch eine sehr aufwändige Methode. Andererseits sollte man AUF KEINEN FALL manuell Änderungen in der Bootstrap CSS Datei vornehmen. Diese Änderungen würden beim Update auf eine neue Bootstrap Version schlicht verloren gehen und sind vor allem auch nur schwer überschaubar. Ebenfalls eine in der Regel schlechte Methode der Anpassung wäre es im HTML Code über “sytyle=...” Definitionen Anpassungen vorzunehmen. Das ist nämlich ebenso unübersichtlich und hat als größten Nachteil zur Folge, dass wiederkehrende Anpassungen bei jedem betroffenen Element einzeln aufgeführt werden müssen.

Ein guter Zwischenweg ist es eine eigene CSS Datei zu erstellen, eigene Klassen zu definieren und diese dann im HTML Code zu verwenden. Zu beachten gilt es, dass die eigene CSS Datei hinter der Bootstrap CSS Datei eingebunden wird, damit die Definitionen nicht überschrieben werden. Auf diesem Wege sind die meisten der zuvor genannten Nachteile bei den anderen Varianten der optischen Anpassungen eliminiert.

Fazit

In diesem Beitrag habe ich beschrieben wie sich eine Website mit Bootstrap erstellen lässt und einem so sehr viel wesentliche Arbeit bezüglich Design und Funktionalität abgenommen wird. Bootstrap selbst bietet noch eine Vielzahl weiterer Komponenten und Funktionalitäten, die ich hier nicht weiter beschrieben habe. Ein Blick in die gute Online Dokumentation lohnt sich und ist fast immer hilfreich. In weiteren Beiträgen in den Kategorien WCMS und Webdesign erläutere ich u.a. die Einbindung von Bootstrap in ein WordPress Template.

 

Titel

Twitter Bootstrap

Veröffentlicht am

7. September 2017

Teilen
facebook twitter xing linkedin email whatsapp
Kategorien / Tags
Webdesign