django-bootstrap-ui documentation · django-bootstrap-ui documentation, release 0.2.0 themes you...

38
django-bootstrap-ui Documentation Release 0.2.0 Timo Rieber Oct 01, 2017

Upload: others

Post on 10-Jul-2020

75 views

Category:

Documents


0 download

TRANSCRIPT

django-bootstrap-ui DocumentationRelease 0.2.0

Timo Rieber

Oct 01, 2017

Contents

1 Features 3

2 Technical requirements 5

3 Code and contribution 7

4 Index 94.1 Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94.2 Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104.3 Template tag API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154.4 Views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244.5 Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254.6 Release notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

Python Module Index 31

i

ii

django-bootstrap-ui Documentation, Release 0.2.0

django-bootstrap-ui aims to be a powerful Django app to ease the integration of the popular Bootstrap UI framework.It is written in Python and built on the Django web framework.

Contents 1

django-bootstrap-ui Documentation, Release 0.2.0

2 Contents

CHAPTER 1

Features

• Full-featured Bootstrap 3 template (3.3.7)

• Latest Font Awesome integration (4.7.0)

• Built-in Bootstrap and Bootswatch themes (3.3.7)

• Ready-to-use Bootstrap component templates

• Intuitive template tag API for generating valid Bootstrap markup

• Extensive and up-to-date documentation

• Mainstream Python (2.7, 3.3, 3.4, 3.5, 3.6) and Django (1.8, 1.9, 1.10, 1.11) support

• Outstanding test coverage

• Continuously integrated codebase

3

django-bootstrap-ui Documentation, Release 0.2.0

4 Chapter 1. Features

CHAPTER 2

Technical requirements

Below is the list of currently supported combinations of Django and Python:

# Django Python1 1.8 2.7, 3.3, 3.4, 3.52 1.9, 1.10 2.7, 3.4, 3.53 1.11 2.7, 3.4, 3.5, 3.6

5

django-bootstrap-ui Documentation, Release 0.2.0

6 Chapter 2. Technical requirements

CHAPTER 3

Code and contribution

The code is open source and released under the ISC License (ISCL). It is available on GitHub and follows the guide-lines about Semantic Versioning for transparency within the release cycle and backward compatibility whenever pos-sible.

All contributions are welcome, whether bug reports, code contributions and reviews, documentation or feature re-quests.

7

django-bootstrap-ui Documentation, Release 0.2.0

8 Chapter 3. Code and contribution

CHAPTER 4

Index

Getting started

Installation

1. First install the package using pip:

pip install django-bootstrap-ui

2. Add bootstrap_ui to your INSTALLED_APPS setting:

INSTALLED_APPS = (...'bootstrap_ui',...

)

Usage

Bootstrap template

Prepare your page for Bootstrap and provide your content:

1. Extend bootstrap-skeleton.html in your base template:

{% extends "bootstrap_ui/bootstrap-skeleton.html" %}

2. Fill predefined blocks with your content:

{% block body-content %}<h1>Hello, I'm using django-bootstrap-ui!</h1>

{% endblock %}

9

django-bootstrap-ui Documentation, Release 0.2.0

Themes

You can style your page with Bootstrap or Bootswatch themes. Set DJANGO_BOOTSTRAP_UI_THEME to a valididentifier in your settings.py for a project-wide default theme:

# django-bootstrap-ui settingsDJANGO_BOOTSTRAP_UI_THEME = 'bootswatch-paper'

See Page skeleton templates for more details.

Bootstrap component templates

Render complete Bootstrap components by including our default implementations. Example:

1. Provide a list of strings ['alpha', 'beta', 'gamma'] as template variable items

2. Include listgroup.html parameterized with type='list' and items=items:

{% include 'bootstrap_ui/listgroup.html' with type='list' items=items→˓only %}

Template tag API

Generate your own, customized Bootstrap elements using our template tags. Example:

1. Load bootstrap_ui_tags in your template:

{% load bootstrap_ui_tags %}

2. Use Bootstrap components through intuitive template tags:

{% listgroup %}{% listgroupitem %}

Your raw text.{% endlistgroupitem %}{% listgroupitem %}

You may also use a {{ context_variable }}.{% endlistgroupitem %}

{% endlistgroup %}

3. Some Bootstrap components support different html tags, to change the default add a parameter:

{% listgroup use_tag="div" %}...Your list group content goes here....

{% endlistgroup %}

Templates

django-bootstrap-ui enables you to quickly get started through a set of predefined templates. There are two sort oftemplates:

10 Chapter 4. Index

django-bootstrap-ui Documentation, Release 0.2.0

1. Page skeleton templates

These templates render entire html pages. They are meant to serve as base templates to be extended and provideHTML5 and Bootstrap skeletons.

