() translation by (you can also view the original English article)
Wenn Sie etwas erstellen, das ein Backend oder ein Dashboard benötigt, ist Bootstrap eine der besten Möglichkeiten, Ihr Projekt zum Laufen zu bringen. Wir haben eine Liste von 15 Admin-Vorlagen zusammengestellt, um Ihren Bootstrap-Administrator noch einen Schritt weiter zu bringen und Stil und viele zusätzliche Funktionen hinzuzufügen.
Diese Liste wird regelmäßig aktualisiert, um sicherzustellen, dass die von uns angebotenen Vorlagen aktuell bleiben.
Warum benötigen Sie eine Admin-Vorlage?
Admin-Dashboards sind das Rückgrat vieler Websites oder Web-Apps. Wenn Sie eine dynamische Website haben, benötigen Sie eine Art Schnittstelle, um die darin enthaltenen Daten zu verwalten. Eine Admin-Vorlage bietet Ihnen die tabellarischen Ansichten, die Sie zum Anzeigen von Datensätzen benötigen, und die Formulare, die Sie für die Dateneingabe benötigen.
Oder es könnte sein, dass eine Admin-Vorlage die Grundlage Ihrer Website oder Web-App selbst bildet. Vielleicht erstellen Sie eine Art öffentliches Dashboard, das Live-Daten anzeigt. Wetter, Aktien- oder Währungswerte oder soziale Feeds. Bootstrap-Admin-Vorlagen sind dafür ideal.
Was macht eine gute Bootstrap-Admin-Vorlage aus?
Admin-Vorlagen sind der perfekte Weg, um zu zeigen, was Bootstrap kann! Sie erfordern logische Layouts, zugängliche und gut organisierte Informationen, sie müssen responsive reagieren, konsistent sein und Daten leicht verdaulich darstellen. Sie benötigen verschiedene Arten von Navigation, solide Typografie und sind die perfekte Möglichkeit, mit den meisten Komponenten von Bootstrap zu spielen.
Layout-Optionen
Abgesehen von diesen offensichtlichen Funktionen benötigen Admin-Vorlagen viele Optionen. Was für eine Admin-Dashboard-Situation funktioniert, funktioniert nicht unbedingt für eine andere. Vorlagen mit unterschiedlichen Layout-Optionen geben Ihnen viel eher das, was Sie wollen, oder inspirieren Sie, etwas auszuprobieren, an das Sie nicht gedacht haben.
Stellen Sie bei der Auswahl einer Admin-Vorlage sicher, dass es viele Seitenvariationen zum Ausprobieren gibt. Bootstrap bietet Ihnen die Möglichkeit, Dinge selbst zu erstellen, aber Seitenvariationen in einer Vorlage zeigen, dass der Autor die Extrameile gegangen ist.
Diagramme, Grafiken und Anzeige von Daten
Die Anzeige von Daten kann eine Herausforderung darstellen, und Bootstrap enthält standardmäßig keine Diagrammoptionen. Stattdessen nutzen die unten aufgeführten Admin-Vorlagen verschiedene JavaScript-Diagrammbibliotheken wie Chart.js, NVD3, Rickshaw und mehr. Sie machen das Anzeigen von Zahlen nicht nur funktional, sondern auch reizvoll!
Um mehr über die Arbeit mit JavaScript-Diagrammbibliotheken zu erfahren, werfen Sie einen Blick auf diese Sammlung von Tutorials zu Tuts+:
FusionChartsSo erstellen Sie ein SaaS-Dashboard in React With Google Sheets und FusionCharts.png)
.png)
DatenvisualisierungSo erstellen Sie ein Liniendiagramm mit Chart.js
DatenvisualisierungDatenvisualisierung mit DataTables.js und Highcharts.js
HTML und CSSEinfachere visuelle Daten im Browser mit Varianzdiagrammen
Stapeloptionen
Was Sie erstellen, kann sich auch auf Ihre Vorlagenwahl auswirken. Alle unten aufgeführten Vorlagen werden als rohe HTML-Dateien geliefert, aber viele von ihnen wurden als PHP-Projekte, Angular- oder AngularJS-Projekte und einige andere konfiguriert. Diese Flexibilität direkt nach dem Auspacken könnte genau das sein, wonach Sie suchen.
Funktionsreiche Bootstrap-Admin-Vorlagen
Hier ist ohne weiteres unsere Liste von 15 funktionsreichen Admin-Vorlagen basierend auf Bootstrap 4:
1. Pages
Pages ist eine sehr stilvolle Möglichkeit, die Liste zu beginnen. Es wird im HTML-Format oder mit Angular 5-Komponenten geliefert und bietet Ihnen Flexibilität und Leistung zusammen mit Extras von Drittanbietern wie ngx-Datentabellen, E-Charts und mehr.
2. Limitless
Limitless hat im Laufe der Jahre fast 10.000 Verkäufe verzeichnet, und nach der Aktualisierung auf Bootstrap 4 werden seine Verkäufe wahrscheinlich weiter steigen (insbesondere angesichts der Fünf-Sterne-Bewertung). Zur Auswahl stehen fünf verschiedene Layout-Varianten sowie jeweils eine Material-Design-Variante. Limitless wird mit einer Reihe von Starterdateien geliefert, die Sie auf den Weg bringen, und wenn Sie LESS mögen, werden Sie feststellen, dass alle Komponenten ihre eigene LESS-Datei für eine einfache Entwicklung haben. Wenn Sie Vanilla-CSS bevorzugen, können Sie stattdessen immer die CSS-Dateien verwenden.
3. UniversumAdmin
UniverseAdmin ist ein schönes, sauberes Theme mit sechs verschiedenen Farbschemata, einer großen Anzahl von Komponenten (von denen einige Bootstrap-Benutzern bekannt sind, andere zusätzlich) sowie dunklen und hellen Sidebar-Varianten. Der Autor Themesanytime bietet regelmäßige Updates, engagierten Support und eine detaillierte Dokumentation, die den Benutzern den Einstieg erleichtert.
4. Fily
Fily ist ein weiteres sauberes Theme zur Verbesserung von Bootstrap-Dashboards. Es wurde erst vor kurzem erstellt und ist ein Neuling in der Kategorie und bietet einen modernen, geradlinigen Geschmack. Es enthält dunkle und helle Versionen (etwas, das jede anständige Admin-Vorlage bieten sollte) sowie horizontale und vertikale Varianten. Unter den erweiterten Komponenten finden Sie Dragula (für Drag'n'Drop-UI), ChartJS, Google Charts, Sortable Tables und Colcade (ein leichtes Mauerwerk-Layout).
5. Mid
Ausgestattet mit zwei verschiedenen Dashboards und über fünfzig verschiedenen Seitenlayouts bietet Mid viele Optionen. Zu den zusätzlichen Extras gehören Owl Carousel, BarRating, Circle Progress und Datamap, und obwohl es keine Farbschema-Alternativen gibt, funktioniert Blau wirklich gut.
6. Gull
Gull ist ein helles Theme mit viel Kontrast, um den Fokus auf die Daten zu lenken. Es gibt viele Layoutoptionen sowie einige Farbvarianten, mit denen Sie die Farbe der Seitenleiste ändern können – die Designentscheidungen wurden jedoch größtenteils für Sie getroffen.
Die zusätzlichen Komponenten sind extrem leistungsstark, darunter Dinge wie ein Rechnungsersteller, eine Posteingangs-App, eine funktionale Chat-Schnittstelle und vieles mehr. Als zwei separate Produkte erhältlich, benötigen Sie diesen Link für die Angular 7-Version und diesen Link für die Laravel-Version.
7. ProUI
ProUI ist eine von mehreren Admin-Vorlagen in dieser Liste von Elite-Autor pixelcave. ProUI verbessert und erweitert Bootstrap und bietet fünfzehn Farbschemata, eine ganze Sammlung von Seitenlayouts und Widgets sowie elf PSDs, wenn Sie sie benötigen.
8. OneUI
OneUI ist ein weiteres Bootstrap-Theme von pixelcave, dieses enthält Laravel-Unterstützung und begleitende Sass-Dateien. In puncto Design kommt OneUI mit sechs Farbvarianten, vielen Layout-Beispielen und umfangreicher Dokumentation. Schauen Sie sich außerdem die raffinierten ChartJS-Beispiele im Screenshot unten an!
9. Porto-Admin
Porto wurde von uns bei Tuts+ im Laufe der Jahre oft erwähnt und ist zu einem Begriff geworden. Seine Schwesterprodukte, das Porto HTML5-Theme, WordPress-Theme, Drupal, Magento und Shopify-Versionen, haben Zehntausende von Verkäufen zwischen ihnen gesammelt, und die Admin-Version ist ebenfalls auf dem Weg. Porto Admin wurde auf Bootstrap 4 aktualisiert und bietet helle und dunkle Stile, Dashboards, eine Benutzeroberfläche für den Posteingang, Widgets und Extras, sodass Sie sich auf viele Dinge einlassen können.
10. Ubold
Ubold ist eine weitere Vorlage, um helle und dunkle Versionen anzubieten, außerdem können Sie die violette Version oder die Material Design-Version wählen (siehe unten). Zusammen ergeben diese über 2.000 Seitenvarianten, es gibt also viel zu beachten. Ubold enthält eine Landingpage-Vorlage (immer praktisch) und einige brillante Layouts wie ein Kanban-Board, einen Kalender, eine Kontaktseite und Projektkarten, die alle bereit sind, Ihre eigenen Funktionen hinzuzufügen. Im Download-Paket finden Sie auch einfache CRM- und E-Commerce-Anwendungen.
11. Adminto
Adminto macht großen Gebrauch von Leerraum und klaren Layouts und bietet eine gute Kombination aus dunklen und hellen Themenvarianten mit vielen Seitenbeispielen zum Spielen. Es enthält mehrere Diagrammbibliotheken, eine Benutzeroberfläche für den E-Mail-Posteingang, verschiebbare Blöcke, ein Aufgabenblock-Layout, eine Onboarding-Tour, eine Zeitleiste und viele weitere Spielzeuge.
12. Able Pro 7.0
Das erste, was Sie an Able Pro bemerken werden, ist das wirkungsvolle Farbschema. Die Farben sind wechselhaft und die verfügbaren Swatches machen alle einen starken Eindruck. Able Pro ist in HTML- und Angular-Versionen verfügbar und bietet eine Menge zusätzlicher Seitendemos, die Sie in vielen anderen Bootstrap-Admin-Vorlagen nicht sehen: eine Social-Media-Wall, eine Aufgabenliste, Todo-Karten und eine Jobbörse sind nur einige der ungewöhnlichere Beispiele.
13. Dashmix
Dies ist ein weiteres Beispiel des elitären Themeforest-Autors pixelcave. Dashmix ist eine vollständig responsive Bootstrap 4-Admin-Vorlage mit Laravel-Unterstützung. Version 1.5 wurde vor kurzem veröffentlicht (etwas, auf das alle Dashmix-Käufer Zugriff haben) mit einer Vielzahl von Ergänzungen, wie der Chat-Komponente, 3 neuen Farbschemata, Symbolen für Kontrollkästchen und Radios, einer Analyseseite und weiteren Authentifizierungsseiten – allein diese Funktionen sind es wert, genommen zu werden ein Blick!
14. Espire
Espire ist in Angular 7- und HTML-Varianten erhältlich, mit einer klaren Dokumentation, die den Einrichtungsprozess erklärt. In Bezug auf die Ästhetik bietet diese Admin-Vorlage helle und wirkungsvolle Hervorhebungsfarboptionen, hält aber den Großteil ihres Stils sauber, hell und offen.
15. JustDo
JustDo ist ein wirklich stilvolles Theme zum Abschluss. Seine scharfen Kanten und klaren Linien sorgen für einen sehr klaren Admin. Es bietet alle Hell-Dunkel-Optionen und Farbvarianten, die Sie erwarten, zusammen mit allen Layoutbeispielen und Extras, die Sie zur Inspiration benötigen. Die dunkle Variante im Screenshot unten ist sehr augenschonend und der optionale Heldenblock ist der perfekte Ort für wichtige Informationen, die Aufmerksamkeit erfordern.
Bootstrap lernen
Wir haben eine Menge Ressourcen zu Tuts+, die Ihnen dabei helfen, mehr über Bootstrap zu erfahren. Wenn Sie sich für eine der oben aufgeführten Vorlagen interessieren, aber nicht sicher sind, was Sie damit machen sollen, schauen Sie vorbei!
BootstrapBootstrap 4 ist da! Was gibt's Neues?
Bootstrap 4Kurzer Tipp: So passen Sie die Akkordeon-Komponente von Bootstrap 4 an
Bootstrap 4So fügen Sie Deep Linking zur Bootstrap 4 Tabs-Komponente hinzu
BootstrapNeuer Kurs: Vier Bootstrap 4-Projekte
Bootstrap 4So erstellen Sie schnell Layouts mit den responsiven Flexbox-Dienstprogrammen von Bootstrap 4
