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

Ecrire «{% load static%}» au début du modèle ――La toute première ligne semble être bonne -Ecrire les paramètres MDB dans \ <head >
Spécifiez la compatibilité du navigateur et la conception réactive avec l'élément méta
\ <head > pour charger la feuille de style avec lien --Spécifiez le chemin comme {% static'memo / css / bootstrap.min.css '%} -Lire le fichier js à la fin de \ <body > --Spécifiez le chemin comme {% static'memo / js / jquery.min.js '%}
Après cela, spécifiez le paramètre de style avec \ <div >
C'est la même chose que l'utilisation du bootstrap normal

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.

Tout d'abord, entourez toute la partie du corps avec <div class =" container "> --Enclenchez ce que vous voulez mettre côte à côte dans une rangée avec <div class =" row "> --Enclenchez chacun des éléments côte à côte sur une ligne avec <div class =" col-md-number "> pour que le nombre total soit de 12.

La fin

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