Twitter Bootstrap¶
La librairie Bootstrap est la plus célèbre des libs CSS, mise à disposition par Twitter, elle permet de réaliser des sites élégants et responsives assez facilement.
La documentation se trouve là :
et les exemples :
Il sera souvent le plus rapide de partir d’un ou plusieurs de ces exemples et de les modifier à notre guise. Nous allons ainsi construire un template de base pour notre application Django.
Template de base Bootstrap¶
Nous allons mettre en place un template base.html global au projet dans GestionTaches/templates utilisant la librairie CSS Bootstrap.
installation de dépendances statiques¶
Installons tout d’abord dans le dossier static du projet quelques librairies avec la commande yarn ou npm :
yarn add bootstrap jquery popper.js
Ce qui créera dans static un dossier node_modules contenant les librairies demandées.
template générique Bootstrap¶
Mettons maintenant en place un template assez générique, base.html dans le dossier templates du projet. Nous pouvons nous inspirer par exemple du starter template de Bootstrap
<!doctype html>
{% load static %}
<html lang="fr">
<head>
<meta charset="utf-8">
<title>
{% block title %}{% endblock %}
</title>
{% block metas %}
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{% static 'node_modules/bootstrap/dist/css/bootstrap.min.css' %}">
{% endblock %}
</head>
<body>
{% block nav %}
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<h1> Gestion des Tâches</h1>
</nav>
{% endblock %}
<main role="main" class="container top-pushed">
<div class="jumbotron">
{% block content %}
{% endblock %}
</div>
</main>
{% block js %}
<script src="{% static 'node_modules/jquery/dist/jquery.min.js' %}"></script>
<script src="{% static 'node_modules/bootstrap/dist/js/bootstrap.min.js' %}"></script>
<script src="{% static 'node_modules/popper.js/dist/popper.min.js' %}"></script>
{% endblock %}
</body>
</html>
ou si on installe « à la main » les librairies dans static :
<!doctype html>
{% load static %}
<html lang="fr">
<head>
<meta charset="utf-8">
<title>
{% block title %}{% endblock %}
</title>
{% block metas %}
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
{% endblock %}
</head>
<body>
{% block nav %}
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<h1> Gestion des Tâches</h1>
</nav>
{% endblock %}
<main role="main" class="container top-pushed">
<div class="jumbotron">
{% block content %}
{% endblock %}
</div>
</main>
{% block js %}
<script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
{% endblock %}
</body>
</html>
Ce template va nous servir de base pour tous les templates de notre site. Nous y avons incorporé des zones variables comme styles, nav, js ou content qui pourront être redéfinies dans les templates héritiers. Nous pouvons placer les templates héritiers plus spécialisés dans les dossiers templates des différentes apps. Pour cela il faut ajouter le réglage suivant dans settings.py, à la suite de :
STATIC_URL = '/static/'
ajoutez :
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
Maintenant, il ne nous reste plus qu’à écrire le fichier template list2.html dans le répertoire lesTaches/templates/
{% extends "base.html" %}
{% load static %}
{% block title %}
Les Tâches
{% endblock %}
{% block styles %}
{{ block.super }}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous">
{% endblock %}
{% block content %}
<h1>Liste des tâches</h1>
{% for tache in objects %}
<div class="row">
<div class="col">{{tache.name}}</div>
<div class="col">{{tache.created_date}}</div>
<div class="col">{{tache.colored_due_date}}</div>
<div class="col">
{% if tache.closed %}
<i class="fas fa-lock"></i>
{% else %}
<i class="fas fa-lock-open"></i>
{% endif %}
</div>
</div>
{% endfor %}
{% endblock %}
et modifier dans views.py la méthode task_listing, appelant ce template en utilisant la fonction render() de django :
def task_listing(request):
objects = Task.objects.all().order_by('due_date')
return render(request, template_name='list2.html', context={'objects': objects} )