Depuis sa sortie en 2013, Bootstrap a révolutionné la façon dont les développeurs stylisent les pages Web. Bootstrap est un framework frontal populaire utilisé pour concevoir des applications Web réactives.
Django utilise les styles CSS et les plug-ins JavaScript prédéfinis de Bootstrap pour styliser les pages Web. Bien que cela réduise les tracas liés au style, sa configuration dans Django peut être difficile.
Apprenons à installer et à configurer Bootstrap dans une application Django.
Comment installer Bootstrap
Il y a deux façons de utiliser Bootstrap 5 dans un projet Django. Vous pouvez l’installer dans votre application ou référencer les fichiers en utilisant CDN de Bootstrap. Ce projet utilisera l’ancienne méthode.
Avant d’installer Bootstrap, créer un projet Django et une application appelée galerie. L’application sera une galerie de photos et vous utiliserez Bootstrap pour styliser la barre de navigation de l’application.
Ensuite, installez Bootstrap avec la commande suivante :
pipenv install django-bootstrap5 Vérifiez le Pipfile et confirmez qu’il existe une dépendance Bootstrap 5. Vous devez maintenant informer le projet Django que vous utilisez une dépendance Bootstrap.
Dans le paramètres.py fichier, enregistrez Bootstrap comme indiqué ci-dessous :
INSTALLED_APPS = [
'gallery',
'bootstrap5',
]L’enregistrement de Bootstrap dans les paramètres du projet connecte la dépendance django-bootstrap5 à votre projet. Il sera disponible pour toute autre application définie dans le projet.
Appliquer Bootstrap sur un modèle
Tout d’abord, créez un dossier nommé modèles dans votre dossier de candidature. Dans ce dossier, créez un base.html dossier et un barre de navigation.html dossier. Les modèles contiendront des fichiers HTML que Bootstrap mettra en forme.
Bien que vous puissiez appliquer Bootstrap sur le barre de navigation.html template, l’utilisation d’un fichier de base est classique. UN base.html Le fichier contiendra tous les scripts et liens à appliquer à n’importe quelle page. Il réduit la complexité des modèles individuels, rendant votre code plus propre et plus facile à comprendre.
Dans le base.html fichier, incluez les éléments suivants :
{% load bootstrap5 %}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Gallery </title>
{% block styles %}
{% bootstrap_css %}
{% endblock %}
</head>
<body>
{% include 'navbar.html' %}
{% block content %} {% endblock %}
{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
{% bootstrap_javascript %}
</body>
</html>
Tout d’abord, chargez la dépendance bootstrap5. Créez ensuite deux styles de bloc où vous définirez tous les styles pour les modèles. Inclure le {% bootstrap_css %} balise de modèle et un lien vers le fichier CSS Bootstrap.
Ensuite, créez un script de bloc qui définit la fonctionnalité JavaScript.
Incluant le barre de navigation.html dans le base.html le relie à Bootstrap.
Testez la configuration en ajoutant des styles Bootstrap au barre de navigation.html modèle:
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<h2 class="brand" style="color:green">PICHA GALLERY</h2><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><i class="fas fa-bars"></i></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link nav-link-1 active" aria-current="page" href="{% url 'home' %}" style="color:green">Home</a></li>
<li class="nav-item"><a class="nav-link nav-link-2" href="#gallery" style="color:green">Gallery</a</li>
</ul>
</div>
</div>
</nav>
Maintenant, lancez le serveur et vérifiez votre site dans un navigateur. Vous devriez voir le style que Bootstrap applique à la barre de navigation.
Pourquoi utiliser Bootstrap dans les projets Django ?
Vous utiliserez principalement Django pour le développement back-end, mais il peut également créer des pages front-end étonnantes. Utiliser Bootstrap pour styliser les pages frontales est une bonne pratique pour les débutants de Django. Vous obtenez une compréhension approfondie de Django lorsque vous créez des applications full-stack.
Comme tout framework frontal, vous pouvez utiliser des classes Bootstrap avec un projet Django pour styliser vos pages Web. Bootstrap 5 a de meilleurs composants et une feuille de style rapide. Il a également amélioré la réactivité des appareils modernes.
Pourquoi ne pas utiliser Bootstrap pour styliser et créer des interfaces utilisateur étonnantes pour vos projets Django ? Django vous étonnera par ses capacités en développement web.
— to news.google.com