Geek asks and answers

How to use Twitter Bootstrap in a Django app

I want to use Twitter Bootstrap in my Django application and for this I changed the template as follows:

<!DOCTYPE html>

<html>
<head>
    <title>{{ genplan.name }}</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
    <h1>{{ genplan.name }}</h1>
    <ol>
        {% for cur_goal in goals %}
            <li>{{ cur_goal.description }}</li>
        {% endfor %}
    </ol>

    ...
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

MEDIA_ROOTand MEDIA_URLinstalled correctly.

MEDIA_ROOT = 'D:/dev/ccp/ccp-gp/media'
MEDIA_URL = '/media/'

However, after adding the Bootstrap styles, nothing has changed (the look of this page has not changed), and I believe that Django cannot find Bootstrap resources.

What can cause this problem?

Update 1:

When I use this code in urls.py

urlpatterns = patterns('',
    (r'^$', 'ccp_gp.general_plans.views.home'),     (r'^media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT})     )

Python complains about the undefined variable settings.

+5
source share
1 answer

You need to use MEDIA_URLwhen loading css and js:

<link href="{{ MEDIA_URL }}css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="{{ MEDIA_URL }}js/bootstrap.min.js"></script>

Django, , STATIC_URL static .

<link href="{{ STATIC_URL }}css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>

, {{ MEDIA_URL }} . , , TEMPLATE_CONTEXT_PROCESSORS "" "" . TEMPLATE_CONTEXT_PROCESSORS, .

RequestContext. Django 1.3, - TemplateResponse.

:

from django.template.response import TemplateResponse

def index(request):
    genplan = ...
    goals = ...
    return TemplateResponse(request, 'index.html', {
        'genplan': genplan,
        'goals': goals,
    })

MEDIA_DIR, (manage.py runserver), urls.py:

from django.conf import settings

if settings.DEBUG:
    urlpatterns += (
        url(r'^media/(.*)$', 'django.views.static.serve',
                    {'document_root': settings.MEDIA_ROOT}),
    )
+9

More articles:


All Articles