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

Ich habe versucht, ein cooles Materialdesign mit MDB (Material Desing Bootstrap) in Django zu erstellen. Ich habe jedoch ein wenig Zeit damit verbracht, es einzurichten, also werde ich es aufschreiben, damit ich es nicht vergesse. Anweisungen zum Gestalten des Anwendungsprotokolls auf der Django-Projektmysite.

Wenn Sie mit der Verwendung von Django nicht vertraut sind, klicken Sie hier

statische Einstellungen

Erstellen eines statischen Ordners

Erstellen Sie ein Verzeichnis / mysite / memo / static / memo im App-Memo-Verzeichnis. In Django werden statische Dateien wie css und js in / static / gespeichert.

Laden Sie MDB-Free_4.15.0.zip herunter und entpacken Sie es in / static /. https://mdbootstrap.com/docs/jquery/getting-started/download/

mysite/
  mysite/
  memo/
    __pycache__/
    migrations/
    templates/
      memo/
    static
      memo/           <-Entpacken Sie die MDB darunter
        css/
        img/
        js/
        scss/
        src/

Geben Sie den Speicherort des statischen Verzeichnisses in settings.py in / mysite / mysite an. Der Standardwert ist jedoch STATIC_URL = / static /, daher habe ich ihn nicht geändert.

Vorlage bearbeiten

Schreiben Sie die HTML-Vorlagendatei neu, um die MDB bereitzustellen.

Spezifisches Verfahren

Schreiben Sie "{% load static%}" am Anfang der Vorlage ――Die allererste Zeile scheint gut zu sein -Schreiben Sie die MDB-Einstellungen in \ <head >
Geben Sie die Browserkompatibilität und das reaktionsschnelle Design mit dem Metaelement an
\ <head >, um das Stylesheet mit Link zu laden
Geben Sie den Pfad als {% static'memo / css / bootstrap.min.css '%} an. -Lesen Sie die js-Datei am Ende von \ <body >
Geben Sie den Pfad als {% static'memo / js / jquery.min.js '%} an.
Geben Sie anschließend die Stileinstellung mit \ <div > an
Dies ist das gleiche wie bei Verwendung eines normalen Bootstraps

Beispiel einer umgeschriebenen Vorlage

`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>

Beiseite

Wenn Sie trotzdem Bootstrap ausprobieren möchten, reicht es zunächst aus, sich nur drei Grundregeln zu merken. Mit Material Design Bootstrap sieht dies allein ziemlich anständig aus.

Schließen Sie zuerst den gesamten Körperteil mit <div class =" container "> ein
Schließen Sie mit <div class =" row "> an, was Sie nebeneinander in eine Zeile stellen möchten
Schließen Sie jedes nebeneinander liegende Element in einer Zeile mit "
" ein, sodass die Gesamtzahl 12 beträgt.

Das Ende

[PYTHON] Verwendung von Bootstrap in der generischen Klassenansicht von Django