Desde su lanzamiento en 2013, Bootstrap ha revolucionado la forma en que los desarrolladores diseñan las páginas web. Bootstrap es un marco front-end popular que se utiliza para diseñar aplicaciones web receptivas.
Django utiliza estilos CSS prediseñados de Bootstrap y complementos de JavaScript para diseñar páginas web. Si bien reduce la molestia de diseñar, configurarlo en Django puede ser un desafío.
Aprendamos cómo instalar y configurar Bootstrap en una aplicación Django.
Cómo instalar Bootstrap
Hay dos formas de usar Bootstrap 5 en un proyecto Django. Puede instalarlo en su aplicación o hacer referencia a los archivos usando CDN de Bootstrap. Este proyecto utilizará el método anterior.
Antes de instalar Bootstrap, crear un proyecto Django y una aplicación llamada galería. La aplicación será una galería de fotos y usará Bootstrap para diseñar la barra de navegación de la aplicación.
A continuación, instale Bootstrap con el siguiente comando:
pipenv instalar Django-bootstrap5 # instala Bootstrap versión 5Verifique el Pipfile y confirme que hay una dependencia de Bootstrap 5. Ahora debe notificar al proyecto Django que está utilizando una dependencia de Bootstrap.
En el configuración.py archivo, registre Bootstrap como se muestra a continuación:
APLICACIONES_INSTALADAS = [
'galería',
'bootstrap5',
]Registrar Bootstrap en la configuración del proyecto conecta la dependencia django-bootstrap5 a su proyecto. Estará disponible para cualquier otra aplicación definida en el proyecto.
Aplicar Bootstrap en una plantilla
Primero, crea una carpeta llamada plantillas en la carpeta de tu aplicación. Dentro de esta carpeta, crea un base.html archivo y un barra de navegación.html archivo. Las plantillas contendrán archivos HTML que Bootstrap diseñará.
Si bien puede aplicar Bootstrap en el barra de navegación.html plantilla, el uso de un archivo base es convencional. A base.html El archivo contendrá todos los scripts y enlaces para aplicar a cualquier página. Reduce la complejidad de las plantillas individuales, lo que hace que su código sea más limpio y fácil de entender.
En el base.html archivo, incluya lo siguiente:
{% cargar arranque5 %}<!DOCTYPE html>
<idioma html="es">
<cabeza>
<juego de caracteres meta="UTF-8">
<meta http-equiv="Compatible con X-UA" contenido="IE = borde">
<metanombre="mirador" contenido="ancho = ancho del dispositivo, escala inicial = 1.0">
<título> Galería </title>{% estilos de bloque%}
{% bootstrap_css%}
{% bloque final %}
</head>
<cuerpo>
{% incluir 'barra de navegación.html' %}
{% contenido del bloque %} {% bloque final %}
{% secuencias de comandos de bloqueo%}
<secuencia de comandos src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integridad="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sa7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" origen cruzado ="anónimo">
</script>
{% bootstrap_javascript%}
</body>
</html>
Primero, cargue la dependencia bootstrap5. Luego crea dos estilos de bloque donde definirás todos los estilos para las plantillas. Incluir la {% bootstrap_css%} etiqueta de plantilla y un enlace al archivo Bootstrap CSS.
A continuación, cree un script de bloque que defina la funcionalidad de JavaScript.
Incluyendo el barra de navegación.html en el base.html lo vincula a Bootstrap.
Pruebe la configuración agregando estilos Bootstrap al barra de navegación.html plantilla:
<clase de navegación ="barra de navegación barra de navegación-expand-lg">
<clase div="contenedor-líquido">
<clase h2="marca" estilo="color verde">GALERÍA DE PICHA</h2><clase de botón ="alternar la barra de navegación" tipo ="botón" cambio de datos="colapsar" objetivo-datos="#navbarContenidoApoyado" aria-controles="navbarContenido compatible" aria-expandida="FALSO" etiqueta-aria="Navegación de palanca"><yo clase ="fas fa-bares"></i></button>
<clase div="colapsar la barra de navegación colapsar" identificación ="navbarContenido compatible">
<ul clase ="barra de navegación-nav ml-auto mb-2 mb-lg-0">
<li clase ="elemento de navegación"><una clase ="enlace de navegación enlace de navegación-1 activo" aria-actual="página" href="{% URL 'hogar' %}" estilo="color verde">Hogar</a></li>
<li clase ="elemento de navegación"><una clase ="enlace de navegación enlace de navegación-2" href="#galería" estilo="color verde">Galería</a</li>
</ul>
</div>
</div>
</nav>
Ahora, ejecute el servidor y verifique su sitio en un navegador. Debería ver el estilo que Bootstrap aplica a la barra de navegación.
¿Por qué usar Bootstrap en proyectos de Django?
En su mayoría, usará Django para el desarrollo de back-end, pero también puede crear increíbles páginas de front-end. Usar Bootstrap para dar estilo a las páginas frontales es una buena práctica para los principiantes de Django. Obtiene una comprensión profunda de Django cuando crea aplicaciones de pila completa.
Como cualquier marco front-end, puede usar clases Bootstrap con un proyecto Django para diseñar sus páginas web. Bootstrap 5 tiene mejores componentes y una hoja de estilo rápida. También ha mejorado la capacidad de respuesta para los dispositivos modernos.
¿Por qué no usar Bootstrap para diseñar y crear increíbles interfaces de usuario para sus proyectos de Django? Django te sorprenderá con sus capacidades en desarrollo web.