2. Bootstrap component templates

These templates encapsulate Bootstrap components. Included and parameterized as a one-liner within your pagetemplates they will return completely rendered UI components.

Page skeleton templates

Prepare your page for Bootstrap and provide your content.

HTML5 skeleton

This is our root template (html5-skeleton.html) with a minimalistic and clean HTML5 skeleton. It comes witha well-thought-out block structure as follows, but is not meant to be extended directly. Extend the Bootstrap skeletoninstead.

head-meta

Provide additional meta tags within the <head>. Example:

{% block head-meta %}<meta name="keywords" content="wood, furniture, garden, garden-table, etc.">

{% endblock %}

head-title

Provide your content for <title>. Example:

{% block head-title %}Your title

{% endblock %}

head-css

Provide additional <link> tags with css references. Example:

{% block head-css %}<link href="css/your-theme.css" media="screen" rel="stylesheet" type="text/css">

{% endblock %}

head-javascript

Provide additional <script> tags with javascript source references or inline code. Example:

4.2. Templates 11

django-bootstrap-ui Documentation, Release 0.2.0

{% block head-javascript %}<script src="js/your-script.js" type="text/javascript"></script>

{% endblock %}

head-extension

Provide other content within the <head>. Example:

{% block head-extension %}Whatever content you need at the end of the head.

{% endblock %}

body-content

All your page content in <body>. Example:

{% block body-content %}<h1>Hello, django-bootstrap-ui!</h1>

{% endblock %}

body-javascript

Provide additional <script> tags with javascript source references or inline code just before <body> ends. Exam-ple:

{% block body-javascript %}<script src="js/your-lately-embedded-script.js" type="text/javascript"></script>

{% endblock %}

Bootstrap skeleton

This template (bootstrap-skeleton.html) extends our HTML5 skeleton and provides Bootstrap support. Ex-tend this to get a working, bootstraped page layout.

{% extends "bootstrap_ui/bootstrap-skeleton.html" %}

There are no additional blocks besides the above, the following ones are sensibly used by this template:

• head-meta

• head-css

• head-javascript

• body-javascript

Be careful when you are going to use these blocks with your own stuff. Remember to apply {{ block.super }}so you won’t overwrite existing and necessary Bootstrap resources. Example:

{% block head-meta %}{{ block.super }}

12 Chapter 4. Index

django-bootstrap-ui Documentation, Release 0.2.0

<!-- Page description --><meta name="description" content="This is your page description." />

{% endblock %}

Apply themes

By default the standard, plain Bootstrap style is applied. But in addition, this template is ready to include Bootstrapand Bootswatch themes. You can change this behavior in two ways, they may be used together:

1. Set DJANGO_BOOTSTRAP_UI_THEME to a valid identifier in your settings.py for a project-wide defaulttheme:

# django-bootstrap-ui settingsDJANGO_BOOTSTRAP_UI_THEME = 'bootswatch-paper'

2. Set DJANGO_BOOTSTRAP_UI_THEME to a valid identifier in your user’s session or cookie using the set_themeview.

The following table lists currently available themes:

Name Identifier Provided byExample theme bootstrap BootstrapCerulean bootswatch-cerulean BootswatchCosmo bootswatch-cosmo BootswatchCyborg bootswatch-cyborg BootswatchDarkly bootswatch-darkly BootswatchFlatly bootswatch-flatly BootswatchJournal bootswatch-journal BootswatchLumen bootswatch-lumen BootswatchPaper bootswatch-paper BootswatchReadable bootswatch-readable BootswatchSandstone bootswatch-sandstone BootswatchSimplex bootswatch-simplex BootswatchSlate bootswatch-slate BootswatchSpacelab bootswatch-spacelab BootswatchSuperhero bootswatch-superhero BootswatchUnited bootswatch-united BootswatchYeti bootswatch-yeti Bootswatch

All other values will be ignored and default to the standard, plain Bootstrap style.

Bootstrap component templates

Render complete Bootstrap components by including our default implementations.

List group

This template (listgroup.html) renders a list group. Two parameters are required:

• type

• items

4.2. Templates 13

django-bootstrap-ui Documentation, Release 0.2.0

Basic example

Given a list of strings ['alpha', 'beta', 'gamma'] as template variable items:

{% include 'bootstrap_ui/listgroup.html' with type='list' items=items only %}

This renders the following html code:

<ul class="list-group"><li class="list-group-item">

alpha</li><li class="list-group-item">

beta</li><li class="list-group-item">

gamma</li>

</ul>

Button items

Given a list of strings ['alpha', 'beta', 'gamma'] as template variable items:

{% include 'bootstrap_ui/listgroup.html' with type='buttonlist' items=items only %}

This renders the following html code:

