Demo Github
Cuando optas por trabajar la vista o la parte Frontend de tu proyecto, una de las mejores opciones es Bootstrap, hasta la fecha de este artículo este Framework se encuentra en su versión 4, te recomendamos leer el artículo Diseña Tu Primera Página Web con Bootstrap 4 para que te familiarices con este Framework antes de despegarlo dentro de Django, en este artículo te enseñaremos a como integrar Bootstrap 4 a tu proyecto creado con Django.
imagen: getbootstrap.com
Antes de continuar es importante que tengas desplegado Django y su gestor de paquetes PIP (Package Installer Python), te recomendamos leer este artículo Que es Django y como instalarlo para que dejes Django y PIP correctamente configurados y listos para trabajar.
Django Bootstrap 4
El repositorio PyPI cuenta con un paquete para instalar Bootstrap 4 rápidamente, simplemente abrimos nuestra consola de comandos y ejecutamos lo siguiente:
pip install django-bootstrap4 Collecting django-bootstrap4 Downloading https://files.pythonhosted.org/packages/80/ad/23a156a282c733c33bc7282572b89d00131130519e0de18013e7e3fcb6e3/django-bootstrap4-0.0.6.tar.gz Building wheels for collected packages: django-bootstrap4 Running setup.py bdist_wheel for django-bootstrap4: started Running setup.py bdist_wheel for django-bootstrap4: finished with status 'done' Stored in directory: C:\Users\FRONTEND\AppData\Local\pip\Cache\wheels\a2\92\2f\110d092bcbf7e25347880d2975e8c53bf1c33177ea3b360478 Successfully built django-bootstrap4 Installing collected packages: django-bootstrap4 Successfully installed django-bootstrap4-0.0.6
Ahora ve a tu archivo settings.py y agrega Bootstrap en la parte INSTALLED_APPS
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'bootstrap4', // Acá
'tutorial',
]Con esto ya tenemos instalado Bootstrap 4 en Django y todo en cuestión de segundos, Genial no ?
Desplegando Bootstrap 4 en Django
Ahora abre de nuevo tu archivo settings.py y agrega la ruta del directorio a tus templates o plantillas
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')], // Acá
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]Abre tu archivo urls.py y agrega la ruta para visualizar la vista que haremos con Bootstrap 4
urlpatterns = [
path('', views.index, name='index'), // Acá
path('admin/', admin.site.urls),
]Ahora abre tu archivo views.py y agrega la vista a la pagina index.html que es la vista html en donde mostraremos los elementos y la pagina en Bootstrap 4
from django.shortcuts import render_to_response
def index (request):
return render_to_response('index.html')Listo ahora creamos una carpeta llamada templates y dentro de ella creamos un archivo llamado index.html y lo que haremos es entre las etiquetas <head></head> instanciamos las librerias CSS de Bootstrap
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>Como integrar Django y Bootstrap 4 </title>
{# Cargamos la librería #}
{% load bootstrap4 %}
{# CSS Bootstrap #}
{% bootstrap_css %}
</head>Y para la libreria jQuery y los archivos Javascript de Bootstrap, antes de cerrar la etiqueta </body> debajo del documento html los instanciamos
{# JS y jQuery Bootstrap #}
{% bootstrap_javascript jquery='full' %}
</body>
</html>Listo, ahora podemos agregar todo tipo de componentes de Bootstrap 4 que necesitemos usar, todo los colocamos dentro de las etiquetas <body></body>
Puedes ver el demo que esta al inicio del artículo, para que te des una idea de como quedo el resultado final.
Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure