apollo html bootstrap
Apollo Initial Release
Apollo es una plantilla de administración Bootstrap 5 limpia y con una capacidad de respuesta mínima.
Ver demostración | Descargar ZIP
Si no tiene la intención de trabajar con el código fuente de la plantilla (y eso significa que no lo compilará ni ejecutará el servidor de desarrollo Webpack), no necesita instalar nada. Simplemente puede navegar a la carpeta dist y comenzar a editar los archivos.
La mayoría de los desarrolladores editarán el código fuente y también ejecutarán Webpack para recompilar los archivos de plantilla. Si ese es el caso, asegúrese de tener Node.js instalado. Puedes descargarlo desde aquí.
git clone https://github.com/PixelRocket-Shop/apollo-html-bootstrap.gitnpm install en su línea de comando.npm start para iniciar Webpack devserver.npm run build La plantilla consta de las siguientes páginas:
Además de los siguientes widgets:
Para mantener la repetición de código al mínimo, hemos utilizado manillares.js como motor de plantillas y parciales para agregar rápidamente el mismo código a diferentes páginas. También utilizamos un complemento de manillar para datos JSON; esto nos permite usar bucles y generar un único bloque de código HTML en lugar de repetir el mismo HTML.
URL de demostración
Tenga en cuenta que esta es solo una plantilla HTML. No se conecta a una base de datos y no funcionará automáticamente en un sistema de gestión de contenidos (Wordpress, etc.). Deberá incorporar nuestro código en su aplicación.
? dist: versión generada de la plantilla. Vaya aquí si no desea trabajar con el código fuente de la plantilla. Pero tenga cuidado: si personaliza algo en esta carpeta directamente y luego vuelve a compilar la plantilla usando webpack, a menos que mueva la carpeta dist fuera de la plantilla, sus cambios se anularán.
? node_modules: directorio donde NPM instala dependencias. No verá esta carpeta hasta que complete la instalación de la plantilla. No es necesario crear esta carpeta.
? src: código fuente de la plantilla. Vaya aquí para personalizar su plantilla.
? src/assets: activos de plantilla como CSS, JS, imágenes, etc.
? src/data: archivos de datos JSON de plantilla. Usamos estos archivos JSON para facilitarle el trabajo de insertar contenido en la plantilla.
? src/html - Páginas de plantilla. Vaya aquí para editar páginas existentes o agregar páginas nuevas.
? src/partials - Plantillas parciales de manillares.
Manillar es un motor de plantillas que nos permite mantener el código fuente de nuestra plantilla lo más organizado y limpio posible. Reduce la duplicación de código y, mediante el uso de funciones auxiliares, permite a los desarrolladores de plantillas generar rápidamente grandes cantidades de datos con un código mínimo. Puedes leer más sobre esto aquí.
Abra el siguiente archivo en nuestra plantilla: src/html/index.html.
Alrededor de la línea 21 verá el siguiente código:
{{> content/breadcrumbs }}
Eso es un manillar parcial. Ese código le dice a Manillar que busque dentro de una carpeta llamada contenido (ubicada en la carpeta de parciales) y luego busque un archivo llamado ruta de navegación y lo inserte en el archivo index.html cuando se compila.
Hay algunas notas importantes sobre nuestro uso de los parciales de manillar:
El complemento Webpack Seats que utilizamos viene con una utilidad muy útil que nos permite pasar archivos JSON como datos de plantilla.
Navegue hasta: src/data. Aquí es donde residen nuestros archivos JSON de datos de plantilla. Puede editar, eliminar o agregar el suyo propio a esta carpeta.
Todos los archivos CSS/SASS de origen de la plantilla se guardan dentro de la carpeta de activos de la plantilla. Navegue a src/assets/scss. Abre theme.scss con tu editor.
Este es el principal punto de entrada para todos los demás archivos SASS/CSS.
Para crear una nueva página, navegue en su editor de código hasta: src/html. Para que sea más fácil implementar el HTML correcto, clone una página existente. Cambie el nombre del archivo recién creado a la URL que necesite. Y eso es todo. Ahora puede abrir la nueva página con su editor de código, realizar los cambios y luego guardar el archivo. Salga de Webpack devserver y reinícielo para que aparezca la página.
Bootstrap ya tiene un sitio de documentación completo que lo guiará en la configuración y el uso de todas las funciones predeterminadas de Bootstrap. Bootstrap 5 está completamente integrado al código fuente de nuestra plantilla. Consulte primero el sitio de documentación de Bootstrap para conocer las funciones predeterminadas de Bootstrap: Visite el sitio de documentación de Bootstrap
Oreja
gráfico.js
desempaquetar
Pexels
Pixabay
Barra simple.js
Puede encontrar nuestro sitio web aquí o puede enviarnos un correo electrónico a [email protected]
