Django bootstrap 3 – оригинальное дополнение, которое поможет расширить возможности бутстрап

Доброго времени суток, гики сайтостроения и желающие изучить все особенности Bootstrap 3. Сегодняшнюю публикацию я решил посвятить достаточно неординарной, интересной и полезной теме, касающейся Django Bootstrap.

Я расскажу, что это за фреймворк и для чего он был создан, опишу важные особенности данного инструмента и объясню, как его можно использовать вместе с Бутстрапом. Давайте приступим к разбору материала!

Что это за Django такой и каким ветром его к нам занесло?

На русском языке он читается как Джанго и впервые увидел свет в 2003 году. Это бесплатный фреймворк, выложенный в публичный доступ, который используется для разработки веб-приложений на языке Python. Django упрощает создание сайтов, предоставляет свое собственное объектно-реляционное отображение (ORM) для работы с базами данных, а также обрабатывает запросы URL при помощи urlresolver.

Данный фреймворк достаточно популярен. Это подтверждается его использованием в таких знаменитых веб-сайтах, как Instagram, Google, YouTube, Pinterest и других.

Django обладает множеством возможностей:

• Свое собственное ORM;
• Диспетчер URL, построенный на чистых регулярных выражениях;
• Встроенный многоязычный административный интерфейс;
• Система собственных тегов и шаблонов, которая является расширяемой;
• Отличная система кэширования;
• Система фильтров под названием «middleware», которая позволяет создавать дополнительные обработчики запросов;
• Встроенная и автоматическая лицензированная документация, доступная через главную (административную) программу и т.д.

Как и ко всем фреймворкам, выложенным в свободный доступ, заинтересованные люди пишут свои дополнения, библиотеки, пользовательские шаблоны и т.д. Точно так же дополняется и Джанго. Так, например, было создано django-bootstrap3.

Прочесть полную документацию, ознакомиться с обновлениями и скачать установочный архив веб-фреймворка для Python-приложений можно на официальном сайте проекта: https://www.djangoproject.com/.

Использование Bootstrap в Джанго

Любой веб-сервис в первую очередь должен привлекательно выглядеть, быть читабельным и удобным в использовании для юзера. Все это может обеспечить Bootstrap. Так зачем же изобретать велосипед, если он уже существует и проверен на качество?

Именно поэтому Django предоставляет возможность подключать Бутстрап к коду. Само подключение происходит привычным для вас способом: указание ссылки на стили и вставка скрипта с bootstrap.min.js в хедере документа:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

Также можно подключить и другим способом, прописав:

 <link href="{% static «Path/css/bootstrap.min.css» %}" rel="stylesheet">

<script src="{% static «Path/js/bootstrap.min.js» %}"></script>

При этом для корректного функционирования элемента «static» необходимо в начале каждого темплейта добавлять

{% load staticfiles %}

Если же вы решили использовать готовое решение, упомянутое выше, под названием django-bootstrap3, то необходимо выполнить несколько другие действия:

1. Скачать проект. Предпочтительный вариант скачки – это использование команды $ pip install django-bootstrap3;
2. В файл requirements.txt добавить указание на использование библиотеки;
3. Убедиться, что вы работаете в virtualenv при написании проекта;
4. Убедиться, что INSTALLED_APPS добавлено в ваш файл settings.py;
5. Загрузить в коде необходимые ресурсы по Bootstrap. В качестве примера можно рассматривать прикрепленный ниже шаблон или ознакомиться с подробной документацией, перейдя по ссылке http://django-bootstrap3.readthedocs.io.

Пример:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

{# Указываем, что будет производится загрузка фреймворка #}
{% load bootstrap3 %}
{# Подгружаем документы с расширением .css и .js #}
{% bootstrap_css %}
{% bootstrap_javascript %}
 
{% bootstrap_messages %}
<form action="/Путь/для/отправки/сообщения" method="post" class="form">
  {% csrf_token %}
  {% bootstrap_form form %}
  {% buttons %}
    <button type="submit" class="btn btn-primary">
      {% bootstrap_icon "star" %} Submit
    </button>
  {% endbuttons %}
</form>

Подписывайтесь на мой блог, впереди еще много интересных статей на разные тематики, а также делитесь ссылками на публикации с друзьями и знакомыми. До скорой встречи!

С уважением, Роман Чуешов