<div class="list-group"><button class="list-group-item" type="button">

alpha</button><button class="list-group-item" type="button">

beta</button><button class="list-group-item" type="button">

gamma</button>

</div>

Linked items

Given a list of 2-tuples containing [('alpha', 'http://example.org'), ('beta', 'local.html'), ('gamma', '#')] as template variable items:

{% include 'bootstrap_ui/listgroup.html' with type='linklist' items=items only %}

This renders the following html code:

<div class="list-group"><a class="list-group-item" href="http://example.org">

alpha</a><a class="list-group-item" href="local.html">

14 Chapter 4. Index

django-bootstrap-ui Documentation, Release 0.2.0

beta</a><a class="list-group-item" href="#">

gamma</a>

</div>

Template tag API

If the predefined templates do not fit your needs you can just use django-bootstrap-ui’s template tags on which ourown templates are built on. There are two sort of tags:

1. Bootstrap components API

Generate your own, customized Bootstrap elements using these template tags.

2. Utilities API

These tags help you with.

Bootstrap components API

Generate your own, customized Bootstrap elements using these template tags.

Grid system

See http://getbootstrap.com/css/#grid.

Container

Use the container tag to house a fixed-width bootstrap grid system:

{% container %}...

{% endcontainer %}

This renders the following html code:

<div class="container">...

</div>

Provide type="fluid" as parameter for a full-width container housing your grid:

{% container type="fluid" %}...

{% endcontainer %}

This renders the following html code:

<div class="container-fluid">...

</div>

4.3. Template tag API 15

django-bootstrap-ui Documentation, Release 0.2.0

Row

Use row to create horizontal groups of columns within containers:

{% row %}...

{% endrow %}

This renders the following html code:

<div class="row">...

</div>

Remember that according to the bootstrap rules only columns may be immediate children of rows.

Column

Basic example

Place column within rows to span a certain width of your row:

{% column %}Lorem ipsum. Your content goes here!

{% endcolumn %}

This renders the following html code:

<div class="col-xs-12">Lorem ipsum. Your content goes here!

</div>

As bootstrap is a mobile first framework grid classes are applied to devices with screen widths greater than or equal tothe breakpoint sizes. Therefore column used without parameters applies a col-xs-12 css class.

Custom column width and larger devices

Provide xs, sm, md and/or lg parameters to change the column span and address larger viewports:

{% column xs="8" sm="6" md="4" lg="3" %}Lorem ipsum. Your content goes here!

{% endcolumn %}

This renders the following html code:

<div class="col-xs-8 col-sm-6 col-md-4 col-lg-3">Lorem ipsum. Your content goes here!

</div>

Every individual parameter may be omitted, you can use any combination of them.

16 Chapter 4. Index

django-bootstrap-ui Documentation, Release 0.2.0

Column offsets

Provide xs_offset, sm_offset, md_offset and/or lg_offset parameters to increase the left margin of acolumn:

{% column xs="7" md="10" md_offset="1" %}Lorem ipsum. Your content goes here!

{% endcolumn %}

This renders the following html code:

<div class="col-xs-7 col-md-10 col-md-offset-1">Lorem ipsum. Your content goes here!

</div>

Every individual parameter may be omitted, you can use any combination of them.

Column ordering with pushes and pulls

Provide xs_push, sm_push, md_push and/or lg_push parameters as well as the pull equivalents to easilychange to order of columns:

{% column md="9" md_push="3" %}Defined first, showing second at md and greater devices

{% endcolumn %}{% column md="3" md_pull="9" %}

Defined second, showing first at md and greater devices{% endcolumn %}

This renders the following html code:

<div class="col-md-9 col-md-push-3">Defined first, showing second at md and greater devices

</div><div class="col-md-3 col-md-pull-9">

Defined second, showing first at md and greater devices</div>

Every individual parameter may be omitted, you can use any combination of them.

List group

See http://getbootstrap.com/components/#list-group.

Basic example

Use the listgroup tag with nested listgroupitem tags:

{% listgroup %}{% listgroupitem %}

Your raw text.{% endlistgroupitem %}{% listgroupitem %}

You may also use a {{ context_variable }}.

4.3. Template tag API 17

django-bootstrap-ui Documentation, Release 0.2.0

{% endlistgroupitem %}{% endlistgroup %}

This renders the following html code:

<ul class="list-group"><li class="list-group-item">

Your raw text.</li><li class="list-group-item">

You may also use a context variable.</li>

</ul>

Button items

Provide use_tag parameters to listgroup and listgroupitem to render button items:

{% listgroup use_tag="div" %}{% listgroupitem use_tag="button" %}

First button with {{ your_text }}{% endlistgroupitem %}{% listgroupitem use_tag="button" %}

