Einführung in das CSS-Framework Bootstrap

9. September 2014 - Bootstrap

Gerade im Bereich Responsive Webdesign ist ein Gridsystem wichtig und auch hilfreich. Ich selbe setzte auf das CSS-Framework Bootstrap, welches von Twitter entwickelt worden ist. Dieses bietet die Möglichkeit seine Webseite so aufzubauen, dass die einzelnen Inhalte/Bereiche auf den verschiedenen Endgeräten (Smartphone, Tablet, Monitor) gut lesbar sind. Soll heißen, dass die einzelnen Bereiche gegebenenfalls an eine andere Stelle rücken, sobald sich der Platz auf dem jeweiligen Endgerät verändert.

Darüberhinaus bietet Bootstrap noch weitere Möglichkeiten, beispielsweise können damit einfache Buttons erstellt werden, genau so wie Dropdown Menüs, Tabellen und noch vieles mehr.

Mein Hauptanliegen bei der Benutzung von Bootstrap war jedoch das bereits angesprochene Gridsystem. Seiten werden hiermit in verschiedene Rows eingeteilt, welche jeweils bis zu 12 Spalten beinhalten können. Diese können dann, je nach gewünschter Platzeinteilung mit Spalten befüllt werden. Angenommen ich habe eine Seite mit einem Headbereich, welcher sich über die komplette Breite erstreckt und darunter einen Contentbereich, welcher an der rechten Seite eine Sidebar beinhaltet, dann kann meine Aufteilung wie folgt aussehen.

Bootstrap Gridsystem

In diesem Beispiel würde der Headbereich also aus 12 Spalten bestehen und der komplette Bereich dadrunter aus 8 und 4 Spalten, also auch wieder insgesamt 12. Dies wäre beispielsweise der Fall auf einem normalen Computermonitor. Auf kleineren Geräten, wie einem Tablet oder einem Smartphone wäre der Inhaltsbereich jedoch wahrscheinlich ein anderer. So möchte man beispielsweise den Content, also die 8 Spalten über den kompletten Bereich strecken und die Sidebar einfach unter diesem platzieren. Dies ist möglich, indem man einfach angibt, dass sich dann die Spalten auf die maximale Anzahl von 12 verändern.

 

Hierfür bietet Bootstrap vier verschiedene Grid-Größen:

xs – Phones

sm – Tablets / Small Grid (> 768px ) = .col-sm-*

md – Desktop / Medium Grid ( >992px) = .col-md-*

lg – Larger Desktops / Large Grid (>1200px) = .col-lg-*

 

Die Sternchen ( * ) stehen dabei für die Anzahl der Spalten. Wie bereits erwähnt können und müssen bis zu 12 Spalten vergeben werden. Es gibt auch noch die Möglichkeit Spalten zu verschalten und Offsets zu benutzen, dazu jedoch in einem weiteren Beitrag mehr. Eine genauere Dokumentation gibt es auf der Webseite von Bootstrap.

Nachfolgend noch ein kleines Beispiel, wie das ganze nun genau aussehen könnte. Die Aufteilung bezieht sich auf diese Seite. Der Newsbereich beinhaltet auf einem normalen bzw großen Desktop 9 Spalten und die Sidebar 3. Ab dem Tablet sind es dann jeweils 12 Spalten.

 

[code language=”html”]
<div class="contentLeft col-xs-12 col-lg-9">

<!– Start the Loop. –>

</div>

<aside class="col-xs-12 col-lg-3">

<!– Sidebar –>

</aside>
[/code]

 

Einbindung:

Um Bootstrap nutzen zu können müsst ihr eine CSS Datei einbinden sowie eine JS Datei. Wichtig ist dabei zu beachten, dass Bootstrap jQuery benötigt, welches VORHER eingebunden werden muss.

[code language=”html”]
<script type="text/javascript" type="/js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
<script type="text/javascript" type="/js/bootstrap.min.js"></script>
[/code]
 

Hinterlass doch ein Like :)Share on FacebookTweet about this on TwitterShare on Google+

One response to “Einführung in das CSS-Framework Bootstrap”

  1. […] Bootstrap noch überhaupt nicht kennt, wird dies eventuell dadurch ändern, dass er sich meinen Artikel aus dem Jahr 2014 über Bootstrap anschaut. Versprechen kann ich es aber […]

Leave a Reply