Python >> Tutoriel Python >  >> Python

Utiliser rapidement Bootstrap 4 dans un modèle Django avec un CDN

Le framework Web Django facilite le rendu HTML à l'aide du moteur de template Django. Cependant, le style par défaut sur les pages HTML nécessite généralement un framework CSS (Cascading Style Sheet) tel que Bootstrap pour que la conception ait l'air décente. Dans ce didacticiel pour débutants, nous utiliserons le BootstrapContent Delivery Network (CDN) pour ajouter rapidement Bootstrap à une page HTML rendue.

Voici ce que le <h1> le style des éléments ressemblera à la fin de ce didacticiel :

Exigences du didacticiel

Tout au long de ce didacticiel, nous allons utiliser les dépendances suivantes, que nous allons installer dans un instant. Assurez-vous également que Python 3, de préférence 3.7 ou une version plus récente, est installé dans votre environnement :

Nous utiliserons les dépendances suivantes pour terminer ce didacticiel :

  • Framework Web Django, version 3.0.8

Tout le code de cet article de blog est disponible en open source sous licence MIT sur GitHub sous le répertoire bootstrap-4-django-template du référentiel blog-code-examples. Utilisez le code source comme vous le souhaitez pour vos propres projets.

Configuration de l'environnement de développement

Accédez au répertoire dans lequel vous conservez vos environnements virtuels Python.Créez un nouvel environnement virtuel pour ce projet à l'aide de la commande suivante.

Démarrez le projet Django en créant un nouvel environnement virtuel à l'aide de la commande suivante. Je recommande d'utiliser un répertoire séparé tel que ~/venvs/ (le tilde est un raccourci pour le home de votre utilisateur répertoire) afin que vous sachiez toujours où se trouvent tous vos environnements virtuels.

python3 -m venv ~/venvs/djbootstrap4

Activez le virtualenv avec le activate script shell :

source ~/venvs/djbootstrap4/bin/activate

Une fois la commande ci-dessus exécutée, l'invite de commande changera de sorte que le nom de virtualenv soit ajouté au format d'invite de commande d'origine, donc si votre invite est simplement $ , il ressemblera maintenant à ceci :

(djbootstrap4) $

N'oubliez pas que vous devez activer votre environnement virtuel dans chaque nouvelle fenêtre de terminal où vous souhaitez utiliser des dépendances dans l'environnement virtuel.

Nous pouvons maintenant installer le Djangopackage dans le virtualenv activé mais autrement vide.

pip install django==3.0.8

Recherchez une sortie similaire à la suivante pour confirmer que les packages appropriés ont été correctement installés à partir de PyPI.

Collecting django
  Using cached https://files.pythonhosted.org/packages/ca/ab/5e004afa025a6fb640c6e983d4983e6507421ff01be224da79ab7de7a21f/Django-3.0.8-py3-none-any.whl
Collecting sqlparse>=0.2.2 (from django)
  Using cached https://files.pythonhosted.org/packages/85/ee/6e821932f413a5c4b76be9c5936e313e4fc626b33f16e027866e1d60f588/sqlparse-0.3.1-py2.py3-none-any.whl
Collecting asgiref~=3.2 (from django)
  Using cached https://files.pythonhosted.org/packages/d5/eb/64725b25f991010307fd18a9e0c1f0e6dff2f03622fc4bcbcdb2244f60d6/asgiref-3.2.10-py3-none-any.whl
Collecting pytz (from django)
  Using cached https://files.pythonhosted.org/packages/4f/a4/879454d49688e2fad93e59d7d4efda580b783c745fd2ec2a3adf87b0808d/pytz-2020.1-py2.py3-none-any.whl
Installing collected packages: sqlparse, asgiref, pytz, django
Successfully installed asgiref-3.2.10 django-3.0.8 pytz-2020.1 sqlparse-0.3.1

Nous pouvons commencer à coder l'application maintenant que toutes nos dépendances requises sont installées.

Construire notre application

Commençons à coder notre application.

Nous pouvons utiliser le Django django-admin outil pour créer la structure de code passe-partout pour démarrer notre projet. Allez dans le répertoire où vous développez vos applications. Par exemple, j'utilise généralement /Users/matt/devel/py/ pour tous les projets myPython. Exécutez ensuite la commande suivante pour démarrer un projet Django nommé djbootstrap4 :

django-admin.py startproject djbootstrap4

Notez que dans ce didacticiel, nous utilisons le même nom pour le répertoire du projet virtualenv et Django, mais ils peuvent avoir des noms différents si vous préférez cela pour organiser vos propres projets.

Le django-admin la commande crée un répertoire nommé djbootstrap4 ainsi que plusieurs sous-répertoires que vous devriez connaître si vous avez déjà travaillé avec Django.

Modifiez les répertoires dans le nouveau projet.

cd djbootstrap4

Créez une nouvelle application Django dans djbootstrap4 .

python manage.py startapp bootstrap4

Django va générer un nouveau dossier nommé bootstrap4 pour le projet. Nous devons mettre à jour les URL afin que l'application soit accessible avant d'écrire notre views.py code.

