Twitter Bootstrap 3 (mit mobile-first Ansatz) geht online

Twitter Bootstrap 3 mit mobile-first Ansatz

Endlich ist es soweit und Twitter Bootstrap 3 geht online. Die Haptneuerung ist der mobile-first Ansatz, wobei standardmäßig ein responsives Layout erstellt wird, dass für Smartphones und Tablets optimiert ist. Endlich wurde die Version 3 vom Frontend-Framework Twitter Bootstrap veröffentlicht. Neben der Umsetzung der Bedienelemente im Flat Design(optimale Anzeige auf Handys) wurde als größte Neuerung das responsive Design standardmäßig aktiviert.

Die Bootstrap-Entwickler möchten damit sichergehen, dass Webdesigner die Twitter Bootstrap einsetzen in erster Linie das mobile Design für Smartphones, Tablets und Co. optimieren (mobile-first). In der Vorgängerversion musste die responsive Funktionalität des Design noch manuell aktiviert werden.

Durch die zunehmende Nutzung von mobilen Endgeräten zum Surfen im Internet ist ein solcher Ansatz zielführend um Websites mit derselben Codebasis für verschiedene Auflösungen optimal darzustellen.

Desweiteren können in Twitter Bootstrap v3 wieder die beliebten Icons von Glyphicons verwendet werden, um die Bedienbarkeit zu verbessern. Alle weiteren Elemente (Tabellen, Buttons, Formulare) stehen ebenfalls in der Version 3 bereit, jedoch alle optimiert auf die mobile Ausgabe (z. B. werden alle Eingabeelemente mit 100% Breite angezeigt.)

Twitter Bootstrap 3 mit mobile-first Ansatz
Twitter Bootstrap 3 mit mobile-first Ansatz

Twitter Bootstrap 3 könnt Ihr als Releas Candidate 1 auf http://getbootstrap.com/ herunterladen.

Hinweis zu meinem Twitter Bootstrap Tutorial

Aktuell basiert mein Tutorial noch auf der Version 2, wodurch eine Beispiele nicht mehr richtig funktionieren. Natürlich werde ich in den kommenden Wochen mein Twitter Bootstrap Tutorial entsprechend anpassen, so dass alle Beispiele und Quellcodeschnipsel  neuen Version funktionieren.

2 Fragen an die Blogleser / Twitter Bootstrap Anfänger:

  • Welche Tutorials und Hilfen wünscht Ihr euch zusätzlich?

  • Soll es eine Downloadversion des Tutorials geben?

5 Gedanken zu „Twitter Bootstrap 3 (mit mobile-first Ansatz) geht online“

  1. Hi,

    nach gründlicher Suche habe ich leider noch immer keine passende Antwort auf mein Problem gefunden, darum Frage ich nun einfach mal auf diesem Wege: Ich möchte, dass mein Footer bei kleinen Screens, sprich z.B.: ab Medium (md) nicht mehr angezeigt wird.
    Wie also erreiche ich diesen Effekt?

    LG

    1. Hallo,

      bei Bootstrap 3 gibt’s dafür extr CSS-Klassen, um Elemente bei den verschiedenen Auflösungen ein- oder auszublenden.
      Siehe: http://getbootstrap.com/css/#responsive-utilities

      Du könntest bei dir im Footer z. B. folgendes machen um den Footer ab Medium auszublenden:
      <footer class="hidden-sm hidden-xs"></footer>

      Alternativ könntest du auch angeben, wann der Footer gezeigt werden soll:
      <footer class="visible-md visible-lg"></footer>

      Viele Grüße

      Andreas

Kommentare sind geschlossen.