Second button with {{ your_second_text }}{% endlistgroupitem %}

{% endlistgroup %}

This renders the following html code:

<div class="list-group"><button class="list-group-item" type="button">

First button with your text.</button><button class="list-group-item" type="button">

Second button with your second text.</button>

</div>

Linked items

Provide use_tag and link parameters to get linked items:

{% listgroup use_tag="div" %}{% listgroupitem use_tag="a" link="http://example.org" %}

External link to {{ ext_page_title }}.{% endlistgroupitem %}{% listgroupitem use_tag="a" link=local_reference %}

Internal link to {{ your_page_title }}. Note how the link is provided as a→˓context variable.

{% endlistgroupitem %}{% endlistgroup %}

This renders the following html code:

18 Chapter 4. Index

django-bootstrap-ui Documentation, Release 0.2.0

<div class="list-group"><a class="list-group-item" href="http://example.org">

External link to Example.</a><a class="list-group-item" href="your_local_link">

Internal link to awesame internal page. Note how the link is provided as a→˓context variable.

</a></div>

Disabled items

Provide add_css_classes parameter for listgroupitem:

{% listgroup use_tag="div" %}{% listgroupitem use_tag="a" link="http://example.org" add_css_classes="disabled"

→˓%}External link to {{ ext_page_title }}, but in disabled state.

{% endlistgroupitem %}{% listgroupitem use_tag="a" link=local_reference %}

Internal link to {{ your_page_title }}. This one is enabled.{% endlistgroupitem %}

{% endlistgroup %}

This renders the following html code:

<div class="list-group"><a class="list-group-item disabled" href="http://example.org">

External link to Example, but in disabled state.</a><a class="list-group-item" href="your_local_link">

Internal link to awesame internal page. This one is enabled.</a>

</div>

Contextual classes

Provide valid bootstrap class names to add_css_classes parameter for listgroupitem:

{% listgroup %}{% listgroupitem add_css_classes="list-group-item-success" %}

Your success text.{% endlistgroupitem %}{% listgroupitem add_css_classes="list-group-item-info" %}

Your info text.{% endlistgroupitem %}{% listgroupitem add_css_classes="list-group-item-warning" %}

Your warning text.{% endlistgroupitem %}{% listgroupitem add_css_classes="list-group-item-danger" %}

Your danger text.{% endlistgroupitem %}

{% endlistgroup %}

4.3. Template tag API 19

django-bootstrap-ui Documentation, Release 0.2.0

This renders the following html code:

<ul class="list-group"><li class="list-group-item list-group-item-success">

Your success text.</li><li class="list-group-item list-group-item-info">

Your info text.</li><li class="list-group-item list-group-item-warning">

Your warning text.</li><li class="list-group-item list-group-item-danger">

Your danger text.</li>

</ul>

Custom content

You may also render custom html content within your list-group-item:

{% listgroup use_tag="div" %}{% listgroupitem use_tag="div" %}

<h2>A custom title</h2><p>With a custom paragraph.</p>

{% endlistgroupitem %}{% endlistgroup %}

This renders the following html code:

<div class="list-group"><div class="list-group-item">

<h2>A custom title</h2><p>With a custom paragraph.</p>

</div></div>

Panels

See http://getbootstrap.com/components/#panels.

Basic example

Use the panel in a simple way:

{% panel %}{% panelbody %}

Lorem ipsum.{% endpanelbody %}

{% endpanel %}

This renders the following html code:

20 Chapter 4. Index

django-bootstrap-ui Documentation, Release 0.2.0

<div class="panel panel-default"><div class="panel-body">

Lorem ipsum.</div>

</div>

Panel with heading

Add a nested panel-heading:

{% panel %}{% panelheading %}

Your panel heading{% endpanelheading %}{% panelbody %}

Lorem ipsum.{% endpanelbody %}

{% endpanel %}

This renders the following html code:

<div class="panel panel-default"><div class="panel-heading">

Your panel heading</div><div class="panel-body">

Lorem ipsum.</div>

</div>

In addition you may specify a panel-title within panel-heading using h1 to h6:

{% panel %}{% panelheading %}

{% paneltitle use_tag="h1" %}Your panel heading

{% panelheading %}{% endpanelheading %}{% panelbody %}

Lorem ipsum.{% endpanelbody %}

{% endpanel %}

This renders the following html code:

<div class="panel panel-default"><div class="panel-heading">

Your panel heading</div><div class="panel-body">

Lorem ipsum.</div>

</div>

4.3. Template tag API 21

django-bootstrap-ui Documentation, Release 0.2.0

Panel with footer

Add a nested panel-footer:

{% panel %}{% panelbody %}

Lorem ipsum.{% endpanelbody %}{% panelfooter %}

