Eine anpassungsfähige Webseite mit Bootstrap erstellen

20-04-2015

Bootstrap ist ein beliebtes Framework, mit dem man das Frontend (Benutzeroberfläche) einer Webseite schneller entwickeln kann.

Bootstrap beinhaltet ein Grid(Raster)-Layout um die Webseite an dem Bildschirm anzupassen (Responsive Webdesign) und vorgefertigte Vorlagen für die verschiedenen Elemente einer Webseite. Zusätzlich lässt sich Bootstrap auch nach eigenen Wünschen komplett anders gestalten, dazu einfach auf den Menüpunkt Customize gehen.

Ich erkläre hier anhand eines Beispiels wie man mit Hilfe von Bootstrap eine anpassungsfähige Webseite erstellt.

Erklärung wie Bootstrap funktioniert: Bootstrap beinhaltet ein Grid(Raster)-Layout, dass die Breite der Webseite in 12 Spalten/Teile unterteilt. Man kann so jedem Element auf der Webseite eine bestimmte Anzahl Spalten für jede Bildschirmgrösse vergeben, dazu muss man dem Element nur eine bestimmte CSS-Klasse vergeben.

Es stehen folgende CSS-Klassen zur Verfügung:

.col-xs (für alle Bildschirmbreiten)
.col-sm (für Bildschirmbreite grösser/gleich 768px)
.col-md (fürBildschirmbreite grösser/gleich 992px)
.col.lg (für Bildschirmbreite grösser/gleich 1200px)

Diese CSS-Klassen lassen sich auch noch miteinander kombinieren, so kann man jedem Element je nach Bildschirmbreite eine unterschiedliche Anzahl Spalten vergeben. Das wird alles unter dem Menüpunkt CSS erklärt.

Zum Beispiel

Zuerst geht man auf die Webseite von Bootstrap und lädt die Dateien herunter:

Die Ordnerstruktur sieht danach so aus:

css
fonts
js

Als nächstes geht man auf dem Menüpunkt Getting started und kopiert den Code vom Basic Template. Man erstellt damit die Datei index.html.

Die Ordnerstruktur sieht danach so aus:

css
fonts
js
index.html

Um das Design der Webseite anzupassen braucht es auch eine CSS-Datei. Dafür erstellt man die Datei design.css und platziert sie im Ordner css. Diese Datei fügt man unterhalb der Zeile <link href="css/bootstrap.min.css" rel="stylesheet"> in die index.html Datei ein.

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/design.css" rel="stylesheet">

Jetzt folgt der eigentliche Code, für dieses Beispiel wird der Code aus dem Menüpunkt Components kopiert.

Für den oberen Bereich der Webseite nehme ich das Element Page header und setzte es in einen <div class="container"> um es auf dem Bildschirm zu zentrieren.

<div class="container">
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
</div>

Für die Navigation nehme ich das Element Navs und setzte es ebenfalls in einen <div class="container"> um es auf dem Bildschirm zu zentrieren.

<div class="container">
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>

Um die letzten Neuigkeiten anzuzeigen nehme ich das Element Jumbotron und setzte den <div class="container"> innerhalb des Elements ein. Somit erhält dieses Element die volle Breite des Bildschirm, der Inhalt wird aber zentriert.

<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>

Unterhalb des Jumbotron Elements definiere ich drei Bereiche:

Linker Bereich
Mittlerer Bereich
Rechter Bereich

Um sie zu zentrieren setzte ich alle Bereiche in einen <div class="container"> und gebe ihnen die CSS-Klasse col-md-4. Das bedeutet, ab Bildschirmbreite 992px erhält jeder der drei Bereiche 4 Spalten und bei kleineren Bildschirmen bekommen sie die volle Breite des Bildschirms. Damit es noch funktioniert, muss ich alle drei Bereiche in die <div class="row"> platzieren.

Das ganze wird hier erklärt: http://getbootstrap.com/css/#grid

<div class="container">
<div class="row">
<div class="col-md-4">
<div class="left">Linker Bereich
</div>
</div>
<div class="col-md-4">
<div class="middle">Mittlerer Bereich
</div>
</div>
<div class="col-md-4">
<div class="right">Rechter Bereich
</div>
</div>
</div>
</div>

Hier der komplette Code für dieses Beispiel:

design.css

.left {
height:240px;
background-color:#ccc;
}

.middle {
height:240px;
background-color:#990000;
}

.right {
height:240px;
background-color:#000;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">



<title>Bootstrap Webseite</title>


<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/design.css" rel="stylesheet">



</head>
<body>
<div class="container">
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
</div>
<div class="container">
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="left">Linker Bereich
</div>
</div>
<div class="col-md-4">
<div class="middle">Mittlerer Bereich
</div>
</div>
<div class="col-md-4">
<div class="right">Rechter Bereich
</div>
</div>
</div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>
</body>
</html>

Javi González