Bootstrap ist in der Webentwicklungsgemeinschaft einfach explodiert. Es wird immer Skeptiker und Hasser geben, aber im Großen und Ganzen war das Projekt ein überwältigender Erfolg und kann ständig an der Spitze der Forked- und Watched-Charts von GitHub gesehen werden.
Aufgrund des Ruhms von Bootstrap wurden von der Entwicklergemeinde viele verwandte Ressourcen bereitgestellt. Heute haben wir unsere Favoriten in einer Liste mit allen Informationen zusammengefasst, die Sie benötigen, um mit Bootstrap zu beginnen. Von Einführungs-Tutorials über Wireframing-Kits bis hin zu benutzerdefinierten Generatoren ist für jeden Bootstrap-Liebhaber etwas dabei.
Starten Sie Bootstrap
Start Bootstrap ist eine All-in-One-Plattform für alle Arten von Themen, Handbüchern und vorgefertigten kostenlosen und Premium-HTML-Vorlagen, die mit Bootstrap erstellt wurden.
Die Website enthält kostenlose vorgefertigte Vorlagen zum Erstellen von Landing-Pages, Websites für persönliche Lebensläufe, Portfolios und vieles mehr. Es gibt auch viele schnelle Layouts für Bootstrap-Vorlagen, die Sie herunterladen können, um schnell mit Ihren Webdesign-Projekten zu beginnen.
Darüber hinaus enthält Start Bootstrap eine umfangreiche Liste mit Bootstrap-Ressourcen, die Links zu allen Arten von Bootstrap-Ressourcen wie Plugins, visuellen Buildern, Framework-Integrationen usw. enthält.
CodyHouse
CodyHouse ist eine Bibliothek mit kostenlosen Webkomponenten, die aus HTML-, CSS- und JavaScript-Plugins bestehen. Die Bibliothek enthält wunderschön gestaltete Mega-Menüs, Portfolio-Vorlagen, Zahlungsintegrationen, Animationseffekte, Videovorlagen und andere Plugins.
Sie können diese Plugins und Vorlagen herunterladen, um sie problemlos in Ihre eigenen Bootstrap-Website-Designs zu integrieren und verschiedene Funktionen und Funktionen kostenlos zu integrieren.
Bootsnipp
Dies ist eine weitere Plattform, die eine riesige Sammlung von HTML- und CSS-Ressourcen und Plugins bietet. Die Besonderheit von Bootsnipp ist, dass diese Plattform auch Code-Snippets und Plugins enthält, die von anderen Web-Entwicklern und Designern erstellt wurden.
Bootsnipp enthält alle Arten von Codeausschnitten und -vorlagen, die den Webentwicklungsprozess erheblich vereinfachen, einschließlich Formularvorlagen, Schaltflächendesigns, Fortschrittsbalken, Galerievorlagen und mehr.
Sie können der Plattform als registrierter Benutzer beitreten und auch Ihre eigene Sammlung von Bootstrap-Ressourcen erstellen. Bootsnipp enthält auch Ressourcen für andere HTML-Frameworks wie Foundation und Semantic UI.
Codrops
Codrops ist ein Blog, das Tutorials und Blaupausen zum Erstellen eindeutiger Vorlagen und Elemente mit HTML und CSS enthält. Das Tolle an diesem Blog ist, dass Sie nicht nur die Vorlagen und Plugins kostenlos herunterladen können, sondern auch detailliert beschrieben wird, wie jede Vorlage erstellt wurde und wie Sie sie an Ihre Vorlieben anpassen können.
Codrops umfasst Ressourcen, Blaupausen, Vorlagen und Plugins, die Sie mit Bootstrap integrieren können, um trendige Portfolioabschnitte, Diashows, Videohintergründe, Animationen und vieles mehr zu erstellen.
Scherben
Shards ist ein modernes und minimalistisches UI-Kit, das mit Bootstrap 4 zum Erstellen beeindruckender, responsiver und mobile first Websites entwickelt wurde.
Wenn Sie dieses UI-Kit verwenden, müssen Sie keinen Code schreiben, um die Bootstrap-Elemente wie Schaltflächen und Menüs zu formatieren. Das UI-Kit kümmert sich für Sie darum.
Bootuhr
Diese Website enthält eine Sammlung benutzerdefinierter Designs für das Bootstrap-Framework in verschiedenen Farbschemen und Designs.
Die Liste umfasst ein Bootstrap-Thema im Weltraumbereich, ein Materialdesign-Thema, ein flaches Designdesign, dunkle Farbthemen und mehr. Sie können diese Designs herunterladen und verwenden, um das Aussehen und Verhalten Ihrer Bootstrap-Designs anzupassen, ohne den Code bearbeiten zu müssen.
Fontello
Fontello ist ein schicker Icon-Font-Generator, mit dem Sie eine riesige Sammlung von Icons aus mehreren beliebten Font-Icon-Packs durchsuchen können, darunter Font Awesome, Typicons, Brandico und mehr.
Icon-Fonts werden heutzutage in fast jedem Website-Design häufig verwendet. Sie können die Suchfunktion von Fontello verwenden, um schnell ein Font Pack mit einem Symbol für Ihre Suche zu finden, die Symbolgröße anzupassen und die Symbol-Schriftart herunterzuladen, die mit Ihren Bootstrap-Designs verwendet werden kann.
Fuel UX
Fuel UX wird hauptsächlich von fortgeschrittenen Webdesignern zum Aufladen des Bootstrap-Frameworks mit komplizierteren und leichteren JavaScript-Verbesserungen verwendet. Es verbessert Bootstrap mit erweiterten Funktionen und gibt Ihnen mehr Kontrolle über die Anpassung des Frameworks. Fuel UX ist auch Teil der Salesforce Marketing Cloud.
Typehead.js
Möchten Sie dem Suchfeld Ihrer Website eine großartige Google-ähnliche Funktion zur automatischen Vervollständigung hinzufügen? Anschließend können Sie diese leichtgewichtige JavaScript-Bibliothek herunterladen und in Ihre Bootstrap-Website integrieren, um das Suchfeld ganz einfach mit automatisch vervollständigten Suchausdrücken, automatischen Vorschlägen usw. zu erweitern.
Blueimp Galerie
Blueimp ist eine Sammlung von responsiven und berührungsfähigen Galerievorlagen, die Sie auf Ihrer Website verwenden können, um Bilder- und Videogalerien sowie Portfolios hinzuzufügen.
Das Plugin basiert auf der Swipe-JavaScript-Bibliothek, die als der präziseste Touch-Schieberegler bezeichnet wird. Blueimp erweitert die Funktionalität von Swipe, indem Sie zwischen drei verschiedenen Galerie-Modellen wählen können, einschließlich Bildkarussell, Videokarussell und einer Fotogalerie aus Leuchtkasten.
Bootstrap Expo
Dies ist eine Website, die eine Sammlung von wunderschönen Websites enthält, die mit Bootstrap erstellt wurden. Die Kollektion wird kuratiert von Mark Otto, dem Gründer von Bootstrap und dem Designdirektor von Github. Hier können Sie Inspiration für Ihr nächstes Projekt finden und sehen, welche erstaunlichen Dinge Sie mit Bootstrap erstellen können.
StyleBootstrap
Mit diesem Tool können Sie eine einfache Benutzeroberfläche verwenden, um verschiedene Aspekte von Bootstrap anzupassen. Der Unterschied hier ist, dass sich dieser hauptsächlich auf die visuellen, gestalterischen Aspekte konzentriert. Sie können Farben, Schriftarten, Ränder und vieles mehr einfach aufrufen und ändern.
Die App selbst ist auch visueller als der Generator von Twitter und ermöglicht Ihnen zu sehen, wie Ihre Stile aussehen werden, bevor Sie auf die Schaltfläche "Herunterladen" klicken.
Schöne Knöpfe für Bootstrap
Dies ist ein einfaches kleines Werkzeug, das nur eines tut: Es hilft Ihnen, gut aussehende Tasten für die Verwendung mit Twitter Bootstrap zu entwerfen. Es besteht nur aus vier Schiebereglern und einer Box zum Kopieren des resultierenden CSS, nicht weniger und nicht mehr. Es wird die Verwendung von Bootstrap nicht revolutionieren, aber es macht Spaß, damit zu spielen.
WrapBootstrap
? WrapBootstrap ist ein Marktplatz für Premium Bootstrap-Themen und -Vorlagen. Beeindrucken Sie Ihre Kunden und Besucher auf einem einzigen, soliden Fundament.?
Stellen Sie sich WrapBootstrap als ThemeForest für Bootstrap vor. Sie können benutzerdefinierte Bootstrap-Themen kaufen oder verkaufen. Wenn Sie es für dumm halten, Geld für ein Premium-Thema für eine kostenlose Ressource wie Bootstrap auszugeben, werfen Sie einen Blick auf den Erfolg des WordPress-Themamarkts. Standardmäßig sehen Bootstrap-Websites alle gleich aus, und schön gestaltete Designs können einige schöne Variationen hinzufügen und gleichzeitig die großartigen Vorteile von Bootstrap nutzen.
Mit Bootstrap gebaut
Built with Bootstrap ist ein inoffizieller Tumblr-Blog, der verschiedene Websites vorstellt, die, wie der Name offensichtlich impliziert, mit Bootstrap erstellt wurden. Dies ist eine fantastische Ressource für Designer, die mit Bootstrap arbeiten, da Sie so sehen können, was echte Entwickler mit dem Framework machen, was Sie dazu inspirieren wird, es selbst weiterzuentwickeln.
Wenn Sie der Meinung sind, dass Bootstrap nicht zu etwas anderem als einfachem Design führen kann, beweist diese Galerie, dass Sie Unrecht haben. Sites wie Provo Restaurant haben mich wirklich überrascht, da sie nicht wie ein Klon der Bootstrap-Beispielseiten aussehen.
Kostenlose Twitter Bootstrap Widgets Library
Axure ist eine leistungsstarke, professionelle Anwendung, mit der Sie komplexe Wireframes und interaktive Modelle erstellen können. Mit 589 US-Dollar pro Lizenz ist dies nur für ernsthafte Wireframers eine Lösung.
Wenn Sie mit Twitter Bootstrap und Axure arbeiten möchten, laden Sie diese großartige kostenlose Widget-Bibliothek herunter, die perfekt anpassbare Darstellungen der Bootstrap-Elemente enthält, die nahtlos in Axure funktionieren.
Bootstrap PSD
Ich weiß, was viele von euch denken? Feuerwerk? Axure? OmniGraffle? Gib mir einfach eine PSD!? Sie haben Glück, denn Repix Design hat sich die Zeit genommen, eine detaillierte, anpassbare PSD zu erstellen und zu vertreiben, die alle verschiedenen Komponenten von Bootstrap enthält.
Wenn Sie gerne Ihr Wireframing in Photoshop machen und ein Bootstrapper sind, ist dieser kostenlose Download ein Kinderspiel. Hol es dir jetzt.
Schrift fantastisch
Font Awesome ist wahrscheinlich meine liebste Twitter Bootstrap-Ressource. Es ist im Grunde nur eine Symbolschrift, so dass jeder es für jedes Projekt verwenden kann. Es wurde jedoch speziell entwickelt, um die visuelle Ästhetik von Bootstrap zu ergänzen.
Font Awesome ist kostenlos für den kommerziellen Gebrauch, Bildschirmleser-kompatibel und enthält satte 150 Icons (eine Zahl, die weiter wächst). Setzen Sie ein Lesezeichen für dieses, weil Sie es lieben werden.
Sass Twitter Bootstrap
Als die Twitter-Leute Bootstrap bauten, beschlossen sie, es mit LESS noch weiter zu verbessern, einem populären CSS-Präprozessor, der die Magie von Variablen, Mixins und viel mehr in CSS einbringt.
Die Sache ist, es gibt eine große Spaltung in der Präprozessorfan. Einige Leute lieben LESS, weil es einfach und unglaublich einfach zu bedienen ist, aber viele entscheiden sich für die leistungsfähigere Alternative: Sass. Wir können nicht die Twitter-Entwickler dafür verantwortlich machen, dass sie die LESS-Route gewählt haben, aber Sass-Fans brauchen auch etwas Liebe! Glücklicherweise hat John W. Long Bootstrap nach Sass portiert, so dass sich beide Seiten der Präprozessor-Debatte zumindest auf eine Sache einigen können: Bootstrap rockt.
Stylus-Fans müssen nicht beklagen, dass sie oft nicht erwähnt werden, es gibt auch einen Bootstrap-Stylus-Anschluss.
Colorpicker und Datepicker für Bootstrap
Hier sind ein paar zusätzliche Elemente, die Sie zu Bootstrap hinzufügen können. Beide sind kostenlos, gut dokumentiert und passen perfekt zur Bootstrap-Ästhetik.
Wie ergänzen Sie Bootstrap?
Nun, da Sie unsere Liste der fantastischen Bootstrap-Ressourcen gesehen haben, möchten wir von Ihnen hören. Senden Sie uns einen Tweet, um uns mitzuteilen, welche Ressourcen von Drittanbietern Sie in diesen Prozess aufgenommen haben.
Bootstrap
Bootstrap ist ein Open Source-Toolkit für die Entwicklung mit HTML, CSS und JS. In unserer Serie finden Sie Tipps und Ideen für die Arbeit mit Bootstrap sowie inspirierende Vorlagen, um schnell loszulegen!