Your panel footer{% endpanelfooter %}

{% endpanel %}

This renders the following html code:

<div class="panel panel-default"><div class="panel-body">

Lorem ipsum.</div><div class="panel-footer">

Your panel footer</div>

</div>

Contextual alternatives

Provide valid bootstrap class names to add_css_classes parameter for panel:

{% panel add_css_classes="panel-primary" %}{% panelbody %}

Your primary panel.{% endpanelbody %}

{% endpanel %}

This renders the following html code:

<div class="panel panel-default panel-primary"><div class="panel-body">

Your primary panel.</div>

</div>

Other valid css classes are panel-success, panel-info, panel-warning and panel-danger.

With list groups

As mentioned in the bootstrap docs you may use a list group inside your panel, even in addition to default panelcontents:

{% panel %}{% panelheading %}

Panel heading{% endpanelheading %}{% panelbody %}

<p>...</p>

22 Chapter 4. Index

django-bootstrap-ui Documentation, Release 0.2.0

{% endpanelbody %}

{% listgroup %}{% listgroupitem %}

Cras justo odio{% endlistgroupitem %}{% listgroupitem %}

Dapibus ac facilisis in{% endlistgroupitem %}{% listgroupitem %}

Morbi leo risus{% endlistgroupitem %}{% listgroupitem %}

Porta ac consectetur ac{% endlistgroupitem %}{% listgroupitem %}

Vestibulum at eros{% endlistgroupitem %}

{% endlistgroup %}{% endpanel %}

This renders the following html code:

<div class="panel panel-default"><div class="panel-heading">

Panel heading</div><div class="panel-body">

<p>...</p></div>

<ul class="list-group"><li class="list-group-item">Cras justo odio</li><li class="list-group-item">Dapibus ac facilisis in</li><li class="list-group-item">Morbi leo risus</li><li class="list-group-item">Porta ac consectetur ac</li><li class="list-group-item">Vestibulum at eros</li>

</ul></div>

Utilities API

Some utilities and helper tags to make your and our lifes easier.

get_value_from_session_or_cookie

Returns a value for a given key from a user’s session or cookie with fallback to global settings:

1. Check request.session for key

2. Check request.COOKIES for key

3. Check settings.py for key

4. Fall back to ''

This tag is implemented as an assignment tag. Usage:

4.3. Template tag API 23

django-bootstrap-ui Documentation, Release 0.2.0

{% load bootstrap_ui_tags %}

{% get_value_from_session_or_cookie 'DJANGO_BOOTSTRAP_UI_THEME' as theme %}...

Views

django-bootstrap-ui comes with predefined views and corresponding urls that get you right on the track.

Setting the bootstrap theme

The set_theme view

Use the set_theme view to change the style of the page on a per-user basis. set_theme

1. determines the page to redirect to after execution in the following manner:

(a) checks the next parameter from request.POST for a valid url

(b) checks the next parameter from request.GET for a valid url

(c) checks the HTTP_REFERER value in request.META for a valid url

(d) falls back to /

2. sets the theme using the theme parameter from request.POST as DJANGO_BOOTSTRAP_UI_THEME in:

(a) the user’s session if available

(b) the user’s cookie

3. redirects to the evaluated page

Since this view changes how the user will see the rest of the site, it must only be accessed as a POST request. If calledas a GET request, it will redirect to the page in the request (the next parameter) without changing any state.

The set_theme url

A named url set_theme to the above view is available within our urls.py, so you may easily include this routein your project like this:

from django.conf.urls import patterns, include, url

urlpatterns = patterns("",...url(r"^bootstrap_ui/", include("bootstrap_ui.urls")),...

)

Then use this url to provide the action attribute for your form:

<form method="post" action="{% url 'set_theme' %}">{% csrf_token %}<input type="text" name="next" value="/redirect-to-this-page"/><input type="text" name="theme" value="bootstrap"/>

24 Chapter 4. Index

django-bootstrap-ui Documentation, Release 0.2.0

<button type="submit">Go!</button></form>

See Apply themes for valid theme identifiers.

Reference

Template tags

bootstrap_ui_tags.get_value_from_session_or_cookie(context, key)

class bootstrap_ui_tags.HtmlTagNode(tag_name, *args, **kwargs)Bases: tag_parser.basetags.BaseNode

Implements html tag fundamentals

allowed_kwargs = (‘add_css_classes’, ‘use_tag’)

end_tag_name = ‘endhtmltag’

min_args = None

