Wie kann ich die CSS des Bootstrap-Administrationsbereichs anpassen?

Das Admin Panel wurde mit Bootstrap und TWIG Templates erstellt.
Das Design kann mit Bootstrap CSS nach Belieben angepasst werden.
Je nachdem, was Sie anpassen möchten, haben Sie mehrere Möglichkeiten.

Anpassen des Bootstrap Admin CSS-Themas mit dem Formular Allgemeine Einstellungen

Es werden mehr als 20 Dashboard-Templates angeboten.
Jedes Template ist von höchster Qualität und verfügt über ein modernes responsives Design.
Alle Themes werden von Bootswatch kostenlos zur Verfügung gestellt.

  1. Öffnen Sie generator/generator.php in Ihrem Browser
  2. Klicken Sie auf die Schaltfläche Allgemeine Einstellungen

    PHP CRUD General Settings button
  3. Wählen Sie Ihr bevorzugtes Bootstrap-Theme aus der Dropdown-Liste unter den über 20 verfügbaren Themes.
    Die Vorlage wird in Echtzeit auf das Bootstrap Admin-Dashboard angewendet, sobald Sie das Formular validieren. Sie können gerne verschiedene Vorlagen für Ihr Projekt testen.
  4. [optional] Bearbeiten Sie den Teil ADMIN SKIN

    Die im Paket enthaltenen Themes sind alle in responsivem Design und Premium-Qualität konzipiert, aber es steht Ihnen frei, Ihre eigenen Änderungen vorzunehmen. Die Hauptelemente des Dashboards lassen sich leicht an das Design Ihres Projekts anpassen (siehe Abbildung unten).

    Bootstrap template design customization with CSS
    Bootstrap-Vorlage Designanpassung mit CSS

Das Haupt-CSS von Bootstrap ist mit Color Variants (Codepen) aufgebaut.

Sie können CSS-Klassen mit Farbvarianten von 100 bis 900 und benutzerdefinierte Farben wie Teal, Purple, Cyan, ... verwenden.

Zum Beispiel: bg-blue-600bg-yellow-200bg-info-800

Nachfolgend finden Sie einige Beispiele für Themes mit benutzerdefinierten CSS-Elementen

  • Bootstrap Admin Panel Skin
  • Bootstrap Admin Panel Skin
  • Bootstrap Admin Panel Skin
  • Bootstrap Admin Panel Skin
  • Bootstrap Admin Panel Skin

Bootstrap Themes Vorschau

  • PHP CRUD Bootstrap Dashboard default
  • PHP CRUD Bootstrap Dashboard cerulean
  • PHP CRUD Bootstrap Dashboard cosmo
  • PHP CRUD Bootstrap Dashboard cyborg
  • PHP CRUD Bootstrap Dashboard darkly
  • PHP CRUD Bootstrap Dashboard flatly
  • PHP CRUD Bootstrap Dashboard journal
  • PHP CRUD Bootstrap Dashboard litera
  • PHP CRUD Bootstrap Dashboard lumen
  • PHP CRUD Bootstrap Dashboard lux
  • PHP CRUD Bootstrap Dashboard minty
  • PHP CRUD Bootstrap Dashboard morph
  • PHP CRUD Bootstrap Dashboard pulse
  • PHP CRUD Bootstrap Dashboard quartz
  • PHP CRUD Bootstrap Dashboard sandstone
  • PHP CRUD Bootstrap Dashboard simplex
  • PHP CRUD Bootstrap Dashboard slate
  • PHP CRUD Bootstrap Dashboard solar
  • PHP CRUD Bootstrap Dashboard spacelab
  • PHP CRUD Bootstrap Dashboard superhero
  • PHP CRUD Bootstrap Dashboard united
  • PHP CRUD Bootstrap Dashboard yeti
  • PHP CRUD Bootstrap Dashboard zephyr

Ändern des Hauptbildes der Kopfzeile, des Bildes der Seitenleiste
oder jedes andere CSS

  1. Erstellen Sie eine neue CSS-Datei in admin/assets/stylesheets/
  2. Öffnen Sie admin/inc/css-includes.php und fügen Sie einen Link zu Ihrer CSS-Datei hinzu:
    <link rel="stylesheet" href="<?php echo ADMIN_URL; ?>assets/stylesheets/custom.css" type="text/css" media="screen">
  3. Fügen Sie ein beliebiges CSS in Ihre Datei ein, um das ursprüngliche CSS der Vorlage zu überschreiben:
    body {
    font-family: Arial, Helvetica, sans-serif;
}

.page-header.has-cover {
    background: url(../images/backgrounds/custom-header-bg.jpg);
}

.sidebar .sidebar-user .category-content {
    background: url(../images/backgrounds/custom-user-bg.jpg) 50% no-repeat;
}

Anpassen des Bootstrap Admin Dashboard Themas mit SASS & Gulp

PHP CRUD Generator wurde mit SASS & Gulp erstellt.

Ein gebrauchsfertiges Paket zum Minifizieren und Kompilieren von SASS und Javascripts steht hier auf Github zum Download bereit: https://github.com/migliori/php-crud-generator-gulp
Mit diesen Quelldateien können Sie das CSS und/oder Javascript des Bootstrap Admin-Themas bearbeiten.

Zum Kompilieren von SASS und/oder Javascript:

Laden Sie das Github-Repository herunter oder klonen Sie es in das Stammverzeichnis Ihres Projekts und folgen Sie den Anweisungen in der README.

Die SASS Dateien

Alle SASS-Dateien einschließlich Bootstrap befinden sich in admin/assets/sass/ und werden in admin/assets/stylesheets/ kompiliert.

Die CSS-Dateien werden mit admin/inc/css-includes.php geladen.

Die Javascript-Dateien

Alle Javascript-Dateien werden in admin/assets/javascripts/ organisiert und im selben Ordner minimiert.

Das wichtigste Javascript ist admin/assets/javascripts/project.js.
Es lädt alle Projektabhängigkeiten mit Hilfe von LoadJs.

Voraussetzungen

Um das CSS Ihres Bootstrap Admin-Dashboards anzupassen, müssen Sie es vorher anpassen:

Das Bootstrap Admin Panel

PHP CRUD-Tutorial Hauptseite