No último post, aprendemos a trabalhar com templates no Flask. Neste post, vamos dar um passo adiante e aprender a integrar o Bootstrap 5 em nosso aplicativo Flask e a criar um template base que pode ser estendido para outros templates.
Integrando o Bootstrap 5
O Bootstrap é um framework CSS que permite criar interfaces de usuário responsivas e modernas com facilidade. Para adicionar o Bootstrap ao nosso aplicativo Flask, precisamos incluir os arquivos CSS e JS do Bootstrap em nossos templates.
Vamos modificar nosso template home.html
para incluir o Bootstrap. Substitua o conteúdo do arquivo home.html
pelo seguinte código:
<!DOCTYPE html>
<html>
<head>
<title>Meu Primeiro Template Flask</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-beta1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1 class="mt-5">Olá, {{ nome }}!</h1>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-beta1/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
Agora, nosso aplicativo Flask está usando o Bootstrap!
Criando um Template Base
Um template base é um template que contém elementos comuns a todas as páginas do seu aplicativo, como o cabeçalho, o rodapé e a barra de navegação. Vamos criar um template base chamado base.html
no diretório templates
:
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-beta1/css/bootstrap.min.css”>
</head>
<body>
<div class=”container”>
{% block content %}
{% endblock %}
</div>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-beta1/js/bootstrap.bundle.min.js”></script>
</body>
</html>
Neste template, {% block content %}{% endblock %}
é um marcador de posição para o conteúdo que será preenchido pelos templates que estendem este template base.
Estendendo o Template Base
Agora que temos nosso template base, podemos criar templates que o estendem. Vamos modificar nosso template home.html
para estender o template base:
{% extends “base.html” %}
{% block content %}
<h1 class=”mt-5″>Olá, {{ nome }}!</h1>
{% endblock %}
Agora, quando você visitar http://localhost:5000
, verá “Olá, Mundo!” exibido, e nosso aplicativo Flask está usando o Bootstrap e um template base!
Conclusão
Neste post, aprendemos a integrar o Bootstrap 5 em nosso aplicativo Flask e a criar um template base que pode ser estendido para outros templates. No próximo post, vamos explorar mais recursos do Flask, como formulários e bancos de dados.