Anzeige
Anzeige
News
Artikel merken

Bootstrap: CSS- und HTML5-basiertes WebApp-Toolkit von Twitter

Es gibt einen Neuzugang auf dem Markt der CSS/HTML5-Frameworks. Aufsehenerregend daran ist im Wesentlichen der Entwickler des Toolkits, denn Bootstrap wurde von Twitter zur Verfügung gestellt. Dabei ist Bootstrap kompletter als viele andere Wettbewerber. Es kümmert sich nicht nur um Teilaspekte, sondern liefert das ganze Spektrum von Arbeitserleichterungen out of the box.

3 Min. Lesezeit
Anzeige
Anzeige

Bootstrap setzt auf bewährte Technologien und erfindet das Rad nicht neu

Mit einer sehr umfangreichen Github-Page zu Bootstrap meldet sich Twitter auf dem Markt der CSS-Frameworks und weiß dabei durchaus zu beeindrucken. Twitter bezeichnet seinen Werkzeugkasten als Toolkit für den Entwicklungs-Kickstart und in der Tat kümmern sich die Twitter-Developer um alle wesentlichen Aspekte beim Bau moderner Web Apps und Websites. Dabei unterstützt es die gängigen Browser und verspricht sogar Unterstützung für den IE ab Version 7.

Bootstraps Herzstück: Less und 960.gs

Anzeige
Anzeige

Die zugrundeliegenden Technologien, quasi die Basis von Bootstrap dürften allen Webentwicklern bereits bekannt sein. So kann Bootstrap Anwendungslogik im CSS unterbringen, wozu es den CSS Preprocessor Less einbindet, den man als das Herzstück von Bootstrap bezeichnen kann.

Für das Layout, das hier klassisch als Grid umgesetzt wird, verwendet Bootstrap eine auf 940 Pixel Standardbreite reduzierte Variante des populären 960.gs. Der besondere Charme des 960.gs bleibt in Bootstrap voll erhalten. Dieser besteht nämlich in der simplen Syntax für die Definition von Spaltenlayouts, die ich nahezu als natürlich sprachlich bezeichnen würde. Maximal 16 Spalten können mit Bootstrap definiert werden. Beliebige Vermischungen sind möglich, auch ein fließendes Layout lässt sich erstellen.

Anzeige
Anzeige

Bootstrap: Das Standard-Grid

Typografie

Bootstrap kümmert sich um die Typografie der wesentlichen HTML-Elemente, bearbeitet jedoch keine komplexeren typografischen Aspekte, wie etwa das Setzen einer Baseline. Die Typografie dürfte aber für die allermeisten Anwendungsfälle hinreichend sein. Immerhin wurde Bootstrap im Wesentlichen für das Design des Twitterdienstes selber entwickelt und nicht für grafisch aufwändigere Sites, bei denen mit größerem Anspruch an Fragen der Typografie heran gegangen werden müsste.

Anzeige
Anzeige

Bootstrap: Typografie

Tabellen

Relativ ungewöhnlich für handelsübliche CSS-Frameworks kleineren Umfangs ist die Unterstützung von Tabellen. Hier bringt Bootstrap verschiedene einfache Designmöglichkeiten mit, die mit eingebauter jQuery-Unterstützung noch erweitert werden können. Besonders interessant finde ich die Option, Tabellenzeilen mit unter Angabe der Klasse „zebra-striped“ farblich wechselnd anzulegen. Gerade dieser Task hat mich in der Vergangenheit schon mal ein bisschen Arbeit gekostet.

Bootstrap: Tabellen

Formulare

Formularelemente stellt Bootstrap in mobiltauglicher Optik vor. So lassen sich Formulare mit Schaltfläche versehen, die deutlich an von Mobilplattformen bekannte Buttons erinnern. Bootstrap ist so, wenn auch eingeschränkt, für das mobile Webdesign zu gebrauchen.

Anzeige
Anzeige

