Django Bootstrap

El objetivo principal de esta breve explicación es aprender cómo agregar Bootstrap al proyecto en Django, y también veremos algunas configuraciones sobre afirmaciones estáticas.

Configurar Bootstrap en Django

Empecemos. Tenemos un proyecto llamado demosite y una sola aplicación llamada blog, pero el proyecto único puede tener varias aplicaciones. Ahora veremos cómo conectar activos estáticos a nuestro proyecto y agregaremos elementos estáticos específicos de la aplicación.

Agregaremos un directorio static en la aplicación blog para que sean visibles y accesibles solo desde esta aplicación. A veces, desea agregar algunos estilos globales o activos globales, imágenes que deben ser accesibles para todas sus aplicaciones.

El primer paso es agregar Bootstrap a nuestra aplicación blog; abra el navegador, vaya a los documentos de Bootstrap 5 y presione el botón de descarga. Después de la descarga, debemos extraer el archivo y copiar estas carpetas JS y CSS de la carpeta extraída.

Hemos creado una carpeta static dentro de la aplicación, y agregaremos otra carpeta dentro de esta carpeta static llamada blog. Podemos ver que tenemos un directorio /static/blog, y no es necesario que coloque sus archivos directamente en static porque se recomienda agregar una carpeta adicional dentro de él.

Si se pregunta por qué sucede esto, aunque técnicamente podríamos colocar todos nuestros estilos directamente en esta carpeta static en lugar de crear otra carpeta blog, sería una mala idea. Django elegirá el primer archivo estático.

Ahora pegaremos las carpetas copiadas dentro de la carpeta blog. Encuentra cuyo nombre coincide, y si tenemos el archivo estático con el mismo nombre en una aplicación diferente, Django no podría distinguir entre ellos.

En palabras más simples, si tenemos archivos como estilo CSS y lo ponemos en static, y también tenemos este archivo en otras aplicaciones o proyectos, Django no podrá reconocer qué estilo CSS nos gustaría cargar. Esto es bueno para agregar un nombre extra para distinguir cuál queremos cargar.

Vamos a crear una carpeta llamada template dentro de la aplicación, y dentro de esta carpeta, creamos un archivo index.html. En este archivo, tenemos que decirle a Django que cargue nuestra variable estática usando este código Jinja {% load static %} y usemos la etiqueta <link/> para vincular nuestros archivos CSS de Bootstrap y escribir el siguiente código.

Antes de ejecutar el proyecto, asegúrese de haber creado una función para la página de índice y establezca la URL en el archivo urls.py. Estos códigos son para demostración, y en su proyecto, el código puede cambiarse.

Ejecutemos el servidor; si abre Herramientas de desarrollo, navegue hasta Red, elija CSS y actualice la página, vemos que Bootstrap se ha cargado.

Agreguemos el componente card, copiemos su código de Bootstrap y péguelo dentro de nuestro archivo index.html.

Tenemos nuestra card aquí, y nos falta una imagen, así que ahora agregaremos esta imagen, pero esta vez le mostraremos cómo agregar activos estáticos globales.

Si queremos que una imagen esté disponible para otras aplicaciones, creamos una carpeta static en nuestro directorio root y creamos una carpeta image dentro de la carpeta static. Guardemos una imagen dentro de la carpeta image.

Ahora tenemos que ir a nuestro archivo settings.py, hacer scroll hacia abajo, y ver que ya tenemos STATIC_URL y añadir una variable más, STATICFILES_DIRS. Este comando nos permite especificar más directorios static, estamos usando solo uno, pero a veces quieres tener más.

Pasaremos una ruta de imagen al atributo src dentro del archivo index.html.

Actualicemos la página y podremos ver que nuestra imagen se ha cargado. Esta imagen se carga desde nuestra carpeta root static, y tenemos los estilos CSS que se cargan desde nuestra aplicación.