Twitter Bootstrap 101 Einführung

Der Bootstrap von Twitter ist ein hervorragendes Set sorgfältig erstellter Elemente, Layouts und Javascript-Tools für die Benutzeroberfläche, die für Ihr nächstes Webdesign-Projekt frei verfügbar sind. Diese Videoserie soll Sie mit Bootstrap vertraut machen. Sie erhalten den gesamten Weg vom Herunterladen der Ressourcen bis zum Erstellen einer vollständigen Bootstrap-basierten Website.

Als Mark Otto (@mdo) und Jacob Thornton (@fat) im August 2011 Twitter Bootstrap auf der Welt veröffentlichten, erklärte ihre Ankündigung, welchen Wert das haben würde: Front-End-Entwickler zu befähigen, Projekte effizienter und effektiver zu starten.

Das Bootstrap-Stylesheet bietet ein einfach zu implementierendes 960-Raster für effizientes Layout sowie professionell erstellte Stile für Typografie, Navigation, Tabellen, Formulare, Schaltflächen und mehr. Bootstrap bietet eine Vielzahl von jQuery-Plug-Ins für Dropdown-Menüs, Registerkarten, modale Felder, QuickInfos, Warnmeldungen und mehr, um den Umgang mit JavaScript zu gewährleisten.

Zusammen bieten diese Oberflächenelemente alle Funktionen einer standardkonformen, benutzerfreundlichen und professionell erstellten HTML5-Website, die sofort einsatzbereit ist. Wie @mdo es in den ursprünglichen Beitrag steckte:

Bootstrap ist eine sehr einfache Methode, um schnelle, saubere und hochgradig verwendbare Anwendungen zu fördern. Sie bietet eine saubere und einheitliche Lösung für die häufigsten, alltäglichen Schnittstellenaufgaben, die Entwickler ansprechen.

Und doch steht einer weiteren Anpassung nichts im Wege. In den Worten von @mdo ist Twitter Bootstrap zwar "sehr umfangreich", bleibt aber "flexibel genug, um vielen einzigartigen Designanforderungen gerecht zu werden". Somit,

Sie können Bootstrap verwenden, um schnelle Prototypen zusammen zu werfen oder die Ausführung anspruchsvollerer Konstruktionen und größeren technischen Aufwand zu steuern.

Die liberalen Lizenzbedingungen unter der Apache 2.0-Lizenz bieten viel Gestaltungsfreiheit. Solange Sie den guten Leuten bei Twitter die gebührende Anerkennung für ihre Arbeit schenken, können Sie alles nach Herzenslust nehmen, anpassen und anpassen. Anschließend können Sie die resultierende Website für sich selbst oder für einen Kunden kostenlos starten oder aus Gewinngründen (Weitere Informationen finden Sie in diesem Diskussionsthread, in dem die Leute bei Twitter erklärt haben, wie Sie die Lizenz einhalten können, während Sie den Code anpassen.)

Angesichts des offensichtlichen Wertes des Angebots und der liberalen Lizenzbedingungen ist es kein Wunder, dass viele Entwickler damit begonnen haben, die Vorteile voll auszuschöpfen. Die Tumblr-Website "Built with Bootstrap" hat eine Reihe von von Bootstrap erstellten Websites dokumentiert, darunter:

  • CodeAcademy.com
  • CodeCards.com
  • Codesprint
  • Der Hub Cycle Shop
  • Konzerte im Clearing
  • Und sogar die neue Website von MSNBC: BreakingNews.com

In all diesen Beispielen sehen Sie ein sauberes Raster und eine Schnittstelle, die Professionalität bedeutet. Sie werden auch eine große Vielfalt an Details feststellen. Und Sie werden vielleicht beeindruckt sein, dass sich Entwickler aus angesehenen Outfits wie Code Academy und MSNBC für Bootstrap entschieden haben.

Wenn Sie so sind wie ich, werden Sie in Versuchung geraten, es selbst zu überprüfen - und Sie sollten es tun!

In der Tat habe ich es kürzlich überprüft. Lass mich dich herumführen.

In den beiden folgenden Videos werde ich Ihnen die Startseite von Twitter Bootstrap vorstellen. Lassen Sie sich den Code herunterladen. Anschließend klappen wir den Code auf und beginnen mit der Organisation unserer eigenen, von Bootstrap erstellten Website.


Holen Sie sich den Code

  • Gehen Sie zur Twitter Bootstrap-Homepage
  • Laden Sie Bootstrap v. 1.4.0 herunter (in diesem Lernprogramm verwendet).

Video 1: Einführung

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

Schritte in diesem Video:

  1. Besuchen Sie die Homepage der Online-Dokumentation von Bootstrap
  2. Einige mit Bootstrap erstellte Websites anzeigen
  3. Laden Sie den Code von Github herunter
  4. Entpacken Sie es

Video 2: Auspacken und organisieren

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

Schritte in diesem Video:

Wir machen Folgendes, aber nicht genau in dieser Reihenfolge:

  1. Organisieren Sie das CSS
  2. Organisieren Sie das JavaScript
  3. Beseitigen Sie nicht mehr benötigte Dateien (LESS weniger für einen anderen Tag)
  4. Behalten Sie die Apache 2.0-Lizenzdatei gemäß den Lizenzbedingungen von Twitter Bootstrap
  5. Bereiten Sie sich auf die Entwicklung unserer eigenen von Bootstrap erstellten Site vor

Nächste Schritte?

In zukünftigen Tutorials werde ich Sie mit den wichtigsten Funktionen von Bootstrap vertraut machen und Ihnen helfen, Bootstrap zu verwenden, um Ihr eigenes benutzerdefiniertes Repository von Bootstrap-Snippets zu erstellen. Dabei lernen wir Bootstrap kennen, sammeln Erfahrungen und passen es an und bereiten uns darauf vor, noch effizienter an unseren zukünftigen Bootstrap-Projekten zu arbeiten.