Ouvrir djbootstrap4/djbootstrap4/urls.py . Ajoutez les lignes en surbrillance pour que le résolveur d'URL vérifie le bootstrap4 apppour des routes supplémentaires à faire correspondre avec les URL qui sont demandées à cette application Django.

# djbootstrap4/djbootstrap4/urls.py
from django.conf.urls import include
from django.contrib import admin
from django.urls import path


urlpatterns = [
    path('', include('bootstrap4.urls')),
    path('admin/', admin.site.urls),
]

Économisez djbootstrap4/djbootstrap4/urls.py et ouvrezdjbootstrap4/djbootstrap4/settings.py .Ajouter le bootstrap4 application à settings.py en insérant la ligne en surbrillance :

# djbootstrap4/djbootstrap4/settings.py
# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'bootstrap4',
]

Assurez-vous de changer le DEBUG par défaut et SECRET_KEY valeurs en settings.py avant de déployer du code en production. Sécurisez correctement votre application avec les informations des checklists de déploiement Djangoproduction afin de ne pas ajouter votre projet à la liste des applications piratées sur le web.

Enregistrez et fermez settings.py .

Prochain changement dans le djbootstrap4/bootstrap4 annuaire. Créez un nouveau fichier nommé urls.py pour contenir les itinéraires pour le bootstrap4 application.

Ajoutez toutes ces lignes au djbootstrap4/bootstrap4/urls.py vide fichier.

# djbootstrap4/bootstrap4/urls.py
from django.conf.urls import url
from . import views

urlpatterns = [
    url(r'', views.bootstrap4_index, name="index"),
]

Économisez djbootstrap4/bootstrap4/urls.py . Ouvrirdjbootstrap4/bootstrap4/views.py pour ajouter les deux lignes en surbrillance suivantes. Vous pouvez conserver le commentaire passe-partout "# Créez vos vues ici." ou supprimer comme je le fais habituellement.

# djbootstrap4/bootstrap4/views.py
from django.shortcuts import render


def bootstrap4_index(request):
    return render(request, 'index.html', {})

Ensuite, créez un répertoire pour vos fichiers de modèle nommé templates sous le djmaps/maps répertoire de l'application.

mkdir templates

Créez un nouveau fichier nommé index.html dans djbootstrap4/bootstrap4/templates qui contient le balisage de langage de modèle Django suivant.

<!DOCTYPE html>
<html>
  <head>
    <title>First step for bootstrap4</title>
  </head>
  <body>
   <h1>Hello, world!</h1>
  </body>
</html>

Nous pouvons tester cette page statique pour nous assurer que tout notre code est correct avant de commencer à ajouter l'essentiel de la fonctionnalité au projet. Allez dans le répertoire de base de votre projet Django où se trouve le manage.py fichier est localisé. Exécutez le serveur de développement avec la commande suivante :

python manage.py runserver

Le serveur de développement Django devrait démarrer sans autre problème qu'un avertissement de migration non appliquée.

Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

You have 17 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.

July 05, 2020 - 10:59:58
Django version 3.0.8, using settings 'djbootstrap4.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

Ouvrez un navigateur Web et accédez à "http://localhost:8000".

Avec notre application de base qui fonctionne, nous pouvons maintenant ajouter Bootstrap.

Intégration de Bootstrap

Il est temps d'ajouter Bootstrap dans le modèle afin que nous puissions utiliser son style.

Ouvrez djbootstrap4/bootstrap4/templates/index.html sauvegardez et ajoutez ou modifiez les lignes en surbrillance suivantes, qui sont très similaires à ce que vous trouverez dans le guide d'introduction de Bootstrap :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <title>bootstrap4</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

Les nouvelles lignes ci-dessus dans le <head> section ajoutez quelques méta-éléments qui sont importants pour le style de Bootstrap et ajoutez la feuille de style Bootstrap obligatoire.

On garde le même <h1> header, qui obtiendra automatiquement le CSSstyling. Ensuite, il y a 3 éléments facultatifs des éléments de script qui extraient du JavaScript Bootstrap pour des fonctionnalités plus avancées.

Actualisez la page à "http://localhost:8000" et vous devriez voir "Hello, world!" changer les polices.

Si vous voyez cela, cela signifie que tout fonctionne comme prévu.

Et maintenant ?

Nous venons d'ajouter Bootstrap via le CDN afin que nous puissions l'utiliser dans notre modèle Django. C'était le moyen le plus simple d'ajouter Bootstrap à une seule page Django et maintenant vous pouvez en faire beaucoup plus.

Ensuite, essayez quelques-uns de ces autres didacticiels Django connexes :

  • Plus de ressources Bootstrap
  • Comment ajouter des cartes aux projets d'application Web Django avec Mapbox
  • Surveillance des projets Django avec Rollbar

Des questions? Contactez-moi via Twitter@fullstackpythonor @mattmakai. Je suis également sur GitHub avec le nom d'utilisateur mattmakai. Si vous voyez un problème ou une erreur dans ce didacticiel, veuillez forker le référentiel source sur GitHuand et soumettre une demande d'extraction avec le correctif.