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!
Parabéns pelo post. Gostei.
Parabéns…me ajudou bastante