Bootstrap Startseite

Bootstrap: Einbinden der Dateien und erste Schritte

20. Mrz. 2016 // Moritz Kanzler //

In diesem Artikel beschäftige ich mich mit Bootstrap 3 und möchte die Einrichtung des CSS Frameworks erklären sowie die ersten Schritte zur Benutzung erläutern. Dies soll kein vollständiger Guide sein sondern lediglich eine (einfache) Einstiegsmöglichkeit in das Thema Bootstrap darstellen.

Was ist Bootstrap?

Bootstrap ist ein CSS Framework. Dieses bietet standartisierte CSS Klassen und Elemente mit einem zunächst vordefinierten Aussehen. Alle enthaltenen Elemente sind auf das Responsive Design Konzept sowie auf eine weitreichende Browserkompatibilität ausgelegt. Somit gibt Bootstrap eine einfach Grundschablone vor, welche es ermöglicht schnell Internetseiten zu entwickeln, ohne dabei jedes mal das Rad neu erfinden zu müssen. Kurz immer wiederkehrende Aufgaben beim Anlegen eines neuen CSS-Sheets entfallen und man kann sich sofort um die weitergehende grafische Umsetzung der Seite kümmern. Ebenfalls ist Bootstrap über JavaScript Plugins erweiterbar.

Was bietet Bootstrap?

Bootstrap bietet verschiedene vorgefertigte CSS-Klassen an, mit denen Buttons, Formulare oder Navigationsleisten einfach eingebunden werden können und sofort wichtige Eigenschaften wie die Darstellung auf verschiedenen Endgeräten realisiert werden. All diese Elemente haben ein vorgefertigtes Design welches aber in weiteren Schritten ganz an die eigenen Bedürfnisse angepasst werden können. Wichtig ist jedoch, die grundlegenden Darstellungsoptionen müssen nicht bei jedem Projekt neu gesetzt werden. Die entsprechenden Elemente sind in sehr anschaulich in der Dokumentation von Bootstrap zu sehen.

Herzstück von Bootstrap ist jedoch das 12-spaltige Layout mit dem Elemente angeordnet werden können. Alle wichtigen Informationen darüber finden sich im Bereich CSS der Dokumentation.

Was beinhaltet Bootstrap?

Lädt man Bootstrap herunter findet man drei große Ordner vor:

  • css/ – Dieser Ordner enthält alle nötigen CSS Dateien die Bootstrap braucht.
  • js/ – Hier sind zusätzliche JavaScript Dateien ausgelagert
  • fonts/ – Im Fonts Ordner liegen die Dateien für die „Icon-Schritftart“ Glyphicon. Diese liegt Bootstrap kostenlos bei.

Wichtig: Für die JavaScript Dateien von Bootstrap wird jQuery benötigt, welches ebenfalls in das Webprojekt eingebunden werden muss, dazu aber gleich mehr.

Wie binde ich Bootstrap ein?

Grundsätzlich können die Bootstrap Dateien in einem beliebigen Ordner innerhalb des Webspaces gespeichert werden. Die einfachste Methode ist jedoch die drei Ordner in die oberste Ebene des Projektes zu legen. Legt man diese woanders ab, muss gegebenenfalls der Pfad von der Bootstrap CSS Datei zu den Glyphicon Font-Dateien angepasst werden.

Hat man alle Bootstrap Dateien auf die oberste Ebene des Projektes bewegt müssen diese eingebunden werden. Hier kann zunächst die CSS-Datei im <head>-Bereich der Internetseite verlinkt werden:

Werden JavaScript Plugins benötigt, sollten noch jQuery und die benötigten JS-Plugins über Bootstrap eingebunden werden (optional):

Danach kann man zum Beispiel mit einem einfachen HTML-Element testen, ob alles geklappt hat:

Das Aussehen der Elemente verändern

Im Laufe des Projektes möchte man natürlich alle HTML-Elemente selbst noch weiter (um-)gestalten, oder aber eigene Klassen hinzufügen. Es gibt hier verschiedene Wege dies zu tun. Für mich hat sich Folgender Weg am besten bewährt.

Zunächst legt man eine eigene CSS-Datei (bspw. style.css) an und bindet nun dort direkt das Bootstrap CSS ein (siehe nächstes Codebeispiel).

Nun wird quasi die Bootstrap-Schablone zuerst geladen, alles weitere was in der style.css steht erweitert bzw. überschreibt diese Einstellungen. Man könnte jetzt damit anfangen die Klassennamen aus Bootstrap hier zu überschreiben um der Seite den eigenen Designstempel aufzudrücken. Möchte man allerdings das ganze möglichst Modular aufbauen macht es mehr Sinn den entsprechenden HTML Elementen zusätzliche Klassen zu geben, wie bspw myButton:

Zieht man das konsequent durch trennt man ganz einfach seine Designstruktur von der von Bootstrap. Jetzt muss lediglich noch direkt die style.css in die Webseite eingebunden werden und der Eintrag zu Bootstrap entfernt, da dieser in der style.css jetzt inkludiert ist. Dazu nochmal die HTML Seite von oben:

Abschluss

Meiner Meinung nach macht die Verwendung eines CSS Frameworks grundsätzlich immer Sinn, egal welche Größe das Projekt hat. Welches man aber nun einsetzt ist sicherlich das Ergebnis persönlicher Preferenzen. Alle hier dargestellten Informationen und mehr finden sich auch auf der schon erwähnten Internetseite von Bootstrap, http://holdirbootstrap.de/. Außerdem kann man dort auch noch weitere Möglichkeiten der Inbetriebnahme von Bootstrap finden.