allowed_tags = [’html’, ‘head’, ‘title’, ‘base’, ‘link’, ‘meta’, ‘style’, ‘script’, ‘noscript’, ‘body’, ‘section’, ‘nav’, ‘article’, ‘aside’, ‘h1’, ‘h2’, ‘h3’, ‘h4’, ‘h5’, ‘h6’, ‘hgroup’, ‘header’, ‘footer’, ‘address’, ‘p’, ‘hr’, ‘pre’, ‘blockquote’, ‘ol’, ‘ul’, ‘li’, ‘dl’, ‘dt’, ‘dd’, ‘figure’, ‘figcaption’, ‘div’, ‘a’, ‘em’, ‘strong’, ‘small’, ‘s’, ‘cite’, ‘q’, ‘dfn’, ‘abbr’, ‘time_’, ‘code’, ‘var’, ‘samp’, ‘kbd’, ‘sub’, ‘sup’, ‘i’, ‘b’, ‘u’, ‘mark’, ‘ruby’, ‘rt’, ‘rp’, ‘bdi’, ‘bdo’, ‘span’, ‘br’, ‘wbr’, ‘ins’, ‘del_’, ‘img’, ‘iframe’, ‘embed’, ‘object_’, ‘param’, ‘video’, ‘audio’, ‘source’, ‘track’, ‘canvas’, ‘map_’, ‘area’, ‘table’, ‘caption’, ‘colgroup’, ‘col’, ‘tbody’, ‘thead’, ‘tfoot’, ‘tr’, ‘td’, ‘th’, ‘form’, ‘fieldset’, ‘legend’, ‘label’, ‘input_’, ‘button’, ‘select’, ‘datalist’, ‘optgroup’, ‘option’, ‘textarea’, ‘keygen’, ‘output’, ‘progress’, ‘meter’, ‘details’, ‘summary’, ‘command’, ‘menu’, ‘comment’]

default_css_classes = []

default_tag = ‘div’

render_tag(context, safe=True, *tag_args, **tag_kwargs)

tagalias of comment

class bootstrap_ui_tags.BootstrapNode(tag_name, *args, **kwargs)Bases: bootstrap_ui_tags.HtmlTagNode

Implements bootstrap component fundamentals

allowed_kwargs = (‘use_tag’, ‘add_css_classes’, ‘link’, ‘add_css_classes’)

end_tag_name = ‘endbootstraptag’

allowed_tags = [’a’, ‘div’, ‘h1’, ‘h2’, ‘h3’, ‘h4’, ‘h5’, ‘h6’, ‘ul’, ‘li’]

default_css_classes = [’bs’]

default_tag = ‘div’

class bootstrap_ui_tags.ColumnNode(tag_name, *args, **kwargs)Bases: bootstrap_ui_tags.BootstrapNode

Renders a column

allowed_kwargs = (‘xs’, ‘sm’, ‘md’, ‘lg’, ‘xs_offset’, ‘sm_offset’, ‘md_offset’, ‘lg_offset’, ‘xs_push’, ‘sm_push’, ‘md_push’, ‘lg_push’, ‘xs_pull’, ‘sm_pull’, ‘md_pull’, ‘lg_pull’)

end_tag_name = ‘endcolumn’

default_css_classes = [’col-xs-12’]

default_tag = ‘div’

render_tag(context, *tag_args, **tag_kwargs)

4.5. Reference 25

django-bootstrap-ui Documentation, Release 0.2.0

class bootstrap_ui_tags.RowNode(tag_name, *args, **kwargs)Bases: bootstrap_ui_tags.BootstrapNode

Renders a row

allowed_kwargs = ()

end_tag_name = ‘endrow’

default_css_classes = [’row’]

default_tag = ‘div’

class bootstrap_ui_tags.ContainerNode(tag_name, *args, **kwargs)Bases: bootstrap_ui_tags.BootstrapNode

Renders a container

allowed_kwargs = (‘type’,)

end_tag_name = ‘endcontainer’

default_css_classes = [’container’]

default_tag = ‘div’

render_tag(context, *tag_args, **tag_kwargs)

class bootstrap_ui_tags.ListGroupNode(tag_name, *args, **kwargs)Bases: bootstrap_ui_tags.BootstrapNode

Renders a list group

end_tag_name = ‘endlistgroup’

allowed_tags = [’div’, ‘ul’]

default_css_classes = [’list-group’]

default_tag = ‘ul’

class bootstrap_ui_tags.ListGroupItemNode(tag_name, *args, **kwargs)Bases: bootstrap_ui_tags.BootstrapNode

Renders a list group item

end_tag_name = ‘endlistgroupitem’

allowed_tags = [’a’, ‘button’, ‘div’, ‘li’]

default_css_classes = [’list-group-item’]

default_tag = ‘li’

render_tag(context, *tag_args, **tag_kwargs)

class bootstrap_ui_tags.PanelNode(tag_name, *args, **kwargs)Bases: bootstrap_ui_tags.BootstrapNode

