Using Bootstrap with Django

Part 2

This is a continuation from the previous post on using django-skel to create a new django project.

Overview

In this post we will walk through using Bootstrap (a front-end framework for developing responsive projects) github.

Assumptions: you have already completed the previous post and have an initial working django site.

Goal: The result of this tutorial / walk-through is a django page with the basic template from the http://getbootstrap.com/getting-started/ guide.

django_bootstrap_results

References

Walkthrough

Download bootstrap (currently v3.1.1) – http://getbootstrap.com/getting-started/

  • I chose the ‘Download Bootstrap’ version (instead of ‘Download source’ or ‘Download Sass’).
  • If you used django-skel there is already a dir referenced in the common settings (under STATICFILES_DIR).
    • It might be worth placing bootstrap in it’s own area.

Changes Requries

  • Makefile – for cleanup
    PROJECT_NAME=<REPLACE_with_project_name>
    
    clean:
    	rm -rf $(PROJECT_NAME)/static/CACHE
    	find . -name "*.pyc" -exec rm -rf {} \;
    
  • .gitignore – we don’t want the django-compressor minification results getting checked in
    # Static compression
    <REPLACE_with_project_name>/static/CACHE
    
  • urls.py – point to our apps urls
    urlpatterns = patterns('',
        url(r'^foo/', include('<REPLACE_with_project_name>.apps.<REPLACE_with_app_name>.urls')),
    
        # Admin panel and documentation:
        url(r'^admin/doc/', include('django.contrib.admindocs.urls')),
        url(r'^admin/', include(admin.site.urls)),
    )
  • <app_name>/urls.py – our apps urls
    from django.conf.urls import patterns, url
    
    import views
    
    urlpatterns = patterns('',
        url(r'^$', views.index, name='index')
    )
  • views.py – a new view
    from django.shortcuts import render
    
    def index(request):
        return render(request, '<REPLACE_with_app_name>/index.html', None)
    
  • index.html – created a new template in <project_name>/templates/<app_name>
    {% load compress %}
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 101 Template</title>
    
        <!-- Bootstrap -->
        <link href="{{ STATIC_URL }}css/bootstrap.min.css" rel="stylesheet">
    
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
        <h1>Hello, world!</h1>
    
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>
      </body>
    </html>
    

Result:

At this point we have added some static resources (Bootstrap) and a new template to our app.

You should be able to run ‘runserver_plus’ and get this:

python manage.py runserver_plus
Validating models...
0 errors found

Django version 1.5.5, using settings 'django_project_name_foo.settings.dev'
Development server is running at http://127.0.0.1:8000/
Using the Werkzeug debugger (http://werkzeug.pocoo.org/)
Quit the server with CONTROL-C.
 * Running on http://127.0.0.1:8000/
 * Restarting with reloader
Validating models...
0 errors found

Django version 1.5.5, using settings 'django_project_name_foo.settings.dev'
Development server is running at http://127.0.0.1:8000/
Using the Werkzeug debugger (http://werkzeug.pocoo.org/)
Quit the server with CONTROL-C.
/local/lib/python2.7/site-packages/django/conf/urls/defaults.py:3: DeprecationWarning: django.conf.urls.defaults is deprecated; use django.conf.urls instead
  DeprecationWarning)

/local/lib/python2.7/site-packages/django/utils/hashcompat.py:9: DeprecationWarning: django.utils.hashcompat is deprecated; use hashlib instead
  DeprecationWarning)

127.0.0.1 - - [20/Mar/2014 18:45:43] "GET /foo/ HTTP/1.1" 200 -
127.0.0.1 - - [20/Mar/2014 18:45:43] "GET /static/css/bootstrap.min.css HTTP/1.1" 304 -
127.0.0.1 - - [20/Mar/2014 18:45:43] "GET /static/js/bootstrap.min.js HTTP/1.1" 304 -

django_bootstrap_results

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s