Advertisement
  1. Web Design
  2. Bootstrap

15 funktionsreiche Bootstrap-Admin-Vorlagen

by
Read Time:13 minsLanguages:

German (Deutsch) translation by Federicco Ancie (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.

Bootstrap Admin templates on ThemeforestBootstrap Admin templates on ThemeforestBootstrap Admin templates on Themeforest
Bootstrap-Admin-Vorlagen auf Themeforest

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.

coinmarketcapcoinmarketcapcoinmarketcap
Das Dashboard von CoinMarketCap kommt mir vage bekannt vor...

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+:

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.

Pages - Admin Dashboard Template with Angular 6 Bootstrap 4 HTMLPages - Admin Dashboard Template with Angular 6 Bootstrap 4 HTMLPages - Admin Dashboard Template with Angular 6 Bootstrap 4 HTML
Seiten - Admin-Dashboard-Vorlage mit Angular 6, Bootstrap 4 und HTML

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.

Limitless - Responsive Web Application KitLimitless - Responsive Web Application KitLimitless - Responsive Web Application Kit
Limitless - Responsive Web Application Kit

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.

UniverseAdmin - Powerful Responsive Bootstrap 4 Admin Dashboard TemplateUniverseAdmin - Powerful Responsive Bootstrap 4 Admin Dashboard TemplateUniverseAdmin - Powerful Responsive Bootstrap 4 Admin Dashboard Template
UniverseAdmin - Leistungsstarke und responsive Bootstrap 4-Admin-Dashboard-Vorlage

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).

Fily - Responsive Bootstrap Admin TemplateFily - Responsive Bootstrap Admin TemplateFily - Responsive Bootstrap Admin Template
Fily - Responsive Bootstrap-Admin-Vorlage

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.

Mid - Creative Dashboard TemplateMid - Creative Dashboard TemplateMid - Creative Dashboard Template
Mid – Creative-Dashboard-Vorlage

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.

Gull - Angular 7 Bootstrap 4 Admin Dashboard TemplateGull - Angular 7 Bootstrap 4 Admin Dashboard TemplateGull - Angular 7 Bootstrap 4 Admin Dashboard Template
Gull - Angular 7+ Bootstrap 4 Admin Dashboard-Vorlage

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.

ProUI - Responsive Bootstrap Admin TemplateProUI - Responsive Bootstrap Admin TemplateProUI - Responsive Bootstrap Admin Template
ProUI - Responsive Bootstrap-Admin-Vorlage

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!

OneUI - Bootstrap 4 Admin Dashboard Template Laravel Starter KitOneUI - Bootstrap 4 Admin Dashboard Template Laravel Starter KitOneUI - Bootstrap 4 Admin Dashboard Template Laravel Starter Kit
OneUI - Bootstrap 4 Admin Dashboard-Vorlage und Laravel Starter Kit

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.

Porto Admin - Responsive HTML5 TemplatePorto Admin - Responsive HTML5 TemplatePorto Admin - Responsive HTML5 Template
Porto Admin - Responsive HTML5-Vorlage

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.

Ubold - Responsive Admin Dashboard Web UI Kit TemplateUbold - Responsive Admin Dashboard Web UI Kit TemplateUbold - Responsive Admin Dashboard Web UI Kit Template
Ubold - Responsive Admin-Dashboard und Web-UI-Kit-Vorlage

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.

Adminto - Responsive Admin Dashboard TemplateAdminto - Responsive Admin Dashboard TemplateAdminto - Responsive Admin Dashboard Template
Adminto - Responsive Admin- und Dashboard-Vorlage

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.

Able pro 70 Responsive Bootstrap 4 Angular 7 Admin TemplateAble pro 70 Responsive Bootstrap 4 Angular 7 Admin TemplateAble pro 70 Responsive Bootstrap 4 Angular 7 Admin Template
Able Pro 7.0 Responsive Bootstrap 4 & Angular 7 Admin-Vorlage

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!

Dashmix - Bootstrap 4 Admin Dashboard Template Laravel Starter KitDashmix - Bootstrap 4 Admin Dashboard Template Laravel Starter KitDashmix - Bootstrap 4 Admin Dashboard Template Laravel Starter Kit
Dashmix - Bootstrap 4 Admin Dashboard-Vorlage & Laravel Starter Kit

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.

Espire - Bootstrap 4 Admin Template Angular 7Espire - Bootstrap 4 Admin Template Angular 7Espire - Bootstrap 4 Admin Template Angular 7
Espire - Bootstrap 4 Admin-Vorlage + Angular 7

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.

JustDo - Responsive Bootstrap Admin TemplateJustDo - Responsive Bootstrap Admin TemplateJustDo - Responsive Bootstrap Admin Template
JustDo - Responsive Bootstrap-Admin-Vorlage
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.