How to use bootstrap when working with Django?

G

Grigory Kalyashov2014-07-10 09:37:14

Django

Grigory Kalyashov, 2014-07-10 09:37:14

How to use bootstrap when working with Django? There is html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Тестовый блог</title>
        <link href="{{STATIC_URL}}bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet">
        <style>
            body {
                padding-top: 60px;
            }
        </style>
        <link href="{{STATIC_URL}}bootstrap/css/bootstrap-responsive.css" type="text/css" rel="stylesheet">
        <script src="{{STATIC_URL}}bootstrap/js/bootstrap.js" type="text/javascript"></script>
        {% block extrahead %}
        {% endblock %}
        <script type="text/javascript">
        $(function(){
        {% block jquery %}
        {% endblock %}
        });
        </script>
    </head>
<body>

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <div class="brand">Тестовый блог</div>
            <ul class="nav">
                <li><a href="{% url 'list' %}" class="">Список постов</a></li>
            </ul>
        </div>
    </div>

</div>

<div class="container">
     {% block content %}Empty page{% endblock %}
</div> <!-- container -->

</body>
</html>

Also in settings.py I wrote:

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

The problem is that styles and js don't work,
the page is bare:( html page is in C:\Users\TV\Documents\djcode\test_blog\blog\templates\blog , twitter bootstrap is in C:\Users\TV\ Documents\djcode\test_blog\static

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

S

sim3x, 2014-07-10
@kalyashov

The template with the output like this
will be empty.
This is the "old" style. In order to use it, you need to make a middleware that will add STATIC_URL to the context .
You need to do this
0. <!DOCTYPE HTML>
1. <meta charset="utf-8">
2.

<link href="{% static "bootstrap/css/bootstrap-responsive.css" %}" rel="stylesheet">
<script src="{% static "bootstrap/js/bootstrap.js" %}"></script>

for the static tag to work at the beginning of each template, you need to add
{% load staticfiles %}

L

Lorloz, 2015-05-31
@Lorloz

here is a good battery
https://github.com/dyve/django-bootstrap3
I use it in all projects, it greatly simplifies development :)