apollo html bootstrap
Apollo Initial Release
Apollo est un modèle d'administration Bootstrap 5 réactif, propre et minimal.
Voir la démo | Télécharger le fichier ZIP
Si vous n'avez pas l'intention de travailler avec le code source du modèle (et cela signifie que vous ne le compilerez pas ou n'exécuterez pas le serveur de développement Webpack), vous n'avez rien à installer. Vous pouvez simplement accéder au dossier dist et commencer à modifier les fichiers.
La plupart des développeurs modifieront le code source et exécuteront également Webpack pour recompiler les fichiers modèles. Si tel est le cas, assurez-vous que Node.js est installé. Vous pouvez le télécharger ici
git clone https://github.com/PixelRocket-Shop/apollo-html-bootstrap.gitnpm install dans votre ligne de commande.npm start pour démarrer le serveur de développement Webpack.npm run build Le modèle se compose des pages suivantes :
Ainsi que les widgets suivants :
Pour réduire au minimum la répétition du code, nous avons utilisé Handles.js comme moteur de création de modèles et des partiels pour ajouter rapidement le même code à différentes pages. Nous utilisons également un plugin Handles pour les données JSON - cela nous permet d'utiliser des boucles et de générer un seul bloc de code HTML au lieu de répéter le même code HTML.
URL de démonstration
Veuillez noter qu'il s'agit uniquement d'un modèle HTML. Il ne se connecte pas à une base de données et ne fonctionnera pas automatiquement dans un système de gestion de contenu (Wordpress, etc.). Vous devrez intégrer notre code dans votre application.
? dist - Version générée du modèle. Allez ici si vous ne souhaitez pas travailler avec le code source du modèle. Mais attention : si vous personnalisez directement quelque chose dans ce dossier, puis recompilez ultérieurement le modèle à l'aide de webpack, à moins que vous ne déplaciez le dossier dist hors du modèle, vos modifications seront annulées.
? node_modules - Répertoire où NPM installe les dépendances. Vous ne verrez pas ce dossier tant que vous n'aurez pas terminé l'installation du modèle. Vous n'avez pas besoin de créer ce dossier.
? src - Code source du modèle. Allez ici pour personnaliser votre modèle.
? src/assets - Actifs de modèle tels que CSS, JS, images, etc.
? src/data - Modèle de fichiers de données JSON. Nous utilisons ces fichiers JSON pour faciliter votre travail d'insertion de contenu dans le modèle.
? src/html - Pages de modèles. Allez ici pour modifier les pages existantes ou ajouter de nouvelles pages.
? src/partials - Modèles partiels de guidon.
Guidon est un moteur de modèles qui nous permet de garder le code source de notre modèle aussi organisé et propre que possible. Il réduit la duplication de code et, grâce à l'utilisation de fonctions d'assistance, permet aux développeurs de modèles de générer très rapidement de grandes quantités de données avec un minimum de code. Vous pouvez en savoir plus ici.
Ouvrez le fichier suivant dans notre modèle : src/html/index.html.
Vers la ligne 21, vous verrez le code suivant :
{{> content/breadcrumbs }}
C'est un partiel de guidon. Ce code indique à guidon de regarder dans un dossier appelé content (situé dans le dossier partials), puis de trouver un fichier appelé fil d'Ariane et de l'insérer dans le fichier index.html lorsqu'il est compilé.
Il y a quelques remarques importantes concernant notre utilisation des partiels de guidon :
Le plugin Webpack Handles que nous utilisons est livré avec un utilitaire très pratique qui nous permet de transmettre des fichiers JSON comme données de modèle.
Veuillez accéder à : src/data. Voici où résident nos fichiers JSON de données de modèle. Vous pouvez modifier, supprimer ou ajouter le vôtre à ce dossier.
Tous les fichiers CSS/SASS sources du modèle sont conservés dans le dossier des ressources du modèle. Accédez à src/assets/scss. Ouvrez theme.scss avec votre éditeur.
Il s'agit du point d'entrée principal pour tous les autres fichiers SASS/CSS.
Pour créer une nouvelle page, accédez dans votre éditeur de code jusqu'à : src/html. Pour faciliter la mise en place du code HTML correct, clonez une page existante. Renommez le fichier nouvellement créé selon l'URL dont vous avez besoin. Et c'est tout. Vous êtes désormais libre d'ouvrir la nouvelle page avec votre éditeur de code, d'apporter vos modifications, puis d'enregistrer le fichier. Quittez le serveur de développement Webpack et redémarrez-le pour que la page apparaisse.
Bootstrap dispose déjà d'un site de documentation complet qui vous guidera dans la configuration et l'utilisation de toutes les fonctionnalités par défaut de Bootstrap. Bootstrap 5 est entièrement intégré au code source de notre modèle. Veuillez d'abord vous référer au site de documentation de Bootstrap pour connaître les fonctionnalités par défaut de Bootstrap : Visitez le site de documentation de Bootstrap.
Amorçage
graphique.js
Unsplash
Pixels
Pixabay
Simplebar.js
Vous pouvez trouver notre site Web ici ou nous envoyer un e-mail à [email protected]
