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

I tried to use MDB (material desing bootstrap) in Django for a cool material design. However, I spent a little time setting it up, so I'll write it down so I don't forget it. It describes styling the application memo in the Django project mysite.

If you're not familiar with how to use Django, click here

static settings

Create static folder

Create a / mysite / memo / static / memo directory in the app memo directory. Django seems to store static files such as css and js in / static /.

Download MDB-Free_4.15.0.zip and unzip it to / static /. https://mdbootstrap.com/docs/jquery/getting-started/download/

mysite/
  mysite/
  memo/
    __pycache__/
    migrations/
    templates/
      memo/
    static
      memo/           <-Unzip MDB under this
        css/
        img/
        js/
        scss/
        src/

Specify the location of the static directory in settings.py of / mysite / mysite. That said, the default is STATIC_URL ='/ static /', so I didn't change it.

Edit template

Rewrite the template html file to install MDB.

Specific procedure

--Write {% load static%} at the beginning of the template ――The very first line seems to be good -Write the MDB settings in \ <head > --Specify browser compatibility and responsive design with meta element -\ <head > to load the stylesheet with link --Specify the path as {% static'memo / css / bootstrap.min.css'%} -Read the js file at the end of \ <body > --Specify the path as {% static'memo / js / jquery.min.js'%} --After that, specify the style setting with \ <div > --This is the same as using normal bootstrap

Rewritten template example

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

Digression

If you want to try bootstrap anyway, remembering only three basic rules will do the trick at first. With material design bootstrap, this alone looks pretty decent.

--First, enclose the entire body part with <div class =" container "> --Enclose what you want to put side by side in one row with <div class =" row "> --Enclose each side by side in one line with <div class =" col-md-numbers "> so that the total number is 12.

The end

How to use bootstrap in Django generic class view