Bootstrap Einführung

22.05.2017 12:31 Uhr

Bootstrap ist ein Framework, mit dem es uns möglich ist, Inhalte auf einer Webseite sehr strukturiert darzustellen. Die besondere Stärke liegt zum einen in der sehr einfachen und einheitlichen Gestaltungsmöglichkeit aus unterschiedlicher Elemente, zum anderen in der Möglichkeit, Seiten „responsive“, also für praktisch jedes Endgerät passend zu entwickeln. Diese Bootstrap Einführung wird besonders auf letzteres ein Augenmerk richten.

Bootstrap anbinden

Wenn Sie Bootstrap anbinden, müssen Sie sowohl jQuery einbinden, wie auch die Javascript und CSS-Klassen, die Bootstrap mitbringt. Bitte beachten Sie, dass Sie Bootstrap sehr einfach per CDN einbinden können, dann aber natürlich auch während der gesamten Entwicklungszeit online sein müssen und immer von der Verfügbarkeit der CDN-Server abhängig sind. Spätestens für produktive Umgebungen empfehle ich Ihnen daher, Bootstrap und jQuery lokal zu hosten.

Binden Sie erst jQuery, dann Bootstrap ein.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Danach steht Bootstrap auf Ihrer Seite einsatzbereit zur Verfügung. Sie erkennen dies an einem veränderten Standarddesign Ihrer Webseite.

Bootstrap Design Elemente nutzen

Sie können Bootstrap Elemente meist nutzen, indem Sie Ihren Elementen Klassen hinzufügen. So können Sie einen einfachen Textlink zu einem „schönen“ Button machen, indem Sie die Klassen „btn“ und „btn-success“ hinzufügen.

<a href="#" class="btn btn-success">Mein Link</a>

Mit den gleichen Klassen verändern Sie das Aussehen von html-Buttons. Die Möglichkeiten sind sehr umfangreich. Schauen Sie sich auf der Webseite http://getbootstrap.com/css/#type an, welche Möglichkeiten existieren. Diese hier aufzuführen, macht keinen Sinn, Sie sollten bei Bedarf die entsprechende Dokumentation anschauen. Als Bootstrap Einführung ist diese offizielle Dokumentation gut geeignet.

Bootstrap Grid System

Das Bootstrap Grid System ist das, was das Framework für uns besonders interessant macht, weil es die einfache Erstellung von Webseiten ermöglicht, die sich Ihrem Endgerät anpassen. Dazu wird Ihr Bildschirm in zwölf Bereiche horizontal unterteilt. Sie können nun bestimmen, welches Element auf welchem Endgerät wieviel Breite auf Ihrem Bildschirm einnehmen darf. Öffnen Sie zuerst ein Grid Grundgerüst.

<div class="container-fluid">
    <div class="row">

    </div>
</div>

Fügen Sie nun Ihre Elemente innerhalb der „row“ ein, nutzen Sie weitere Div-Container. Es empfiehlt sich, die Container einzufärben, um ihre genauen Abmessungen zu erkennen.

<div class="container-fluid">
    <div class="row">

        <div class="col-xs-4" style="background-color:red">Klein</div>
        <div class="col-xs-8" style="background-color:yellow">Gross</div>

    </div>
</div>

Mit diesem Beispiel haben wir festgelegt, dass auf kleinsten Bildschirmen (xs) UND ALLEN GRÖSSEREN Bildschirmen das erste DIV-Element vier horizontale Einheiten, das zweite acht Horizontale Einheiten zugewiesen bekommt. Wollen Sie nun auf Ihrem großen Bildschirm (lg) eine andere Einteilung, fügen Sie diese hinzu.

<div class="container-fluid">
    <div class="row">

        <div class="col-xs-4 col-lg-6" style="background-color:red">Klein</div>
        <div class="col-xs-8 col-lg-6" style="background-color:yellow">Gross</div>

    </div>
</div>

Denken Sie immer von „klein“ nach „groß“. Auf Ihrem kleinen Display wird die Einteilung 4/8 gewählt und für alle Bildschirme beibehalten, die größer sind. Erst bei großen „lg“-Schirmen springt die Aufteilung auf 6/6 und gilt nun für alle Schirme ab „lg“ und größer. Aus diesem Grund sollten Sie eine „xs“-Aufteilung immer vornehmen. Unterlassen Sie dies, wird automatisch „col-xs-12“ angenommen, das DIV-Element nimmt also die gesamte Breite ein.

Das Thema Grid ist damit noch lange nicht erschöpfend diskutiert. So können Sie Grids schachteln, also neue Grids innerhalb eines Grids aufmachen und offsets nutzen. Schauen Sie sich die offizielle Dokumentation an.

Bootstrap Einführung für den Kurs

Die Bootstrap Einführung für diesen Kurs haben Sie damit absolviert. Bitte denken Sie daran, dass Bootstrap weitaus mehr Möglichkeiten bietet als hier aufgeführt. Ich rate Ihnen, die offizielle Dokumentation einmal komplett durchzuscrollen. So ist das Thema „Formulare“ ebenfalls ein sehr interessantes, das leider unser Kursvolumen sprengt.

Schlagwörter: ,