Do you need to use Bootstrap with a Django project, but don't know the best way to integrate it. This is a guide which uses the new staticfiles app included in Django 1.3+. This guide should work with Django 1.3+.
First, what you will need to do, is download Bootstrap, from Twitter. Unzip the contents to reveal a directory simply called bootstrap inside. Copy or move this directory into your Django project, or another location which multiple projects can reference. Placing it into a global location is generally a good idea on a production server, this way, multiple Django projects can reference the same static files. Once you choose your location, add this location to your STATICFILES_DIRS tuple. If you kept the correct layout from the bootstrap zip file, you can use the following base.html template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap | {% block title %}Untitled{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="{{STATIC_URL}}css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="{{STATIC_URL}}css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="{{STATIC_URL}}js/jquery-1.8.1.min.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">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/">Bootstrap</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="/">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div id="messages">
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{message.tags}}">
<a class="close" data-dismiss="alert">×</a>
{{message}}
</div>
{% endfor %}
{% endif %}
</div>
<div class="container">
{% block content %}
{% endblock %}
</div> <!-- /container -->
</body>
</html>
There you have it, a very simple base template to use with your many Django projects. The jquery block will allow you to add new page onload code to individual templates. You can either place global jquery onload code into the block itself, and use block.supper to use the global onload or not depending, or place global onload code before or after the block. Enabling jquery like this is as simple as how you enabled bootstrap. Download jquery, create a new directory called jquery somewhere where staticfiles can reference it, and add it to your STATICFILES_DIRS tuple like before. Be sure to place the jquery file into a directory called js inside the jquery static directory.
Oh, and yes, I know the comments are a tad broken on my blog at the time of this blog post, and I do apologize for that. Feel free to leave comments for anything on the Python Diary Google+ page, which can be found on the right side of this website.
thanks! This makes setting things up easy. That will give a good look-and-feel, but I wonder if you have any advice on hooking up jquery to Django models for CRUD? Is that within the realm of what bootstrap can do?
Thank you for your comment Tim. I am not aware of a perfectly integrated solution, like something Web2py or Rails has for Django. Tastypie is a REST API solution, which can assist a little, although you will need to do lots of coding in jQuery/JavaScript. Then there is Dajaxice and Dajax, which can use jQuery, but also works standalone. Dajaxice supports sending a serialized form back to the server which can then be used when initiating a ModelForm-class.
Thanks for another great post!
Hi Kev! awesome startup!
