Vor kurzem veröffentlichten wir einen Artikel mit dem Titel 5 unglaublich nützliche Tools, die in Twitter Bootstrap integriert sind. Er hat einen Einblick in die grundlegende Struktur des Bootstrap-Frameworks von Twitter gegeben und Sie durch die Implementierung einiger wichtiger Komponenten geführt.
Twitter hat gerade Bootstrap 2.0 veröffentlicht, ein Update, das so umfangreich ist, dass es fast vollständig umgeschrieben wird. Es gibt einige neue Funktionen und Spielzeuge, mit denen man spielen kann, aber der eigentliche Headliner ist, dass der Rahmen jetzt voll ansprechend ist. Begleiten Sie uns, um zu erfahren, wie das neue Raster funktioniert und welche anderen coolen neuen Funktionen hinzugefügt wurden. Sie lernen, wie Sie Bootstrap in Ihren Projekten implementieren, und lernen einige sehr nützliche CSS-Techniken kennen, die Sie überall einsetzen können.
Demo
Wir sprechen heute über mehrere neue Bootstrap-Funktionen. Wenn Sie sie in Aktion sehen möchten, schauen Sie unten bei der Live-Demo vorbei.
Demo: Klicken Sie hier, um zu starten.
Implementierung des Responsive Grids
Der wichtigste Aspekt von Twitter Bootstrap ist natürlich, dass es jetzt vollständig reagiert. Wenn Sie die gesamte responsive Bewegung immer noch als eine dumme Modeerscheinung bezeichnen, in der Hoffnung, dass Sie letztendlich das Erlernen der erforderlichen Techniken überspringen können, haben Sie kein Glück. Responsive Design ist auf dem besten Weg, eine Standardpraxis zu sein, statt ein "schönes zu haben". Erweiterung. Es ist wirklich nicht so kompliziert, wie Sie vielleicht denken, und Tools wie Bootstrap machen es noch einfacher.
Das neue responsive Raster ist zwölf Spalten breit und funktioniert ähnlich wie das sechzehn Spaltenraster von Bootstrap 1. Wenn Sie es jemals verwendet haben irgendein Netzsystem vorher, dann werden Sie sich wie zu Hause fühlen, da hier nichts zu erschütternde Erde ist.
Um das Raster zu implementieren, befolgen Sie die gleichen Schritte wie immer. Beginnen Sie mit einem Container div, erstellen Sie dann eine Zeile und füllen Sie diese Zeile mit span (x) divs. Da es sich um ein Zwölfspaltenraster handelt, müssen Sie nur sicherstellen, dass die Zahlen in einer Reihe zwölf ergeben. Versuchen Sie es mit vier? Span3? divs, ein? span9? mit einem? span3? oder auch nur eine gerade nach oben? span12? den ganzen Weg hinüber gehen. Hier ein kurzes Beispiel:
Das obige repräsentiert ein statisches Gitter. Es reagiert immer noch, reagiert nicht auf jede Änderung der Größe des Browserfensters, sondern nur auf die von Medienabfragen festgelegten Werte. Wenn Sie ein Fluidgitter wünschen, verwenden Sie die Fluidklassen:
Die Medienabfragen
Die enthaltenen Medienanfragen sind unten aufgeführt. Beginnen Sie mit Mobile und arbeiten Sie sich nach oben. Im Grunde genommen geht jede von ihnen in die Größe der Spalten über, um das Layout umzuwandeln, sodass es für das Ansichtsfenster besser geeignet ist.
- @media (max-Breite: 480px)
- @media (max-Breite: 768px)
- @media (min-Breite: 768px) und (max-Breite: 980px)
- @media (max-Breite: 980px)
- @media (min-width: 980px)
- @media (min-Breite: 1200px)
Die erste Medienabfrage (480 Pixel und darunter) zielt auf Smartphones ab und teilt alles auf eine einzige Spalte mit 100% Breite auf. Dies mag für Ihren Geschmack etwas zu stark vereinfacht sein, aber das Schöne an Frameworks wie diesem ist, dass es sich nur um Vorschläge handelt, die Sie nach Herzenslust anpassen können.
Die nächste Medienabfrage richtet sich an Portrait-Tablets mit einer Bandbreite von 480px bis 768px, dann bis zu 980px für Querformat-Tablets und bis zu Standard-Desktops und großen Displays.
Für das statische Gitter beginnen einzelne Spalten bei 70 Pixel Breite, springen dann auf 60 Pixel herunter und schließlich auf 42 Pixel, bevor sie für Mobilgeräte 100% breit werden.
Tipp: Holen Sie sich den richtigen Download
Interessanterweise sind die Medienabfragen nicht im Standarddownload von der Bootstrap-Homepage enthalten. Wenn Sie sie möchten, müssen Sie den GitHub Download herunterladen.
Nizza Attributwertauswahl Verwendung
Wenn Sie den Code für die Medienabfragen auschecken, werden Sie vielleicht ein paar Tricks lernen. Zum Beispiel haben die Entwickler ein solides Beispiel des "Arbitrary Substring Attribute Value Selector" implementiert, über das ich in CSS Selectors geschrieben habe: Just the Tricky Bits.
Bootstrap hat viele Klassen, die das Wort "span" verwenden. (span1, span2 usw.) und anstatt sie einzeln auszugeben, erfasst der ASAVS sie alle in einem Zug mit diesem fantastischen Code: [class * =? span?]. Dieser Selector durchsucht das HTML und findet etwas mit "span". im Klassennamen, unabhängig davon, was folgt. Sogar eine Klasse von? Spansomethingtotallyrace? wäre gezielt.
Inhaltsumwandlung
Obwohl das Kernstück der Medienabfragen darin besteht, die Spalten neu zu fließen, ist hier auch viel mehr los. Die Entwickler haben sich tatsächlich die Zeit genommen, viele der Elemente so umzustrukturieren, dass sie sich ändern, wenn sich die Größe des Ansichtsfensters ändert.
Zum Beispiel ändern sich die Navigationsmenüs ziemlich drastisch, wenn Sie auf einem Tablet oder Smartphone anzeigen. Testen Sie die Bootstrap-Homepage, um ein Beispiel anzuzeigen. Bei voller Größe ist das Navigationsmenü eine einfache horizontale Liste von Textlinks.
Auf einem Tablet oder Smartphone wird der Text jedoch gelöscht und durch eine Schaltfläche oben rechts auf dem Bildschirm ersetzt.
Durch Tippen auf die Schaltfläche wird der neue Menübereich erweitert. Hier haben wir eine vertikale Liste von Links, die größere anzeigbare Bereiche zulassen.
Responsive Bilder
Nicht nur das Navigationsmenü ändert sich mit den Ansichtsfenstern. Viele andere Objekte tun dies ebenso, von einfachen Schaltflächen bis zu komplizierteren Objekten wie Bildkarussellen. Um die automatisch skalierten Bilder abzurufen, hat Twitter die "max-width: 100%;" Route. Hier ist der vollständige Ausschnitt:
Dies macht es so, dass, da sich diese Spalten und Zeilen selbst ändern, die Bildbreite maximal an der Breite der übergeordneten Spalte liegt. Beachten Sie auch den? -Ms-Interpolationsmodus: bikubisch ;? Linie. Dies ist eine ziemlich undurchsichtige Eigenschaft, die die Bildgrößenanpassung im IE wesentlich verbessert.
Mehr Neues
Die responsive Funktionalität ist definitiv die coolste neue Funktion von Bootstrap, aber hier gibt es noch viel mehr zu entdecken. Hier sind drei meiner Lieblingsartikel:
Fortschrittsbalken
Bootstrap verfügt jetzt über Browser-kompatible Fortschrittsbalken, die sehr einfach zu implementieren sind. Fügen Sie einfach einen Ausschnitt wie den folgenden ein:
Die Breite: 30%? Hier ähnelt der Abstand entlang der Fortschrittsleiste. Wenn Sie die Hälfte zur Hälfte ändern möchten, geben Sie einfach 50% ein.
Schaltflächengruppen
Schaltflächengruppen sind ein bisschen wie Breadcrumb-Navigation, da sie einzelne Schaltflächen sind, die alle überlagert sind. Normalerweise braucht man dazu einen guten Code. Sie müssen nicht nur das allgemeine Schaltflächenthema gestalten, sondern auch die erste und letzte Schaltfläche ändern.
Mit Bootstrap benötigen Sie lediglich einige Links zum? Btn? Klasse innerhalb einer? BTN-Gruppe? div.
Karussells
Die alten Bootstrap-JavaScript-Plugins wurden überarbeitet und einige komplett neue hinzugefügt. Mein Favorit ist das neue jQuery-Karussell. Der nachstehende Beispielcode kann recht umfangreich erscheinen, aber wenn Sie ihn aufteilen, ist das ziemlich einfach. Der Inhalt der Folie wird in das? .Item? div und eine optionale Beschriftung kann hinzugefügt werden. Die Navigation wird am Ende eingefügt.
Fazit
Wenn eine große Firma wie Twitter eine kostenlose Ressource veröffentlicht, ist es ein Glücksspiel, Ihren Workflow tatsächlich zu gestalten. Ein Hauptproblem ist, dass Sie nicht sicher wissen können, wie gut es auf Dauer gehalten wird. Glücklicherweise scheint Bootstrap vorerst bei Twitter eine ziemlich hohe Priorität zu haben. Die neue Version ist enorm aufwendig und zeigt es wirklich. Dies wird zu einer extrem umfangreichen Heizplatte.
Ich bin persönlich begeistert, dass Twitter es als notwendig erachtet, Bootstrap als Antwort zu nehmen. Dies wird auf jeden Fall dazu beitragen, dass Responsive Design nicht nur für alle gängigen Browser, sondern auch für alle wichtigen Geräte geeignet ist.
Hinterlassen Sie einen Kommentar und lassen Sie uns wissen, was Sie von Bootstrap 2.0 halten. Hast du die erste Version ausprobiert? Was sind deine Lieblingsverbesserungen?