Twitter Bootstrap Theme, for Pinax
==================================

A theme for Pinax 0.9 based on Twitter's open source Bootstrap framework.


Quick Start
-----------

Include "pinax-theme-bootstrap" in your requirements file and
"pinax_theme_bootstrap" in your INSTALLED APPS.

Make sure both template loaders and staticfiles finders includes
app directories.

Site name comes from Sites fixture.

Your "site_base.html" should extend "theme_base.html" and should provide
"footer" and "nav" blocks (the latter should just be a ul of li of a links).

Your pages should have blocks "head_title" and "body" and should extend
"site_base.html".

The url name "home" should be defined as the homepage.


Requirements
------------

This theme is officially supported when used in conjuction with Pinax 0.9.
If using the theme with Django < 1.4, you will need to install a recent
version of django-staticfiles as we use the `{% render %}` template tag.


Forms
-----

This theme ships with a basic template tag for rendering forms that match
the markup expected by Bootstrap.

To style forms, add the following to the top of your template ::
    
    {% load bootstrap_tags %}

and include your form using the following markup: ::
    
    <form>
        <fieldset>
            <legend>My Form</legend>
            {% csrf_token %}
            {{ form|as_bootstrap }}
            <div class="form-actions">
              <button type="submit" class="btn btn-primary">Save changes</button>
            </div>
        </fieldset>
    </form>

Bootstrap includes styles for four types of forms. To change the display of
your form, add one of the following class attributes to your form tag:


==================  ================   ==============================================================
        Name             Class                        Description
==================  ================   ==============================================================
Vertical (default)  .form-vertical     Stacked, left-aligned labels over controls
Horizontal          .form-horizontal   Float left, right-aligned labels on same line as controls
Inline              .form-inline       Left-aligned label and inline-block controls for compact style
Search              .form-search       Extra-rounded text input for a typical search aesthetic
==================  ================   ==============================================================


Navigation
----------

To modify your site's navigation bar, implement the "nav" block in
your site_base.html using the following pattern: ::

    <ul class="nav">
        <li id="tab_first">
            <a href="#">First Link</a>
        </li>
        <li id="tab_second">
            <a href="#">Second Link</a>
        </li>
        <li id="tab_third" class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Some Dropdown Menu
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">Some Link</a></li>
                <li><a href="#">Another Link</a></li>
            </ul>
        </li>
    </ul>


Upgrading from Bootstrap 1.x
----------------------------

Previous versions of this theme were based off of Bootstrap 1.x.
The following is a list of changes that you need to be aware of
when upgrading existing sites:

- The default grid has changed from 16 columns to 12 columns.
- Bootstrap 2 provides a responsive grid, which we've enabled by default.
- Forms markup has changed slightly, see the example above.
- Navigation bar markup now requires a class="nav" on the ul.
