Accentsconagua

Twitter Bootstrap 101 Das Gitter

Web-Design
Share

Schauen wir uns heute das Rastersystem an, das mit Twitter Bootstrap geliefert wird, und schauen wir uns das Medienraster an, während wir dies tun. Dabei bauen wir uns ein schönes kleines Modell für eine Portfolio-Seite.

Hinweis: Das Grid, mit dem wir heute arbeiten, wird mit der zum Zeitpunkt der Veröffentlichung aktuellen Bootstrap-Version geliefert: 1.4.0.

Holen Sie sich den Code

  • Wir beginnen mit diesen Dateien, je nachdem, wo wir mit Teil 1 dieser Serie aufgehört haben.

Video 3: Das Gittersystem von Bootstrap

Ich möchte Sie in Bootstraps Gitter einführen, das auf dem 960-Rastersystem basiert. Ich möchte Sie dazu ermutigen, etwas zu lernen, indem Sie mit der hero.html-Datei mit dem Raster herumspielen.

Alternativ können Sie das Video herunterladen oder Webdesigntuts + Screencasts über iTunes abonnieren!

Erwähnte Themen

  • Das Clearfix wurde angewendet.Reihe, .Reihe: vor, und Reihe: nach basiert auf Nicolas Gallaghers Micro Clearfix-Hack.
  • Der Wahlschalter .Zeile> [Klasse * = "Span"] ist ein CSS 2.1-Attributselektor. Hier ist die W3C-Spezifikation. Siehe Chris Coyiers hilfreiche Einführung.

Video 4: Layoutseite erstellen

Lassen Sie uns jetzt eine eigene Seite für Ihr Portfolio erstellen. Wir werden zwei YouTube-Videos einbetten und diese mithilfe des Rastersystems abwechselnd anordnen. In diesem Zusammenhang werde ich erläutern, wie Sie die geeigneten Breiten für die Anpassung der Medien in das Raster berechnen.

Alternativ können Sie das Video herunterladen oder Webdesigntuts + Screencasts über iTunes abonnieren!

Video 5: Jetzt für ein Mediengitter

Lassen Sie uns unsere Portfolio-Seite weiterentwickeln. Wir werden die Klasse benutzen Mediengitter zwei Reihen von Miniaturbildern einrichten. Und ich stelle Ihnen die sehr hilfreiche Placehold-Image-Site vor: Placehold.it.

Alternativ können Sie das Video herunterladen oder Webdesigntuts + Screencasts über iTunes abonnieren!

Video 6: Zeit für einige benutzerdefinierte CSS

Mit unseren Inhalten können wir einige unserer benutzerdefinierten Stile hinzufügen. Lassen Sie uns unser eigenes Stylesheet verknüpfen, importieren Sie die Bootstrap-Styles und fügen Sie eigene hinzu. In diesem Schritt können Sie loslegen und Ihre eigene, von Bootstrap erstellte, eigene Seite erstellen.

Alternativ können Sie das Video herunterladen oder Webdesigntuts + Screencasts über iTunes abonnieren!

Nächste Schritte?

In der Entwicklungsgemeinschaft, die um das Projekt herum Gestalt angenommen hat, geht es spannend zu. In einigen Wochen (letzter Bericht) wird Twitter Bootstrap 2.0 auf der ganzen Welt veröffentlicht und enthält einige aufregende Neuerungen, einschließlich ein ansprechendes Gitter. Das ist sicherlich etwas, worauf Sie achten müssen.

In der Zwischenzeit bereiten wir uns darauf vor, die besten Möglichkeiten von Bootstrap kennenzulernen.

Web-Design
×