twitter-bootstrap-logo

Twitter Bootstrap ist ein neues HTML-/CSS-Toolkit, das gestern von Twitter in der Version 1.0 veröffentlicht wurde. Das Open-Source-Projekt vereinfacht das Erstellen von Web-Apps und Webseiten, da es bereits viele Basiselemente wie Formulare, Buttons, Tabellen, Grids oder Navigationselemente mitbringt.

We are happy to announce Bootstrap, a front-end toolkit for rapidly developing web applications. It is a collection of CSS and HTML conventions. It uses some of the latest browser techniques to provide you with stylish typography, forms, buttons, tables, grids, navigation and everything else you need in a super tiny (only 6k with gzip) resource.

Bootstrap-CSS einbinden

Twitter Bootstrap lässt sich sehr einfach verwenden. Man lädt einfach das Stylesheet herunter oder bindet es direkt von Github ein. Mehr ist nicht zu tun.

PHP:
  1. "stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.0.0.min.css">

Jetzt kann man beginnen, HTML-Elemente zu erstellen und muss diesen lediglich die entsprechende CSS-Klasse zuweisen. Dazu schaut man einfach in der Dokumentation nach (z.B. btn für einen Button). Somit erhält man einen schönen „sauberen und einheitlichen” Code.

HTML:
  1. type="submit" class="btn">Mehr erfahren

Bootstrap-Beispiel

Hier ein Beispiel (ohne Funktionalität), das ich innerhalb weniger Minuten erstellt habe.

Link: Twitter Bootstrap
Link: Bootstrap from Twitter (Twitter Dev Blog)