Einführung Bootstrap – Nur ein Ausblick

13.12.2016 09:31 Uhr

Es gibt neben jQuery Mobile andere wichtige Frameworks, eines davon ist Bootstrap. Um nicht sagen zu müssen, von diesem Framework nie etwas gehört zu haben, schauen wir uns heute seine Funktionen ein wenig an, denn der Fokus liegt auf einer anderen Art von Internetseiten. Für den weiteren Verlauf des Kurses ist dies allerdings nicht zwingend wichtig. Dennoch kann die „Einführung Bootstrap“ interessant sein, denn wenn Ihnen Bootstrap eher liegt, können Sie selbstverständlich Ihr mobiles Projekt auch mit diesem Framework realisieren.

Einführung Bootstrap – So geht es los

Bevor wir mit Bootstrap arbeiten können, müssen wir es zuerst in unsere Internetseite einbinden. Am schnellsten geht dies, indem wir die CDN-Server zuhilfe nehmen. Ein HTML-Minimalbeispiel sieht folgendermaßen aus.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Beispiel</title>
    <!-- JQUERY required -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        Ein wenig Inhalt
    </div>
</body>
</html>

Das Aussehen der Internetseite lässt bereits erahnen, dass sich etwas verändert hat, denn der Text erscheint in einer anderen Standardschrift, und es treten bereits Abstände auf. Wir sind jetzt in der Lage, alle Bootstrap-Elemente zu nutzen. So zum Beispiel Buttons und Links

<a class="btn btn-danger" href="#">Achtung-Link</a>
<button class="btn btn-info">Super Button</button>

Es gibt eine Menge Design-Elemente, die Bootstrap so charmant für uns machen, bitte schauen Sie in der Dokumentation zu Bootstrap nach.

Das GRID-System von Bootstrap

Wichtiger für uns ist allerdings das GRID-System von Bootstrap, das uns die Entwicklung von Responsive Designs ermöglicht. Das folgende Code-Beispiel (es wird nur der Body-Bereicht aufgezeigt) stellt drei DIV-Container untereinander dar. Das ist das Standardverhalten von DIV-Containern und damit nicht weiter verwunderlich.

<div class="container">
    <div class="row">
        <div style="background-color: lightblue">Erster Block</div>
        <div style="background-color: lightgreen">Zweiter Block</div>
        <div style="background-color: lightgoldenrodyellow">Dritter Block</div>
    </div>
</div>

Der Inhalt des DIV-Containers mit der Klasse row wird gedanklich in 12 Einheiten geteilt und kann nun für Geräte und alle größeren Geräte auf die Container verteilt werden. Es wird dabei immer vom angegebenen Gerät zu den Größeren gedacht. Werte, die für Phones (xs) gesetzt werden, gelten automatisch auch für Tablets (sm), Desktops (md) und große Displays (lg), es sei denn, es werden explizit neue Werte gesetzt. So kann für jede Geräteklasse eine andere Aufteilung im 12er-Grid gewählt werden.

<div class="container">

    <div class="row">

        <div class="col-xs-4 col-sm-3" style="background-color: lightblue">
            Erster Block
        </div>

        <div class="col-xs-4 col-sm-6" style="background-color: lightgreen">
            Zweiter Block
        </div>

        <div class="col-xs-4 col-sm-3" style="background-color: lightgoldenrodyellow">
            Dritter Block
        </div>

    </div>

</div>

Jede einzelne Zelle hingegen verfüg wieder über ihr eigenes GRID-System mit 12 Einheiten, so dass hier beinahe beliebig skaliert werden kann.

<div class="container">

        <div class="row">

            <div class="col-xs-4 col-sm-3" style="background-color: lightblue">
                Erster Block
            </div>

            <div class="col-xs-4 col-sm-6" style="background-color: lightgreen">

                <div class="col-xs-6" style="background-color: red">Rot</div>
                <div class="col-xs-6" style="background-color: yellow">Gelb</div>

            </div>

            <div class="col-xs-4 col-sm-3" style="background-color: lightgoldenrodyellow">
                Dritter Block
            </div>

        </div>

    </div>

Durch diese Verhalten von Bootstrap wird es möglich, Webseiten für verschiedene Geräteklassen in einer Webseite zu programmieren. Leider haben wir innerhalb des Kurses nicht mehr Zeit, daher müssen wir es bei dieser „Einführung Bootstrap“ belassen.