Digital First: Loading

Bootstrap
-
ein
mobiler
Schritt
voraus

Bootstrap
Bootstrap

Schneller und einfacher Web-Developen mit Bootstrap! Die Entwickler selbst bezeichnen ihr Werkzeug als Frontend-Framework, dabei ist es viel mehr als das: ein Baukasten aus Webdesign-Komponenten. Von responsiver Navigation über Buttons und Formularfelder bis hin zu Slidern - Bootstrap liefert die Vorlagen mit! Seit der Version 3.0 ist Boilerplate als Flat Design ein weiteres Thema, außerdem setzt das Entwickler-Team von Twitter auf einen Mobile-First-Ansatz. Damit liegt nun ein klarer Fokus auf Webseiten-Entwicklung für Tablets und Smartphones.

Bootstrap - getting started

Ist die neueste Version heruntergeladen, werden bootstrap.min.css, jquery.js und bootstrap.min.js wie üblich in der Index-Datei eingebunden. Das sieht dann wie folgt aus:

Bootstrap


  
    Bootstrap
    
  
  
    
    
  


Absolut responsive mit Mobile-First-Ansatz

Bootstrap beherrscht derzeit vier sogenannte Breakpoints, die angeben, ab welcher Browserbreite sich ein Layout an das Medium anpasst. Damit ist es u.a. möglich, die Sidebar beim Smartphone auszublenden. Hier ein kleines Beispiel:

Zeig mich immer

Um die zweite div auf einem Smartphone auszublenden, müssen wir die Klasse "hidden-xs" hinzufügen. Bootstrap unterscheidet insgesamt zwischen fünf hidden-show Klassen.

Icons - kleines Feature, große Hilfe

Ein kleines, aber doch sehr nützliches Feature sind die bereits mitgelieferten Icons - die heutzutage für beinah jedes Projekt genutzt werden. Eingebunden werden diese bei Bootstrap mittels dem folgenden Code:

Die HTML-Zeile liefert uns prompt eine kleine Lupe. Eine Übersicht der mitgelieferten Icons gibt es außerdem hier.

Zum wirklich interessanten Teil von Bootstrap kommen wir, wenn wir auf die Unterseite "Components" auf getbootstrap.com gehen. Denn hier finden wir nützliche Tools, die einem Entwickler viel Arbeit abnehmen. Ob für ein Dropdown-Menü oder eine bereits fertige Navigation - hier wird garantiert jeder fündig.

Schritt für Schritt zum Dropdown-Menü

Um ein Dropdown-Menü zu erhalten, brauchen wir lediglich eine kleines HTML Grundgerüst, das wie folgt aussieht:


Der erste div-tag mit der Klasse btn-group gruppiert das Dropdown-Menü. Mit dem darunter liegenden button-tag und den Klassen "btn" und "dropdown-toggle" erhalten wir einen bereits vordefinierten Button. Der span-tag dient dazu, dass neben der Beschriftung des Buttons ein kleiner Pfeil für die Visualisierung erscheint. Die Einträge können schlussendlich mittels einer Liste eingetragen werden. 

Um mit dem Default Style von Bootstrap zu arbeiten geben wir der Liste noch die Klasse „dropdown-menu“. Und schon haben wir ein fertig gestyltes und wunderbar funktionierendes Dropdown-Menü.

Gründe für Bootstrap

  • die ideale Grundlage für ein Responsive-Layout
  • einfaches und neutrales Grunddesign
  • nützliche jQuery Plugins
  • große Auswahl an Icons wird direkt mitgeliefert
  • Browserkompatibilität bis einschließlich Internet Explorer 7
  • erspart viel Zeit und Nerven

Mein Fazit

Eine gute Dokumentation und die simple Namensgebung macht das Arbeiten mit Bootstrap sehr angenehm - und ist für Neueinsteiger leicht zu lernen.

Dank eines Konfigurators kann die Größe der Bootstrap-Datei recht klein gehalten werden. Aufgrund der vielen Möglichkeiten, die das Tool bietet, sollte man unbedingt darauf achten, die Website nicht mit unnötigen Effekten vollzupflastern. Ein gezieltes Herangehen ist empfehlenswert.

Kleiner Tipp: Wer noch ein wenig auf Github herumstöbert findet auch gleich nette und nützliche Plugins für Bootstrap.

Diskutieren Sie mit uns auf Facebook und Twitter . Natürlich freuen wir uns auch über ein E-Mail von Ihnen.

Mehr Blogartikel zum Thema:

loading
Nach oben
 

Hallo!
Sie möchten mit uns zusammenarbeiten? 

Welche Themen sind für Sie interessant?

ICH

Erzählen Sie uns doch bitte ganz kurz worum es geht.

ICH

Gerne würden wir mehr darüber erfahren! Wie dürfen wir Sie denn kontaktieren?

Wie dürfen wir Sie denn kontaktieren?


ICH

An welche Addresse sollen wir die Mail schicken?

Unter welcher Nummer sind Sie am besten erreichbar?

Leider sind zur Zeit alle MASSIVE DOVES auf Urlaub ;) Wollen Sie uns alternativ vielleicht eine Telefonnummer oder E-Mail Adresse hinterlassen, unter der Sie erreichbar sind?

ICH

Bitte geben Sie eine gültige E-mail Adresse ein.


Verraten Sie uns noch Ihren Namen?

ICH

Zum Schluss noch etwas Bürokratie #DSGVO:

Vielen Dank für Ihre Anfrage! Wir werden uns so rasch wie möglich bei Ihnen melden.

Es ist etwas schiefgelaufen.
Bitte lade die Seite neu und versuch es noch einmal.