Desde o seu lançamento em 2013, o Bootstrap revolucionou a forma como os desenvolvedores estilizam as páginas da web. Bootstrap é uma estrutura de front-end popular usada para projetar aplicativos da Web responsivos.
O Django usa estilos CSS pré-construídos do Bootstrap e plug-ins JavaScript para estilizar páginas da web. Embora reduza o incômodo de estilizar, configurá-lo no Django pode ser um desafio.
Vamos aprender como instalar e configurar o Bootstrap em um aplicativo Django.
Como instalar o Bootstrap
Existem duas maneiras de usar Bootstrap 5 em um projeto Django. Você pode instalá-lo em seu aplicativo ou fazer referência aos arquivos usando CDN do Bootstrap. Este projeto usará o método anterior.
Antes de instalar o Bootstrap, criar um projeto Django e um aplicativo chamado galeria. O aplicativo será uma galeria de fotos e você usará o Bootstrap para estilizar a barra de navegação do aplicativo.
Em seguida, instale o Bootstrap com o seguinte comando:
pipenv instalar django-bootstrap5 # instala o Bootstrap versão 5Verifique o Pipfile e confirme se há uma dependência do Bootstrap 5. Agora você precisa notificar o projeto Django de que está usando uma dependência do Bootstrap.
No settings.py arquivo, registre o Bootstrap como mostrado abaixo:
INSTALADO_APPS = [
'galeria',
'bootstrap5',
]Registrar o Bootstrap nas configurações do projeto conecta a dependência django-bootstrap5 ao seu projeto. Estará disponível para qualquer outra aplicação definida no projeto.
Aplicar Bootstrap em um modelo
Primeiro, crie uma pasta chamada modelos na pasta do seu aplicativo. Dentro desta pasta, crie um base.html arquivo e um navbar.html arquivo. Os modelos conterão arquivos HTML que o Bootstrap estilizará.
Embora você possa aplicar o Bootstrap no navbar.html modelo, usar um arquivo base é convencional. A base.html arquivo conterá todos os scripts e links para aplicar a qualquer página. Ele reduz a complexidade de modelos individuais, tornando seu código mais limpo e fácil de entender.
No base.html arquivo, inclua o seguinte:
{% load bootstrap5 %}<!DOCTYPE html>
<html idioma ="pt">
<cabeça>
<meta charset="UTF-8">
<meta http-equiv="Compatível com X-UA" conteúdo="IE=borda">
<metanome="janela de exibição" conteúdo="largura=largura do dispositivo, escala inicial=1,0">
<título> Galeria </title>{% estilos de bloco %}
{% bootstrap_css %}
{% bloco final %}
</head>
<corpo>
{% incluir 'navbar.html' %}
{% conteúdo do bloco %} {% endblock %}
{% scripts de bloqueio %}
<script origem="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integridade="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" origem cruzada="anônimo">
</script>
{% bootstrap_javascript %}
</body>
</html>
Primeiro, carregue a dependência bootstrap5. Em seguida, crie dois estilos de bloco onde você definirá todos os estilos para os modelos. Incluir o {% bootstrap_css %} template tag e um link para o arquivo Bootstrap CSS.
Em seguida, crie um script de bloco que defina a funcionalidade do JavaScript.
Incluindo o navbar.html no base.html liga-o ao Bootstrap.
Teste a configuração adicionando estilos Bootstrap ao navbar.html modelo:
<classe de navegação ="barra de navegação barra de navegação-expandir-lg">
<classe div ="recipiente-fluido">
<classe h2 ="marca" estilo="cor verde">GALERIA DA PICHA</h2><classe de botão ="barra de navegação" tipo="botão" alternância de dados="colapso" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" ária-expandida="falso" aria-label="Alternar de navegação"><eu classe ="fas fa-bars"></eu></button>
<classe div ="recolher barra de navegação-collapse" id="navbarSupportedContent">
<ul classe="navbar-nav ml-auto mb-2 mb-lg-0">
<classe li ="item de navegação"><uma aula="nav-link nav-link-1 ativo" ária-corrente="página" href="{% url 'lar' %}" estilo="cor verde">Lar</a></li>
<classe li ="item de navegação"><uma aula="nav-link nav-link-2" href="#galeria" estilo="cor verde">Galeria</a</li>
</ul>
</div>
</div>
</nav>
Agora, execute o servidor e verifique seu site em um navegador. Você deve ver o estilo que o Bootstrap aplica à barra de navegação.
Por que usar Bootstrap em projetos Django?
Você usará principalmente o Django para desenvolvimento de back-end, mas também pode criar páginas de front-end incríveis. Usar Bootstrap para estilizar páginas front-end é uma boa prática para iniciantes em Django. Você obtém um entendimento profundo do Django ao criar aplicativos full-stack.
Como qualquer framework front-end, você pode usar classes Bootstrap com um projeto Django para estilizar suas páginas web. O Bootstrap 5 tem componentes melhores e uma folha de estilo rápida. Ele também melhorou a capacidade de resposta para dispositivos modernos.
Por que não usar o Bootstrap para estilizar e criar UIs incríveis para seus projetos Django? O Django irá surpreendê-lo com suas capacidades de desenvolvimento web.