Anpassen von Trends, Tools und Frameworks für Bootstrap-Layouts
Bootstrap ist derzeit der Nummer eins Frontend-Framework und leicht die schnellste Weg zum Erstellen von Layouts. Es gibt es schon seit Jahren und Drittentwickler haben sogar ihre eigenen Ressourcen online veröffentlicht. Diese Ressourcen reichen von freie themen zu detaillierte Plugins und Frameworks.
In diesem Artikel möchte ich eine Handvoll davon teilen Ressourcen und bewährte Verfahren für Entwickler, die mit Bootstrap weiter machen wollen.
All die Ressourcen in diesem Beitrag sind kostenlos, So können Sie sie verwenden, wie Sie es für richtig halten. Selbst wenn Sie Bootstrap noch nie verwendet haben, werden Sie hier sicherlich etwas finden, das Ihnen den Einstieg erleichtern wird.
Restyling mit Bootstrap
Die Standard-Bootstrap-Bibliothek wird mitgeliefert eigenes einzigartiges Design das sieht fantastisch aus. Es ist im Internet weithin bekannt und Sie können leicht erkennen, wann eine Website ist mit traditionellen Bootstrap-Elementen.
Aber du kannst es auch gestalten Sie diese Elemente selbst neu um den Code von Bootstrap als Grundlage für Ihr Layout zu verwenden.
Es gibt ein paar verschiedene Möglichkeiten du kannst das:
- Fügen Sie Ihr eigenes Stylesheet hinzu, um den Standard zu überschreiben.
- Passen Sie die Ausgabe von BootStrap an, sodass Sie nur die gewünschten Elemente erhalten.
- Kombinieren Sie mit Add-Ons und Plugins / Themes.
Die letzte Option ist die häufigste und ist einer der Gründe, warum Bootstrap so schnell gewachsen ist.
Zugegeben, ich bin auch ein großer Fan von ihnen Werkzeug anpassen denn es ist völlig kostenlos und gibt Ihnen so viel Kontrolle über welche Funktionen Sie verwenden möchten.
BootStrap 3/4 enthält unzählige Ressourcen, die von Drittanbieter-Entwicklern erstellt wurden. Dies ist also einfacher als je zuvor Erstellen Sie Ihre eigenen BootStrap-Layouts ohne viel Code zu schreiben.
Plugins und Add-Ons
Da Bootstrap über eine umfangreiche JavaScript-Bibliothek verfügt, ist dies leicht genug erweitern Sie die JavaScript-Funktionen. Die Entwickler haben dies sicherlich mit eigenen Plugins getan, von denen viele kostenlos online veröffentlicht wurden.
Das sind meine Favoriten, die alle Bootstrap nativ unterstützen. Viele von ihnen auf jQuery ausführen, Sie sind daher auch leicht anpassbar, wenn Sie sich in der jQuery-Bibliothek auskennen.
Formularprüfer
Zuerst ist mein Favorit Plugin für Formularvalidierung, Form Validator. Es läuft auf jQuery und unterstützt eine ganze Reihe von Frontend-Frameworks: Bootstrap, Foundation, Pure, UIKit und andere.
Sie können Hängen Sie manuell eine beliebige Anzahl von 51 Validatoren an zu jedem Formular auf Ihrer Website. Dies bedeutet, dass Besucher diese Validierungsanforderungen erfüllen müssen, bevor sie den Inhalt einreichen können.
Viele Kontaktformulare verwenden diese Validierer zu benötigen funktionierende E-Mail-Adressen. Sie können sie aber auch zum Hochladen von Bildern oder Passwörtern verwenden, so ziemlich alles, was Ihr Bootstrap-Herz begehrt.
Datumsauswahl
Datumsauswahl sind auch ein großer Schmerz, sich selbst zu kodieren. Viele Formulare verwenden nur Dropdown-Menüs für die Einstellungen für Tag / Monat / Jahr. Sie können dies jedoch auch verwenden Bootstrap-Datumsauswahl-Plugin um sich den Ärger zu ersparen.
Es ist vollständig Open Source und läuft auf der Bootstrap 3.x-Bibliothek. Sie werden es auch bemerken unterstützt sowohl das Datum und Zeit mit einem anderen jQuery-Plugin, Moment.js.
Insgesamt ist diese Bibliothek fantastisch, um eine Arbeitszeitauswahl zu aktivieren. Es hat viele Abhängigkeiten Zum Glück müssen Sie jedoch nicht viel Code schreiben, damit er funktioniert.
Sterne Bewertungen
Hier ist ein weiteres cooles Feature für Sterne-Bewertungen im Internet. Sie können Fügen Sie eine 1 bis 5-Sterne-Bewertung hinzu Überall auf Ihrer Website können Sie die Bootstrap-Bibliothek für JavaScript-Verhalten verwenden.
Wenn der Benutzer über diese Sterne fährt, ändert sich die Anzeige in die Bewertung, die auf der Cursorposition basiert. Mit einem Klick gibt der Nutzer seine Stimme ab und setzt eine Sternebewertung, einschließlich halber Sterne.
Dieses Plugin ist definitiv kompliziert einzurichten Weil du es kannst viele der Standardeinstellungen ändern für fortgeschrittenere Techniken. Sie können jedoch anhand einer einfachen Live-Demo feststellen, ob dieses Sternchen-Plugin zu Ihrer Website passt.
WATbar
Bootstrap kommt mit eigener Tabellenlayoutstil zur Anzeige tabellarischer Daten am Frontend. Aber mit dem WATable Plugin, Sie können Ihren Bootstrap-Tabellen eine ganze Reihe zusätzlicher Funktionen hinzufügen.
Dies ist eines der detailliertesten jQuery-Plugins auf dem Markt. Dies sind nur einige der Funktionen, die Sie hinzufügen können:
- Benutzerdefinierte Paginierung.
- Spaltensortierung.
- Datenfilterung.
- Tabellenanimationseffekte.
- Aktivieren Sie das Kontrollkästchen, um ganze Zeilen auszuwählen.
WATable wird als a bezeichnet Schweizer Taschenmesser von Table Plugins und ich muss dieser Beschreibung zustimmen. Die Tatsache, dass Bootstrap unterstützt, ist nur das Sahnehäubchen.
Dies waren einige meiner Lieblings-Plugins, aber es gibt so viele andere da draußen. Wenn Sie neugierig sind, können Sie auf dieser Seite noch mehr durchblättern.
Bootstrap-Frameworks
Bootstrap ist eigentlich ein großes Framework, da es Benutzern erlaubt Passen Sie die Standard-HTML- und CSS-Stile an mit ein paar Klassen.
Entwickler haben jedoch die Standard-BootStrap-Bibliothek verwendet und eigene Stile hinzugefügt, um noch größere Frameworks zu erstellen arbeiten wie themen, Sie müssen Bootstrap also nicht von Grund auf neu gestalten.
Zum Glück sind sie alle kostenlos und laufen auf den Standard-BootStrap-Klassen.
Bootflat
Das wohl bekannteste BootStrap-Framework ist Bootflat-Benutzeroberfläche Das folgt dem flachen Designtrend.
Es funktioniert mit alle standardmäßigen Bootstrap-Funktionen, einschließlich aller JavaScript-Komponenten. Die Hauptunterschiede sind mehr in Design und Struktur Wo Seitenelemente flache Farbschemata verwenden, um sich von den Farbverläufen von Bootstrap zu entfernen.
Bootflat wurde nicht überlastet Sie können dieses Framework auf jeder Zielseite oder Homepage hinzufügen, um Ihrer Website ein einzigartiges Aussehen zu verleihen.
Es ist zu 100% kostenlos und kommt sogar mit Farbwähler, So finden Sie flache Farbschemata, die zu Ihrem Layout passen.
Scheiße fertig
Diese überraschend stumpfes UI-Kit baut auch auf der Bootstrap 3-Bibliothek auf und ist auf GitHub kostenlos erhältlich.
Get Shit Done kommt vom Team von Creative Tim, wo einige erstklassige Ressourcen verkauft werden. Dieses spezifische UI-Kit verfügt über eine Pro-Version, die jedoch überhaupt nicht erforderlich ist.
Die Open-Source-Version hat für jeden mehr als genug und Sie können die Live-Demo um zu sehen, wie es im Browser aussieht.
Bootstrap-Materialdesign
Ein weiterer beliebter Designtrend ist Google Materialdesign. Dies ist eine Designsprache, die ursprünglich für Android-App-Designer entwickelt wurde, seitdem jedoch verfügbar ist im Web verbreiten und erhielt viel Unterstützung von UI / UX-Designern.
Dieses unglaubliche Bootstrap-Material-Framework verwendet die Materialdesign-Funktionen einen benutzerdefinierten Designstil erstellen aus der Bootstrap-Bibliothek heraus.
Standardmäßig ist es unterstützt alles in BootStrap 3 und wird derzeit überarbeitet, um auch Bootstrap 4 zu unterstützen. Weitere Informationen finden Sie auf der offiziellen Homepage mit Dokumentation und Demos.
Eine ähnliche Bibliothek, die Sie versuchen könnten, ist MDBootstrap, obwohl ich finde, dass es etwas schwieriger ist, damit zu arbeiten.
Bootplus
Google hat zwar die Materialdesign-Sprache erstellt, aber für viele ihrer Tools und Web-Apps gibt es auch eigene Stile.
Bootplus ahmt den Interface-Stil von Google+ nach, zusammen mit vielen Hilfedokumenten von Google, Google Drive und ähnlichen Web-Apps. Es verfügt über dieselben Funktionen wie Bootstrap, einschließlich Raster, Layoutstile, Elementstile und JavaScript-Komponenten.
Sie können sogar eine Demo auf der Website durchsehen, um die Unterschiede zwischen Bootplus und der ursprünglichen Bootstrap-Benutzeroberfläche. Für eine kostenlose Ressource ist Bootplus umfangreich und ideal für alle, die Googles Designtechniken mögen.
Tools und Ressourcen
Zum Schluss möchte ich in die vielen kostenlosen Tools eintauchen Anpassen und Erstellen von Bootstrap-Layouts.
Bei diesen Tools handelt es sich ausschließlich um Web-Apps, und viele davon sind sogar auf GitHub als Open Source verfügbar. Sie sparen Zeit und helfen Ihnen, unglaubliche Bootstrap-Layouts ohne viel Code zu entwerfen.
Live-Editor
Die Freiheit Bootstrap-Live-Editor ist eines der besten Werkzeuge für nicht-technische Designer. Wenn Sie nicht wissen, wie man codiert, können Sie sich auf diesen Bootstrap-Builder verlassen, um ein komplettes Layout von Grund auf zu erstellen.
Es läuft direkt in Ihrem Browser Sie können sogar aus vorgefertigten Vorlagen wählen, um loszulegen.
Optionen in der Seitenleiste lassen Sie fügen Sie bestimmte CSS-Werte hinzu wenn Sie einige Frontend-Codierungen kennen. Sie können die GUI jedoch auch verwenden, um Farben, Schriftarten, Größen und vieles mehr zu ändern.
Sobald du fertig bist, klicken “Holen Sie sich ein Thema” und Sie können die aktualisierten CSS-Stile in Ihr eigenes Projekt kopieren / einfügen. Super einfache Möglichkeit, Bootstrap neu zu formatieren, ohne dass alles neu erstellt werden muss.
Formularersteller
Dies kostenlos Bootstrap-Formularersteller ist ein Drag & Drop-Browser-Tool Auf diese Weise können Sie Bootstrap-Formulare von Grund auf erstellen.
Wieder es erfordert null Codierungskenntnisse und Sie haben vollen Zugriff auf alle Bootstrap 3-Elemente. Wählen Sie einfach das gewünschte Element aus und ziehen Sie es nach rechts in das linke Feld. Von hier aus können Sie alles vom Platzhaltertext bis zur CSS-Klasse ändern.
Bei weitem der coolste Form Builder, den ich je gesehen habe und er ist zu 100% kostenlos!
BootSwatchr
Ein anderes kostenloses Tool, das ich wirklich mag, ist BootSwatchr. Es basiert auf dem Bootstrap-Framework und lässt Sie Farben und Designstile aktualisieren, und das Gesamtlayout der Seite.
Was mir an dieser App gefällt, ist, wie es auch mit einem kommt Kostenlose Galerie mit vorgefertigten Stilen.
Sie können also ein Design herunterladen jemand anderes schon gemacht oder Sie können dies als Ausgangspunkt verwenden, um Ihr eigenes Thema anzupassen.
Vorwärts bewegen
Bootstrap wird immer beliebter, daher ist jetzt die beste Zeit dafür tauchen Sie in diesen Rahmen ein. Glücklicherweise gibt es Dutzende von Plugins, Frameworks und kostenlosen Tools, mit denen Sie den Entwicklungsprozess beschleunigen können.
In diesem Artikel habe ich nur die Spitze des Eisbergs gezeigt. Wenn Sie hier nichts sehen, ist es nützlich, zu Google zu gehen und zu sehen, was Sie sonst noch finden können.
