Comment utiliser le bootstrap dans la vue de classe générique Django

2020-04-01 Créé: windows10 / Python-3.8.2-amd64 / Django-3.0.4 / MDB-Free_4.15.0

J'ai essayé de créer un design de matériau cool en utilisant MDB (Material Desing Bootstrap) dans Django. Cependant, j'ai passé un peu de temps à le configurer, alors je vais l'écrire pour ne pas l'oublier. Instructions pour styliser le mémo d'application dans le mysite du projet Django.

Si vous ne savez pas comment utiliser Django, cliquez ici

paramètres statiques

Créer un dossier statique

Créez un répertoire / mysite / memo / static / memo dans le répertoire mémo de l'application. Dans Django, les fichiers statiques tels que css et js sont stockés dans / static /.

Téléchargez MDB-Free_4.15.0.zip et décompressez-le dans / static /. https://mdbootstrap.com/docs/jquery/getting-started/download/

mysite/
  mysite/
  memo/
    __pycache__/
    migrations/
    templates/
      memo/
    static
      memo/           <-Décompressez MDB sous ce
        css/
        img/
        js/
        scss/
        src/

Spécifiez l'emplacement du répertoire statique dans settings.py dans / mysite / mysite. Cela dit, la valeur par défaut est STATIC_URL = '/ static /', donc je ne l'ai pas changé.

Modifier le modèle

Réécrivez le fichier HTML de modèle pour déployer MDB.

Procédure spécifique

Exemple de modèle réécrit

memo/template/memo/memo_list.html


{% load static %}
<!DOCTYPE html>
<html lang = "jp">
<head>
  <meta charset = "utf-8">
  <title>Memo</title>

  <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
  <meta http-equiv = "x-ua-compatible" content = "ie = edge">
  <link href = "{% static 'memo/css/bootstrap.min.css' %}" rel = "stylesheet">
  <link href = "{% static 'memo/css/mdb.min.css' %}" rel = "stylesheet">
  <link href = "{% static 'memo/css/style.css' %}" rel = "stylesheet">
<head>

<body>
  <div class = "container">
    <div class = "row">
      <div class = "col-md-8">
        <h1>View : MemoListView</h1>
        <p>Template : memo_list.html</p>
      </div>
    </div>
    <div class = "row">
      <div class = "col-md-12">
        {% if memo_list %}
        <table class = "table">
          {% for memo in memo_list %}
          <tr>
            <td><a href = "{% url 'site_detail' memo.pk %}">{{ memo.text }}</a></td>
            <td><a href = "{% url 'site_update' memo.pk %}">Edit</a></td>
            <td><a href = "{% url 'site_delete' memo.pk %}">Delete</a></td>
          </tr>
          {% endfor %}
        </table>

        {% else %}
        <p>No memo available.</p>
        {% endif %}
      </div>
    </div>
    <div = "row">
      <div = "col-md-8">
          <p><a href = "{% url 'site_create' %}">Create a new memo.</a></p>
      </div>
    </div>
  </div>
  <script type = "text/javascript" src = "{% static 'memo/js/jquery.min.js' %}"></script>
  <script type = "text/javascript" src = "{% static 'memo/js/popper.min.js' %}"></script>
  <script type = "text/javascript" src = "{% static 'memo/js/bootstrap.min.js' %}"></script>
  <script type = "text/javascript" src = "{% static 'memo/js/mdb.min.js' %}"></script>

</body>
</html>

De côté

Si vous voulez quand même essayer le bootstrap, ne pas oublier que trois règles de base suffiront au début. Avec bootstrap de conception matérielle, cela seul semble assez décent.

La fin

Recommended Posts

Comment utiliser le bootstrap dans la vue de classe générique Django
Comment télécharger des fichiers dans la vue de classe générique Django
Comment identifier de manière unique la source d'accès dans la vue de classe générique Django
[Introduction à Python] Comment utiliser la classe en Python?
Ajax dans Django (en utilisant la vue de classe générique)
Comment utiliser __slots__ dans la classe Python
Comment utiliser Decorator dans Django et comment le créer
Comment utiliser les classes dans Theano
Comment utiliser SQLite en Python
Comment refléter CSS dans Django
Comment utiliser Mysql avec python
Comment utiliser ChemSpider en Python
Comment utiliser PubChem avec Python
Comment utiliser ORM / Query Builder Orator de type Laravel avec Django
Comment utiliser la méthode __call__ dans la classe Python
Comment supprimer des sessions expirées dans Django
Comment utiliser Google Test en langage C
Comment utiliser l'interpréteur d'Anaconda avec PyCharm
Comment faire des événements envoyés par le serveur dans Django
Comment utiliser les expressions régulières en Python
Comment utiliser Map dans ViewPager d'Android
Comment utiliser is et == en Python
Comment afficher les images dans l'administration de Django
Pour trouver le nom de la vue avec l'espace de noms à partir de l'URL (path_info) dans Django
Comment utiliser la bibliothèque d'images Python dans la série python3
Résumé de l'utilisation de MNIST avec Python
Passer les informations de connexion à afficher dans Django
Comment utiliser tkinter avec python dans pyenv
Comment créer une API Rest dans Django
Comment utiliser xml.etree.ElementTree
Comment utiliser Python-shell
Remarques sur l'utilisation de tf.data
Comment utiliser virtualenv
Comment utiliser Seaboan
Comment utiliser la correspondance d'image
Comment utiliser le shogun
Comment utiliser Pandas 2
Comment utiliser Virtualenv
Comment utiliser numpy.vectorize
Comment utiliser partiel
Comment utiliser Bio.Phylo
Comment utiliser SymPy
Comment utiliser WikiExtractor.py
Comment utiliser IPython
Comment utiliser virtualenv
Comment utiliser Matplotlib
Comment utiliser iptables
Comment utiliser numpy
Comment utiliser TokyoTechFes2015
Comment utiliser venv
Comment utiliser le dictionnaire {}
Comment utiliser Pyenv
Comment utiliser la liste []
Comment utiliser python-kabusapi
Comment utiliser OptParse
Comment utiliser le retour
Comment utiliser pyenv-virtualenv