Eine One Page Website mit Bootstrap

https://startbootstrap.com/template-overviews/stylish-portfolio/

https://startbootstrap.com/template-overviews/stylish-portfolio/

Das Bootstrap Framework ist bereits Jahre alt aber immer wieder nützlich. Die perfekte Basis für eine One-Page Website. Bootstrap bietet ein Grundgerüst mit globalen CSS-Stilen, grundlegenden HTML-Elementen mit erweiterbaren Klassen und einem Grid-System. Es beinhaltet alles, was du brauchst um eine schöne, schnelle Website zu erstellen und ist vollständig Buzzword kompatibel (Mobile First, HTML5, Raster System, Media Queries, Responsiv, LESS, SASS, Mixins, CDN, Grunt, Bower, NPM, Composer). Der letzte Punkt ist natürlich nicht ganz ernst gemeint aber manchmal durchaus hilfreich ;). Diese Anpassungsfähigkeit und die sinnvolle Sammlung von Gestaltungselementen ist das Geheimnis der weiten Verbreitung von Bootstrap. Oft taucht das Framework als Bestandteil von Webanwendungen oder Content Management Systemen auf. Es ist allerdings auch möglich nur auf der Basis von Bootstrap zu arbeiten. Wie, das zeigt dieser Beitrag.

Installation

Um mit Bootstrap arbeiten zu können, brauchst nur ein Dateiverzeichnis, in dem die Dateien deiner Website liegen. Bootstrap benötigt keine Datenbank.

Du kannst Bootstrap auf verschiedene Arten installieren.

Wenn du eine Node.js Umgebung auf deinem Rechner hast, dann genügt ein Befehl im gewünschten Verzeichnis:

npm install bootstrap

Der Node Package Manager erstellt das Verzeichnis node_modules und darin den Ordner Bootstrap mit allem was du benötigst.

Wenn du auf der „grünen Wiese“ anfangen willst, kannst du dir den kompletten Quellcode, inklusive Dokumentation von Bootstrap herunterladen und in deinem Verzeichnis entpacken (Bootstrap Source Download).

Wenn du bereits genau weisst, welche Teile von Boostrap du benötigst, kannst du dir im Customizer ein individuelles Bootstrap Paket per Checkboxen und Parametereingabe (Farben, Schrift, Icons, Tabellen, Buttons, etc.) konfigurieren und herunterladen.

Boostrap Customizer - LESS Variablen
Bootstrap Customizer – LESS Variablen

index.html

