How to use bootstrap in Django generic class view

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

Recommended Posts

How to use bootstrap in Django generic class view
How to upload files in Django generic class view
How to uniquely identify the source of access in the Django Generic Class View
[Introduction to Python] How to use class in Python?
Ajax in Django (using generic class view)
How to use __slots__ in Python class
How to use Decorator in Django and how to make it
How to use classes in Theano
How to use SQLite in Python
How to reflect CSS in Django
How to use Mysql in python
How to use ChemSpider in Python
How to use PubChem in Python
How to use Laravel-like ORM / query builder Orator in Django
How to use the __call__ method in a Python class
How to delete expired sessions in Django
How to use Google Test in C
How to use Anaconda interpreter in PyCharm
How to do Server-Sent Events in Django
How to use regular expressions in Python
How to implement Scroll View in pythonista 1
How to convert DateTimeField format in Django
How to use Map in Android ViewPager
How to use is and == in Python
How to view images in Django's Admin
How to get a namespaced view name from a URL (path_info) in Django
How to use Python Image Library in python3 series
How to run some script regularly in Django
Summary of how to use MNIST in Python
Pass login user information to view in Django
How to use tkinter with python in pyenv
How to create a Rest Api in Django
How to use xml.etree.ElementTree
How to use Python-shell
How to use tf.data
How to use virtualenv
How to use Seaboan
How to use image-match
How to use shogun
How to use Pandas 2
How to use Virtualenv
How to use numpy.vectorize
How to use partial
How to use Bio.Phylo
How to use SymPy
How to use WikiExtractor.py
How to use IPython
How to use virtualenv
How to use Matplotlib
How to use iptables
How to use numpy
How to use TokyoTechFes2015
How to use venv
How to use dictionary {}
How to use Pyenv
How to use list []
How to use python-kabusapi
How to use OptParse
How to use return
How to use dotenv
How to use pyenv-virtualenv