Bootstrap: Formularelemente

Bootstrap: Schaltflächen

Hinsichtlich der Navigation legt sich Bootstrap fest. Diese ist als Topbar, also als obere horizontale Navigationsleiste fest konzipiert. Möglich ist die Verwendung von Dropdown-Listen. Das Styling der Topbar ist flexibel und kann etwa so aussehen wie die neue Google+-Topbar, lässt sich aber auch in Karteireiterform oder mit den bekannten Rounded Buttons anlegen. Eine schicke Paginierung am Fuß der Seite sorgt für Übersichtlichkeit auf Seiten mit viel Content. Twitters eigener Service lässt grüßen!

Bootstrap: Navigation mit Topbar-Konzept

Bootstrap: Pagination

Fehlermeldungen

Erwähnenswert ist der Umgang Bootstraps mit Fehlern und Meldungen. In einer an Verkehrsampeln angelehnten, sehr sprechenden farblichen Kodierung unterrichtet Bootstrap über Fehler unterschiedlichen Schweregrads.

Bootstrap: Warnungen, Hinweise, Fehler

Popovers, Lightboxes und Tooltips

Ebenfalls aus dem Bereich mobilen Webdesigns entlehnt sind verschiedene Möglichkeiten, Interaktionen und Meldungen über Popovers zu realisieren. Interaktive Elemente kann der Designer über Lightboxes einbringen. Tooltips und Popover-Boxes bringen Zusatzinfos unter, ohne das übrige Design zu stören.

Anzeige
Anzeige

Bootstrap: Popovers, Lightboxes, Tooltips

Hier noch einmal alle verwendeten Screenshots im Überblick

Bootstrap: Popovers, Lightboxes, Tooltips

1 von 10

Was haltet ihr von Bootstrap? Werdet ihr dem Werkzeugkasten eine Chance geben oder seid ihr bereits mehr als ausgestattet mit anderen Werkzeugen?

Weiterführende Links zu aktuellen HTML5-, Twitter- und CSS-News auf t3n.de:

Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
9 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Heiko

Vielen Dank für den Tipp, ich werde es mal ausprobieren und erst dann kann ich darüber urteilen. Ich habe viele Werkzeuge im Einsatz aber es ist auch immer noch Platz für neue Tools :-)

Antworten
Mike

Darf ich mal eine Frage dazu stellen ?
Wie sieht es hier eigentlich bezüglich der Ladezeiten aus ? Werden nicht die kompletten Files geladen, auch wenn ich einzelne Classen nicht nutze ?

Heisst also arbeiten mit mehr Code und Ladezeiten als eigentlich benötigt wird ?

Antworten
Leopold

Petereit kann doch was gutes schreiben, „Hut ab“ endlich wieder einmal ein vorzüglicher und informativer Beitrag und nichts über ´“Gute Apples schlechte Apples“.
Weiter so!

Antworten
Marcus

Kein einziges Wort wie man so was verwendet.
Nur man kann, man kann, man kann.
Wenn man will kann man auch zum Mond fliegen.
Echtes Beispiel wäre besser gewesen.
So viel Mühe gegeben und doch nicht das erreicht was man wollte.

Antworten
Zip

@ Marcus
Dann lies Dich halt in das Projekt ein! Ein bisschen Selbständigkeit kann man ja noch erwarten, oder?

Antworten
Jörg Rech

Welche anderen CSS Toolkits inkl. forms, buttons, tables, grids, navigation, etc. gibt es noch? CSS Frameworks wie 960.gs bieten ja „nur“ das Grid, oder?

Antworten
Ich

Wieso wird im CSS https://github.com/twitter/bootstrap/blob/master/bootstrap.css mit festen Werten gearbeitet (z.B. font-size: 13px; line-height: 18px;)? Sollte man da nicht relative Werte verwenden um die Anforderungen bzgl Responsive Webdesign besser zu unterstützen?

Antworten
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige