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.
References
- Important read – http://django-skel.readthedocs.org/en/latest/developing/
- I needed to read through this fairly carefully to figure out how to work in the bootstrap resources.
- The python diary – http://www.pythondiary.com/blog/Sep.18,2012/bootstrap-and-django-14-guide.html
- This blog had some helpful information on how to integrate bootstrap with django.
- The always excellent django tutorial
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 -