Egal, für welche Installationsvariante du dich entscheidest, du musst eine index.html Datei erstellen. Diese index.html enthält den Code für deine Website und Verweise auf einzubindende CSS und JavaScript Dateien. Beispielinhalte für deine erste index.html kannst du dir ebenfalls von der Bootstrap Website kopieren (http://getbootstrap.com/getting-started/#template). Abhängig davon, wo deine index.html liegt, müssen die Pfade innerhalb des Beispiels verändert werden. Die Bootstrap Dateien, die von deiner Website genutzt werden, liegen im Verzeichnis /dist und werden bei Bedarf erzeugt. Wenn du, so wie ich, deine index.html außerhalb des /dist Verzeichnisses anlegst, musst du die Pfade zu den Bootstrap Dateien (bootstrap.min.css, bootstrap.min.js) anpassen. Bei mir sieht das folgendermaßen aus (innerhalb der IDE PHPStorm mit der Ausgabe im Browser im Vordergrund).

index.html
index.html

Innerhalb der index.html Datei kannst du nun anfangen, deine Website aufbauen. Eine gute Idee ist, mit der Navigation anzufangen. Die Bootstrap Site bietet Beispiele unterschiedlicher Navigationen an (http://getbootstrap.com/getting-started/#examples-navbars). Mittels Copy & Paste kannst du den gewünschten Code in deine index.html einfügen. Ich nehme den Code der einfachen Navigation, passe ihn an und kopiere ihn über meinen Hello World Text.

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

Als Ergebnis habe ich nun eine responsive Navigation mit meinem Namen (Brand) und zwei Links.

Navigation
Navigation

Sections

Damit die One-Page auch wirklich eine Seite bleibt, muss es innerhalb der Seite „anspringbare“ Bereiche geben. Solche Bereiche heißen Sektionen. Jede Sektion enthält mindestens einen „Container“ und jeder Container enthält weitere Strukturen, die dann den eigentlichen Text enthalten.  Ich habe zwei Links, also brauche ich zwei Sektionen.

<section id="home" class="box">
    <div class="container">
        <div class="row">
            <h2>Home</h2>
            <p>Jemand musste Josef K. ...</p>
        </div>
    </div>
</section>

<section id="about" class="box">
    <div class="container">
        <div class="row">
            <h2>Über uns</h2>
            <p>Zwei flinke Boxer ...</p>
        </div>
    </div>
</section>

Damit die Navigation weiterhin sichtbar bleibt, muss sie am oberen Rand fixiert werden. Bootstrap bietet dafür eine fertige Klasse: navbar-fixed-top.

<nav class="navbar navbar-default navbar-fixed-top">

Um die Sektionen sichtbar zu machen, müssen sie etwa 50px nach unten verschoben werden, sonst werden sie von der Navigation verdeckt. Das geht am einfachsten mit einer individuellen Klasse. Ich nenne sie box und definiere sie im Header Bereich:

<style>
    .box{padding-top:50px;}
</style>

Jeder Bereich erhält die container Klasse von Bootstrap. Darin kann, wie bei mir, eine row Klasse mit einer Überschrift und einem Text stehen. Es könnten aber auch andere Elemente angezeigt werden (Fotos, Slider, Panels, etc …). So grundsätzlich funktioniert die One-Page jetzt. Die Navigation bleibt oben und nach einem Klick auf einen Link springt der Browser zur entsprechenden Sektion. Wenn das Browserfenster kleiner gezogen wird, verwandelt sich das Menü in die mobile Variante!

Sektionen
Sektionen

Die in Bootstrap vordefinierten Elemente kannst du nun einfach „benutzen“ ohne selbst CSS Befehle schreiben zu müssen. Alle CSS Elemente werden beispielsweise auf der deutschsprachigen Site holdirbootstrap.de/css/ beschrieben.

Less und CSS

Falls du doch CSS Anpassungen hast, musst du das in den Bootstrap Less Dateien machen. Alle CSS Klassen in Bootstrap sind in der Stylesheet Sprache Less geschrieben.

Less ist eine Stylesheet-Sprache mit dem Ziel, das Schreiben von CSS effizienter zu gestalten. Hauptziele sind dabei, intelligente Steuerungen zu ermöglichen sowie Code-Wiederholungen zu vermeiden. Less ist eine Obermenge von CSS, das heißt, ein CSS-Code ist gleichzeitig auch gültiger Less-Code. Less wird zu CSS kompiliert.[Wikipedia] 

Theoretisch versteht jeder moderne Browser Less Dateien. In der Praxis funktioniert das aber nicht so richtig und so werden aus Less Dateien nach jeder Änderung für alle Browser lesbare CSS Dateien erzeugt. Dafür benötigt man ein Tool. Bootstrap verwendet Grunt (link Grunt und Bower todo), Grunt verwendet Node.js und deswegen hatte ich am Anfang des Artikels auch die Installation per Node Package Manager NPM angesprochen. Wenn in deinem Bootstrap Ordner eine Datei package.json ist, kannst du alle benötigten Tools mit diesem Befehl installieren:

npm install

Die Installation dauert ein paar Sekunden (oder eine Minute) und erzeugt ein neues Verzeichnis node_modules. Darin liegt nun der gesamte Werkzeugkasten um mit Bootstrap effektiv arbeiten zu können. Wenn du beispielsweise die Schrift insgesamt etwas größer machen willst, kannst du in der Datei variables.less die Basisgröße der Schrift von 14 auf 17 Pixel erhöhen.

variables.less
variables.less

Die Erzeugung aller notwendigen Dateien erfolgt mit dem Aufruf grunt.

grunt
grunt

Ein Test im Browser zeigt eine entsprechend größere Schrift. Wenn dieser Mechanismus funktioniert, kannst du dich in die Dokumentation vertiefen und aus dem Bootstrap Baukasten deine Website bauen. Um deine Website auf deinem produktiven Server laufen zu lassen, musst du den Ordner /dist mit allen Dateien und die Datei index.html übertragen.

Wenn du bei den Bildgrößen aufpasst, wird die fertige Seite superschnell sein, und je nach Kreativität, Geschick und Übung, auch sehr schön werden! Hier noch etwas Inspiration von startbootstrap.com. Dort kannst du dir auch fertige Bootstrap One-Page Templates laden und anpassen.

https://startbootstrap.com/template-overviews/freelancer/
https://startbootstrap.com/template-overviews/freelancer/
https://startbootstrap.com/template-overviews/stylish-portfolio/
https://startbootstrap.com/template-overviews/stylish-portfolio/

Links


tl;dr: Eine One-Page Website kannst du leicht mit Bootstrap erstellen.

Save

Save

Save

Autor: Hagen Graf

consultant, author, trainer, solution finder, web architect, developer, open source lover, visionary, orator, the good old webmaster. Able to simplify!

2 Gedanken zu „Eine One Page Website mit Bootstrap“

Kommentar verfassen