Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation. En savoir plus.

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.

instagram viewer

Ensuite, installez Bootstrap avec la commande suivante :

pipenv installer django-bootstrap5 # installe Bootstrap version 5

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 = [
'Galerie',
'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 déposer. 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="fr">


<diriger>


<meta charset="UTF-8">


<meta http-equiv="Compatible X-UA" contenu="IE=bord">


<méta nom="fenêtre" contenu="width=device-width, initial-scale=1.0">
<titre> Galerie </title>


{% styles de bloc %}


{% bootstrap_css %}


{% endblock %}
</head>
<corps>
 {% inclure 'barre de navigation.html' %}
 {% block content %} {% endblock %}
 {% bloquent les scripts %}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" intégrité="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonyme">
</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:

<classe de navigation="barre de navigation navbar-expand-lg">
<classe div="conteneur-fluide">
<classe h2="marque" style="la couleur verte">GALERIE PICHA</h2>
<classe de bouton="navbar-toggler" taper="bouton" data-toggle="effondrement" cible-données="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expansé="FAUX" étiquette-aria="Basculer la navigation"><je classe="fas fa-barres"></je></button>
<classe div="réduire la barre de navigation-réduire" identifiant="navbarSupportedContent">
<ul classe="barre de navigation-nav ml-auto mb-2 mb-lg-0">
<ma classe="élément de navigation"><une classe="nav-link nav-link-1 actif" aria-current="page" href="{% URL 'maison' %}" style="la couleur verte">Maison</un></li>
<ma classe="élément de navigation"><une classe="nav-lien nav-lien-2" href="#Galerie" style="la couleur verte">Galerie</un</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.