kavlan html bootstrap
1.0.0
Kavlan ist die perfekte dunkle Admin-Panel-Vorlage, um die Navigation und Wartung Ihres Verwaltungssystems zum Kinderspiel zu machen. Kavlan ist übersichtlich, reaktionsschnell und benutzerfreundlich und bietet eine Benutzererfahrung, die Ihnen bei der Erstellung einer erfolgreichen Benutzeroberfläche hilft. Und vor allem ist es kostenlos!
Demo ansehen | ZIP herunterladen
Anforderungen
Schnellstart
Vorlagenseiten
Demo-Link
Hauptfunktionen der Vorlage
Struktur der Vorlagendatei
Lenker
Vorlage für JSON-Daten
Passen Sie Vorlagenstile an
Neue Seiten erstellen
Bootstrap-Dokumentation
Credits
Kontaktieren Sie uns
Wenn Sie nicht beabsichtigen, mit dem Quellcode der Vorlage zu arbeiten (und das bedeutet, dass Sie ihn nicht kompilieren oder den Webpack-Entwicklungsserver ausführen), müssen Sie nichts installieren. Sie können einfach zum dist-Ordner navigieren und mit der Bearbeitung der Dateien beginnen.
Die meisten Entwickler bearbeiten den Quellcode und führen außerdem Webpack aus, um die Vorlagendateien neu zu kompilieren. Wenn dies der Fall ist, stellen Sie sicher, dass Node.js installiert ist. Sie können es hier herunterladen
Laden Sie die neueste Version herunter ODER klonen Sie das Repo: git clone https://github.com/PixelRocket-Shop/kavlan-html-bootstrap.git
Installieren Sie Node.js, falls Sie es noch nicht auf Ihrem System haben.
Öffnen Sie das Projektstammverzeichnis in Ihrer Befehlszeile.
Führen Sie npm install in Ihrer Befehlszeile aus.
Führen Sie npm start aus, um den Webpack-Devserver zu starten.
Wenn Sie die Vorlagendateien (die im Ordner „dist“ ausgegeben werden) neu kompilieren möchten, führen Sie npm run build aus
Die Vorlage besteht aus 6 Seiten:
Armaturenbrett
Anmeldeseite
Registrierungsseite
Seite „Passwort vergessen“.
404 Seite
Leere Seite
Um Codewiederholungen auf ein Minimum zu beschränken, haben wir Handlers.js als Template-Engine und Partials verwendet, um den gleichen Code schnell zu verschiedenen Seiten hinzuzufügen. Wir verwenden auch ein Handlers-Plugin für JSON-Daten – dies ermöglicht uns die Verwendung von Schleifen und die Ausgabe eines einzelnen HTML-Codeblocks, anstatt denselben HTML-Code zu wiederholen.
Demo-URL
Bitte beachten Sie, dass es sich hierbei lediglich um eine HTML-Vorlage handelt. Es stellt keine Verbindung zu einer Datenbank her und funktioniert nicht automatisch in einem Content-Management-System (Wordpress usw.). Sie müssen unseren Code in Ihre Anwendung integrieren.
Chart.js-Integration mit 3 verschiedenen Diagrammtypen
Gebaut mit Bootstrap 5
Vollständig reaktionsfähig
Komponente „Letzte Bestellungen“.
Reduzierbare Seitenleiste (wird automatisch minimiert, wenn die Größe des Browsers geändert wird)
Benachrichtigungskomponente
Avatar-Komponente
Anmelde-/Registrierungskomponente
dist – Generierte Version der Vorlage. Klicken Sie hier, wenn Sie nicht mit dem Quellcode der Vorlage arbeiten möchten. Aber seien Sie gewarnt: Wenn Sie etwas in diesem Ordner direkt anpassen und die Vorlage später mit Webpack neu kompilieren, werden Ihre Änderungen überschrieben, es sei denn, Sie verschieben den dist-Ordner aus der Vorlage.
node_modules – Verzeichnis, in dem NPM Abhängigkeiten installiert. Dieser Ordner wird erst angezeigt, wenn Sie die Installation der Vorlage abgeschlossen haben. Sie müssen diesen Ordner nicht erstellen.
src – Vorlagenquellcode. Gehen Sie hier, um Ihre Vorlage anzupassen.
src/assets – Vorlagen-Assets wie CSS, JS, Bilder usw.
src/data – Vorlage für JSON-Datendateien. Wir verwenden diese JSON-Dateien, um Ihnen das Einfügen von Inhalten in die Vorlage zu erleichtern.
src/html – Vorlagenseiten. Gehen Sie hierher, um bestehende Seiten zu bearbeiten oder neue Seiten hinzuzufügen.
src/partials – Teilvorlagen für Lenker.
Lenker ist eine Template-Engine, die es uns ermöglicht, unseren Template-Quellcode so organisiert und sauber wie möglich zu halten. Es reduziert die Codeduplizierung und ermöglicht Vorlagenentwicklern durch die Verwendung von Hilfsfunktionen die sehr schnelle Ausgabe großer Datenmengen mit minimalem Code. Mehr darüber können Sie hier lesen.
Öffnen Sie die folgende Datei in unserer Vorlage: src/html/index.html.
In Zeile 21 sehen Sie den folgenden Code:
{{> content/breadcrumbs }}Das ist ein Teil des Lenkers. Dieser Code weist Handlers an, in einen Ordner namens „content“ (im Ordner „Partials“) zu schauen und dann eine Datei namens „Breadcrumbs“ zu finden und diese beim Kompilieren in die Datei „index.html“ einzufügen.
Es gibt ein paar wichtige Hinweise zu unserer Verwendung von Lenkerteilteilen:
Alle unsere Partials werden in src/partials gespeichert. Platzieren Sie Teiltöne nirgendwo anders.
Wir verwenden .html als Teildateierweiterung. Wir haben auch .svg als gültige Teildateierweiterung hinzugefügt.
Wenn Sie Ordner innerhalb von Ordnern in Ihrem Teilordner haben, verweisen Sie nur auf den Ordner, in dem sich der Teil befindet. Daher würde „partials/header/navbars/navbar.html“ als „navbars/navbar“ referenziert.
Geben Sie die Teildateierweiterung nicht an. Beachten Sie im obigen Beispiel, dass wir „breadcrumbs“ und nicht „breadcrumbs.html“ ausgeben.
Das von uns verwendete Webpack-Lenkrad-Plugin verfügt über ein sehr praktisches Dienstprogramm, mit dem wir JSON-Dateien als Vorlagendaten übergeben können.
Bitte navigieren Sie zu: src/data. Hier befinden sich unsere JSON-Vorlagendatendateien. Sie können diesen Ordner bearbeiten, entfernen oder eigene hinzufügen.
Alle Quell-CSS/SASS-Dateien der Vorlage werden im Assets-Ordner der Vorlage gespeichert. Navigieren Sie zu src/assets/scss. Öffnen Sie theme.scss mit Ihrem Editor.
Dies ist der Haupteinstiegspunkt für alle anderen SASS/CSS-Dateien.
Um eine neue Seite zu erstellen, navigieren Sie in Ihrem Code-Editor zu: src/html. Klonen Sie eine vorhandene Seite, um das Einbinden des richtigen HTML-Codes zu erleichtern. Benennen Sie die neu erstellte Datei in die gewünschte URL um. Und das ist es. Sie können nun die neue Seite mit Ihrem Code-Editor öffnen, Ihre Änderungen vornehmen und dann die Datei speichern. Beenden Sie den Webpack-Devserver und starten Sie ihn neu, damit die Seite angezeigt wird.
Bootstrap verfügt bereits über eine umfassende Dokumentationsseite, die Sie bei der Einrichtung und Verwendung aller Standardfunktionen von Bootstrap unterstützt. Bootstrap 5 ist vollständig in den Quellcode unserer Vorlage integriert. Informationen zu den standardmäßigen Bootstrap-Funktionen finden Sie zunächst auf der Dokumentationsseite von Bootstrap: Besuchen Sie die Dokumentationsseite von Bootstrap
Bootstrap
chart.js
Unsplash
Pexels
Pixabay
Simplebar.js
Sie finden unsere Website hier oder senden Sie uns eine E-Mail an [email protected]
