Skip to main content

a theme for Pinax based on Twitter's Bootstrap

Project description

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.

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

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.

Project details


Release history Release notifications | RSS feed

This version

0.2

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

pinax-theme-bootstrap-0.2.tar.gz (130.2 kB view details)

Uploaded Source

File details

Details for the file pinax-theme-bootstrap-0.2.tar.gz.

File metadata

File hashes

Hashes for pinax-theme-bootstrap-0.2.tar.gz
Algorithm Hash digest
SHA256 c8dcbee49808f71a0690fcf7130a60f0d590fc08db22deb6774b3bda32492d3c
MD5 2f8ec45c50a1220dfa2a62210dbb250f
BLAKE2b-256 b93dd150ac39b1cdbd47dd895b0cd312fe9d89f1c541e4030425c2ee98712019

See more details on using hashes here.

Provenance

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page