GitLocker: The Coding Marketplace

Description:

djangocmsbootstrap 1.1.2

djangocms-bootstrap
Some templates and templatetags to be used with django-CMS and Bootstrap3/Bootstrap4.
Django-CMS is frontend agnostic, which is a good thing. However, in combination with Bootstrap3/4
the menu structure does not quite fit. This is because Bootstrap3/4 only allows one nested menu level.

Rendering a django-CMS menu
djangocms-bootstrap adds a few modified templatetags, which render the existing page tree into a
menu structure, suitable for the navbar in Bootstrap3/4.
With the concept of mobile first, there is no mouse-over event we could use to open a drop-down
element showing the sub-menu-items. Instead the user has to click onto the main menu item in order
to open a drop-down element. Now however, there wouldn't be any more distinction between clicking
onto a menu-item to either open the drop-down or to click onto the page referenced by that menu
item.

In this example djangocms-bootstrap uses a special templatetag to render the navbar. Here the
CMS page Catalog has three children. Clicking onto Catalog in the navbar, opens a drop-down menu,
which contains another entry for Catalog. This is the link which sends us onto the desired page.
Using this approach we can navigate through a django-CMS page-tree, without having to use the
mouse-over effect to open drop-down menus.
Usage
Rendering the navbar to show a menu to navigate though the page-tree in django-CMS:
{% load bootstrap_tags %}

<div class="container">
<nav class="navbar" role="navigation">
<ul class="navbar-nav mr-auto">
{% main_menu "bootstrap4/menu/navbar.html" %}
</ul>
</nav>
</div>

The templatetag {% main_menu ... %} takes an extra parameter, template, which can be used to
fine-tune the rendering of the navigation items. Also note that only CMS pages, where the checkbox
for "Menu" is active, show up in the navbar.
In Bootstrap-3 and 4, the navigation bar normally is much more than the short snippet shown above.
Therefore djangocms-bootstrap is shipped with two HTML snippets, which do the heavy lifting and
which shall be included in the base template of your project. By using
{% include "bootstrap4/includes/nav-navbar.html" %} in addition to the navbar, a branding icon
and a navbar toggle button is rendered, all according to the Bootstrap's style guides.
By appending with navbar_classes="navbar-light bg-light fixed-top" to the include statement,
one can style the navbar using the provided CSS classes.
Chosing the language in django-CMS
If django-CMS is configured to run in a multilingual environment, often it is desirable to add
an option, allowing the user the select his native language. For this purpose djangocms-bootstrap
offers a templatetag language_chooser rendering a drop-down menu with all languages available
through the CMS. To render this select options, add this HTML snippet inside or above of the main
navbar:
{% language_chooser "bootstrap4/includes/language-chooser.html" %}

Render secondary menus
Write the docs.
Rendering a paginator
The Django list view class django.views.generic.ListView, by default adds a Paginator object to
the rendering context, if there is the member attribute paginate_by = .... To render this
paginator following Bootstrap's best practices, add this HTML snippet above or below the list of
items you are going to render:
{% load bootstrap_tags %}

<nav aria-label="Paginator example">{% paginator %}</nav>

By prepending {% with paginator_classes="pagination justify-content-center" %} to the paginator
statement, one can style the paginator using the provided CSS classes. Don't forget to append
{% endwith %} afterwards.