Flask & Bootstrap juntos
Olá, pessoal
Tudo bem?
Hoje, falarei um pouco da utilização do Bootstrap com Flask e ambos funcionam muito bem juntos ✨
Qual o motivação para utilizar os dois em conjunto?
Flask é um framework bem compacto que serve para eu desenvolver minhas ferramentas em Python. Enquanto o Bootstrap é ótimo framework frontend! Assim, eu não preciso me preocupar muito com frontend da aplicação, pois já vem com várias funções prontas 😊
A ideia desse tutorial foi utilizar o Bootswatch, pois possui vários templates gratuitos e muito bonitos!
Deixarei o meu Github, com o projeto atualizado com template abaixo
1 — Instalar lib bootstrap-flask
pip install bootstrap-flaskPonto importante: usaremos essa lib pois a mesma já possui a versão do Bootstrap 4 e 5
2 — Criar arquivo base.html
Você usará o base para extender a todas as páginas da aplicação.
Nesse arquivo que virá a parte importante: adicionar o template escolhido no Bootswatch
<!doctype html>
<html lang="en">
<head>
{% block head %}
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% block styles %}
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css"
href="{{url_for('static', filename='css/bootstrap.min.css')}}">
{% endblock %}
{% endblock %}
</head>
<body>
<!-- Your page content -->
{% block content %}{% endblock %}
</body>
</html>Nesse código, podemos observar em filename, que adicionei o Bootstrap na pasta css dentro de static
3- Adicionar Booststrap para pasta static
Assim, ele será lido diretamente pelo Flask
4- Cada nova página, será necessário importar o base.html
Assim, todas as páginas que tiverem esse arquivo, usarão esse mesmo frontend
{% extends "base.html" %}
{% block content %}
<!doctype html>
<html>
<head>
<title>Report</title>
<style>
body {background: #f9f9f9 !important}
.inner{
display: inline-block;}
</style>
</head>
<body>
</body>
</html>
{% endblock %}Como resultado, você poderá olhar na página os botões, barras e formulários com frontend pronto ✅