Renders a panel

end_tag_name = ‘endpanel’

allowed_tags = [’div’]

default_css_classes = [’panel’, ‘panel-default’]

default_tag = ‘div’

26 Chapter 4. Index

django-bootstrap-ui Documentation, Release 0.2.0

class bootstrap_ui_tags.PanelHeadingNode(tag_name, *args, **kwargs)Bases: bootstrap_ui_tags.BootstrapNode

Renders a panel heading

end_tag_name = ‘endpanelheading’

allowed_tags = [’div’]

default_css_classes = [’panel-heading’]

default_tag = ‘div’

class bootstrap_ui_tags.PanelTitleNode(tag_name, *args, **kwargs)Bases: bootstrap_ui_tags.BootstrapNode

Renders a panel title

end_tag_name = ‘endpaneltitle’

allowed_tags = [’h1’, ‘h2’, ‘h3’, ‘h4’, ‘h5’, ‘h6’]

default_css_classes = [’panel-title’]

default_tag = ‘h3’

class bootstrap_ui_tags.PanelBodyNode(tag_name, *args, **kwargs)Bases: bootstrap_ui_tags.BootstrapNode

Renders a panel body

end_tag_name = ‘endpanelbody’

allowed_tags = [’div’]

default_css_classes = [’panel-body’]

default_tag = ‘div’

class bootstrap_ui_tags.PanelFooterNode(tag_name, *args, **kwargs)Bases: bootstrap_ui_tags.BootstrapNode

Renders a panel footer

end_tag_name = ‘endpanelfooter’

allowed_tags = [’div’]

default_css_classes = [’panel-footer’]

default_tag = ‘div’

Release notes

django-bootstrap-ui 0.5.0

All features, bug fixes as well as code cleanup and optimization changes are listed below.

Features

• Added support for Django 1.11

• Added support for Python 3.6

4.6. Release notes 27

django-bootstrap-ui Documentation, Release 0.2.0

django-bootstrap-ui 0.4.0

All features, bug fixes as well as code cleanup and optimization changes are listed below.

Features

• Upgraded to Bootstrap 3.3.7

• Upgraded to jQuery 1.12.4

• Upgraded to Font Awesome 4.7.0

• Added support for Django 1.10

• Dropped support for Django 1.7

django-bootstrap-ui 0.3.0

All features, bug fixes as well as code cleanup and optimization changes are listed below.

Features

• Upgraded to Bootstrap 3.3.6

• Upgraded to Font Awesome 4.5.0

• Moved project to texperience

django-bootstrap-ui 0.2.0

All features, bug fixes as well as code cleanup and optimization changes are listed below.

Features

• Implemented grid column offsets

• Added grid column pushes and pulls

• Added support for Django 1.9

• Added support for Python 3.5

django-bootstrap-ui 0.1.0

All features, bug fixes as well as code cleanup and optimization changes are listed below.

Features

• Implemented session-based theme switcher

• Integrated Bootstrap and Bootswatch themes

• Provided template for list groups

• Implemented panels in template tag API

28 Chapter 4. Index

django-bootstrap-ui Documentation, Release 0.2.0

• Implemented list groups in template tag API

• Implemented grid system in template tag API

• Introduced template tag API

• Provided full-featured Bootstrap base template

• Provided clean HTML5 base template

• Integrated Font Awesome 4.3.0

• Implemented codebase on Bootstrap 3.3.5

• Established support for Django 1.7 and 1.8

• Established support for Python 2.7, 3.3 and 3.4

4.6. Release notes 29

django-bootstrap-ui Documentation, Release 0.2.0

30 Chapter 4. Index

Python Module Index

bbootstrap_ui_tags, 25

31

django-bootstrap-ui Documentation, Release 0.2.0

32 Python Module Index

Index

Aallowed_kwargs (bootstrap_ui_tags.BootstrapNode at-

tribute), 25allowed_kwargs (bootstrap_ui_tags.ColumnNode at-

tribute), 25allowed_kwargs (bootstrap_ui_tags.ContainerNode at-

tribute), 26allowed_kwargs (bootstrap_ui_tags.HtmlTagNode

attribute), 25allowed_kwargs (bootstrap_ui_tags.RowNode attribute),

26allowed_tags (bootstrap_ui_tags.BootstrapNode at-

tribute), 25allowed_tags (bootstrap_ui_tags.HtmlTagNode attribute),

25allowed_tags (bootstrap_ui_tags.ListGroupItemNode at-

tribute), 26allowed_tags (bootstrap_ui_tags.ListGroupNode at-

tribute), 26allowed_tags (bootstrap_ui_tags.PanelBodyNode at-

tribute), 27allowed_tags (bootstrap_ui_tags.PanelFooterNode

attribute), 27allowed_tags (bootstrap_ui_tags.PanelHeadingNode at-

tribute), 27allowed_tags (bootstrap_ui_tags.PanelNode attribute), 26allowed_tags (bootstrap_ui_tags.PanelTitleNode at-

tribute), 27

