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:
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.
Alternativ können Sie das Video herunterladen oder Webdesigntuts + Screencasts über iTunes abonnieren!
Alternativ können Sie das Video herunterladen oder Webdesigntuts + Screencasts über iTunes abonnieren!
Wir machen Folgendes, aber nicht genau in dieser Reihenfolge:
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.