Реклама

Django - Урок 004. Подключение Bootstrap 3 к сайту на Django

РуководствоDjangoBootstrap 31198

Дизайн сайта и его вёрстка являются довольно важными вопросами, и порой хочется разработать сайт с хорошим и интересным дизайном... но... Не все из нас дизайнеры, и ещё меньше хороших дизайнеров. Поэтому мне проще было взять Bootstrap 3, найти хорошую тему оформления для него, а точнее кастомизированный в едином стиле CSS, и не заморачиваясь начать разработку сайта с уже проверенным многими web-мастерами инструментом.

Давайте посмотрим, как обстоит дело с Bootstrap 3 в Django .

django-bootstrap3

Итак, для  Django существует готовое приложение django-bootstrap3 , которое необходимо установить, подключить, и для использования добавить необходимые компоненты в тег head на страницах сайта.

Установка

Установка приложение осуществляется с использованием утилиты pip, не забудьте только активировать виртуальное окружение.

pip install django-bootstrap3

Подключение

Прежде, чем использовать Bootstrap, его необходимо подключить в конфигурационном файле.

INSTALLED_APPS = [
    ...
    'bootstrap3',
    ...
]

Использование

Модуль Bootstrap для Django позволяет использовать как готовые формы, без затрат времени на вёрстку, так и просто воспользоваться стилями и библиотекой jQuery, которая используется для данной текущей версии Bootstrap.

Например, для минимального подключения стилей оформления и скриптов Bootstrap достаточно будет прописать следующее в теге head.

{% load bootstrap3 %}
<script src="{% bootstrap_jquery_url %}"></script>
{% bootstrap_javascript %}
{% bootstrap_css %}

Если вы желаете воспользоваться быстрой кастомизацией формы в стиле bootstrap, то в шаблоне также нужно будет указать подключение модуля и воспользоваться шаблоном формы для данного модуля.

{% load bootstrap3 %}

{# Display a form #}

<form action="/url/to/submit/" method="post" class="form">
    {% csrf_token %}
    {% bootstrap_form form %}
    {% buttons %}
        <button type="submit" class="btn btn-primary">
            {% bootstrap_icon "star" %} Submit
        </button>
    {% endbuttons %}
</form>
Реклама
Реклама

Комментарии

Комментарии

Только авторизованные пользователи могут оставлять комментарии.
Пожалуйста, Авторизуйтесь или Зарегистрируйтесь
Реклама
Последние комментарии
  • EVILEG
  • 24 апреля 2017 г. 20:44
Подключение вашего Qt приложения к сервисам Google, используя OAuth 2.0

У меня пока мыслей на этот счёт нет ((

Подключение вашего Qt приложения к сервисам Google, используя OAuth 2.0

Пробовал играться с шарком, либо я криво смотрел, либо почему-то POST запросы на oauth.yandex.ru не летят, хотя должны постом лететь, я и исходники QOAuth2AuthorizationCodeFlow ковырял на пред

  • EVILEG
  • 24 апреля 2017 г. 13:39
Подключение вашего Qt приложения к сервисам Google, используя OAuth 2.0

Возможно, стоит Wireshark`ом запросы посмотреть. В чём отличие идёт аякс запроса от запроса из библиотеки. Возможно, что не хватает какой-нибудь заголовочной информации.

Сейчас обсуждают на форуме
  • EVILEG
  • 28 апреля 2017 г. 20:02
Qt Installer Framework. Вызов программы при деинсталляции.

А. Вон оно как. Ну хорошо, что оказалось так просто.

  • EVILEG
  • 28 апреля 2017 г. 17:01
QTWebEngineView

На самом деле всё гораздо проще. у QWebEngineView есть сигнал urlChanged() . Вот его и нужно использовать, чтобы получить новый url страницы. Заголовочный файл #...

  • EVILEG
  • 28 апреля 2017 г. 9:30
Другой ToolBar

Если ToolBar все должны находиться внутри окна mainwindow, то создайте необходимое количество ToolBar`ов и часть из них сделайте скрытыми. А когда открываете диалог, то показывайте скрытые Too...

  • EVILEG
  • 28 апреля 2017 г. 9:13
Ошибка

Заголовочный файл класса StyleHelper не подключили в файл реализации mainwindow.cpp

Реклама