Bbootstrap_ui_tags (module), 25BootstrapNode (class in bootstrap_ui_tags), 25

CColumnNode (class in bootstrap_ui_tags), 25ContainerNode (class in bootstrap_ui_tags), 26

Ddefault_css_classes (bootstrap_ui_tags.BootstrapNode at-

tribute), 25

default_css_classes (bootstrap_ui_tags.ColumnNode at-tribute), 25

default_css_classes (bootstrap_ui_tags.ContainerNodeattribute), 26

default_css_classes (bootstrap_ui_tags.HtmlTagNode at-tribute), 25

default_css_classes (boot-strap_ui_tags.ListGroupItemNode attribute),26

default_css_classes (bootstrap_ui_tags.ListGroupNodeattribute), 26

default_css_classes (bootstrap_ui_tags.PanelBodyNodeattribute), 27

default_css_classes (bootstrap_ui_tags.PanelFooterNodeattribute), 27

default_css_classes (boot-strap_ui_tags.PanelHeadingNode attribute),27

default_css_classes (bootstrap_ui_tags.PanelNodeattribute), 26

default_css_classes (bootstrap_ui_tags.PanelTitleNodeattribute), 27

default_css_classes (bootstrap_ui_tags.RowNode at-tribute), 26

default_tag (bootstrap_ui_tags.BootstrapNode attribute),25

default_tag (bootstrap_ui_tags.ColumnNode attribute),25

default_tag (bootstrap_ui_tags.ContainerNode attribute),26

default_tag (bootstrap_ui_tags.HtmlTagNode attribute),25

default_tag (bootstrap_ui_tags.ListGroupItemNode at-tribute), 26

default_tag (bootstrap_ui_tags.ListGroupNode attribute),26

default_tag (bootstrap_ui_tags.PanelBodyNode at-tribute), 27

default_tag (bootstrap_ui_tags.PanelFooterNode at-tribute), 27

33

django-bootstrap-ui Documentation, Release 0.2.0

default_tag (bootstrap_ui_tags.PanelHeadingNodeattribute), 27

default_tag (bootstrap_ui_tags.PanelNode attribute), 26default_tag (bootstrap_ui_tags.PanelTitleNode attribute),

27default_tag (bootstrap_ui_tags.RowNode attribute), 26

Eend_tag_name (bootstrap_ui_tags.BootstrapNode at-

tribute), 25end_tag_name (bootstrap_ui_tags.ColumnNode at-

tribute), 25end_tag_name (bootstrap_ui_tags.ContainerNode at-

tribute), 26end_tag_name (bootstrap_ui_tags.HtmlTagNode at-

tribute), 25end_tag_name (bootstrap_ui_tags.ListGroupItemNode

attribute), 26end_tag_name (bootstrap_ui_tags.ListGroupNode at-

tribute), 26end_tag_name (bootstrap_ui_tags.PanelBodyNode

attribute), 27end_tag_name (bootstrap_ui_tags.PanelFooterNode at-

tribute), 27end_tag_name (bootstrap_ui_tags.PanelHeadingNode at-

tribute), 27end_tag_name (bootstrap_ui_tags.PanelNode attribute),

26end_tag_name (bootstrap_ui_tags.PanelTitleNode at-

tribute), 27end_tag_name (bootstrap_ui_tags.RowNode attribute),

26

Gget_value_from_session_or_cookie() (in module boot-

strap_ui_tags), 25

HHtmlTagNode (class in bootstrap_ui_tags), 25

LListGroupItemNode (class in bootstrap_ui_tags), 26ListGroupNode (class in bootstrap_ui_tags), 26

Mmin_args (bootstrap_ui_tags.HtmlTagNode attribute), 25

PPanelBodyNode (class in bootstrap_ui_tags), 27PanelFooterNode (class in bootstrap_ui_tags), 27PanelHeadingNode (class in bootstrap_ui_tags), 26PanelNode (class in bootstrap_ui_tags), 26PanelTitleNode (class in bootstrap_ui_tags), 27

Rrender_tag() (bootstrap_ui_tags.ColumnNode method),

25render_tag() (bootstrap_ui_tags.ContainerNode method),

26render_tag() (bootstrap_ui_tags.HtmlTagNode method),

25render_tag() (bootstrap_ui_tags.ListGroupItemNode

method), 26RowNode (class in bootstrap_ui_tags), 25

Ttag (bootstrap_ui_tags.HtmlTagNode attribute), 25

34 Index