Django Bootstrap Toolkit

For this project's web interface, we chose to use Twitter Bootstrap. This way, a lot of design things we would have otherwise had to build manually, we can draw upon a pre-existing pack of styles. There were a few unique issues we ran across as we got this to work, however. For starters, Django will not integrate straight-up Twitter Bootstrap because it doesn't know how. We need a way to use Bootstrap THROUGH Django. After a little bit of Google searching, I ran across a Youtube video tutorial that someone was, among other things, doing exactly this: installing Bootstrap through Django.
The link is as follows: http://youtu.be/utR1KtRFvxg
It was actually quite easy in the long run. Assuming you already have pip3 for python3, you can just run this command:

sudo pip3 install django-bootstrap-toolkit

This will install the django-bootstrap-toolkit for your python3. Once this is complete, you will need to modify your settings.py. The section that reads:

INSTALLED_APPS = (
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
)

or something like that, just add the following to the end of the list:  'bootstrap_toolkit',

so it would look like this or more. Just make sure you have the bootstrap_toolkit.

INSTALLED_APPS = (
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'bootstrap_toolkit',
)

Django is now using the bootstrap_toolkit.

Then comes the issue of actually using it. As you could imagine, with the Django integration, you can't always just copy a template from http://getbootstrap.com because, again, Django doesn't know what you're doing if you do it wrong. To start, I couldn't just download the .zip from bootstrap's site. I had to load external css pages because Django didn't know where I was actually putting those files so it didn't use them. If I use external style sheets, they will always work regardless of whether Django know's it's there or not. I did the following:

<meta charset=”utf-8”>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

This loads the css pages. I put this within the header tag. Then, for the javascript needed for bootstrap, I did the following:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

These lines go right before the close of the body tag because I read that this makes the page load a little faster.

You can now start copying and pasting templates from the twitter bootstrap website to see how they work with your project. I added a navbar to every page by putting it in the base.html template. This ended up covering content. Should you choose to take the same route, make sure to add something like this somewhere in your document:

<style type="text/css">
body{padding-top: 60px;}
</style>

this pushes everything down a bit. Finally, to add the Django dynamic content, put the following within your body tag:

<div class="container">
{% block content %}
{% endblock %}
</div>

put this after any header navbar and your content will appear under the navbar. The {% block content %} and {% endblock %} tags tell Django to put the dynamic content here.

At this point, you experiment. Try adding a visual feature and integrate it in the templates. If it breaks, either fix it or try something different.

Arik