Django com Bootstrap 4

Fala pessoal! Blz?

No post de hoje vamos falar sobre duas ferramentas que com certeza ajudam e muito na produtividade do programador, Django – Framework Python, o melhor e mais popular do ecossistema pythônico e Twitter Bootstrap, framework front-end desenvolvido pela galera do Twitter, de longe o melhor e mais usado da sua categoria.

Django e Bootstrap dispensam qualquer apresentação e se você está nessa página, lendo este post, nesse momento, com certeza conhece a dupla! 🤓

O conteúdo desse post pode ser visto em vídeo também! Segue o vídeo abaixo! Aproveita e visite o canal, inscreva-se e ative as notificações, assim ficará sabendo dos próximos vídeos que serão publicados.

Vou considerar que você já tem seu projeto Django criado, vou passar direto para a estrutura que uso atualmente e as devidas configurações para que tudo funcione corretamente. Se desejar, poderá fazer o download do código fonte gerado clicando aqui.

Você pode, obviamente continuar com sua estrutura, atente-se somente para os diretórios staticfiles e templates na raiz do projeto, o diretório apps também merece atenção, é dentro dele que vai ficar as apps django, assim considero uma boa organização, apesar de precisar de um setup inicial diferente do que já vem com o Django.

Você vai precisar também fazer o download do Bootstrap 4, acesse o site oficial do projeto e baixe a versão Source files, é com ela que teremos acesso aos arquivos bootstrap.min.css e bootstrap.min.js, estes arquivos estão localizados na pasta dist.

Copie e cole os arquivos na pasta CSS e JS que estão dentro da pasta staticfiles na raiz do nosso projeto Django.

Vamos agora às configurações necessárias no arquivos settings.py.

Abaixo da importação do módulo os, faça a importação do módulo Python sys.

import sys

Abaixo da linha que contém a constante BASE_DIR, crie uma nova, a seguir.

APPS_DIR = os.path.join(BASE_DIR, 'apps')

Em seguida…

sys.path.insert(0, APPS_DIR)

Adicione a app core aos INSTALLED_APPS.

INSTALLED_APPS = [
...
'core.apps.CoreConfig',
]

O Django por padrão encontrará os arquivos HTMLs informados nas views se estes estiverem dentro das apps, seguindo claro, uma estrutura convencional, porém, quando quisermos colocar estes arquivos em outro local, é perfeitamente possível desde que informamos o diretório onde estarão contidos.

TEMPLATES = [
{
..,
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'APP_DIRS': True,
...,
},
]

Pronto. Feito isso é só partir para o abraço, esta tudo certo e você já pode trabalhar normalmente com o Bootstrap 4 no modo standalone, chamo assim pois não precisa de nenhuma app django e nem pré processadores para funcionar, estão de forma “independente”.

O que você ainda vai precisar é fazer o link para os arquivos CSS e JS.

<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">

Antes de usar a template tag {% static '' %} lembre-se carregar ela com a {% load staticfiles %}, que deve estar na primeira linha do arquivo .html, nesse exemplo eu chamei de base.html, segue abaixo a estrutura do arquivo, bem simples, claro.

Dar uma olhada no resultado! Super, ultra, hiper, mega top!!! 😁

Isso é tudo pessoal!

Inscreva-se na minha lista e receba um alerta sempre que tiver novidades como posts, e-books e vídeos no canal do YouTube. Ahhhh! Em breve estarei lançando um curso que vai mudar sua forma de trabalhar com Python e Django, para quem estiver na lista, receberá um desconto especial!