Bootstrap¶
Bootstrap est un framework CSS qui permet de créer rapidement des interfaces web modernes et responsives. Combiné à Jinja2, un moteur de templates Python, il permet de générer dynamiquement des pages HTML stylées.
Exemple de template Jinja2¶
<!-- produits_template.html -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Produits</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
<h1 class="mb-4">Nos produits</h1>
<div class="row">
{% for produit in produits %}
<div class="col-md-4">
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">{{ produit.nom }}</h5>
<p class="card-text">Prix : {{ produit.prix }} €</p>
<a href="#" class="btn btn-primary">Acheter</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</body>
</html>Script Python associé¶
from jinja2 import Template
produits = [
{"nom": "Clavier", "prix": 49.99},
{"nom": "Souris", "prix": 29.99},
{"nom": "Écran", "prix": 199.99}
]
with open("produits_template.html", "r", encoding="utf-8") as f:
template = Template(f.read())
html = template.render(produits=produits)
with open("produits.html", "w", encoding="utf-8") as f:
f.write(html)Exercice¶
Solution to Exercise 1 #
from jinja2 import Template
produits = [
{"nom": "Clavier", "prix": 49.99, "description": "Clavier mécanique rétroéclairé"},
{"nom": "Souris", "prix": 29.99, "description": "Souris ergonomique sans fil"},
{"nom": "Écran", "prix": 199.99, "description": "Écran 27 pouces Full HD"}
]
with open("produits_template.html", "r", encoding="utf-8") as f:
template = Template(f.read())
html = template.render(produits=produits)
with open("produits.html", "w", encoding="utf-8") as f:
f.write(html)