Политика конфиденциальностиКонтактыО сайтеОтзывыGitHubDonate
© EVILEG 2015-2018
Рекомендует хостинг
TIMEWEB

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

Bootstrap

Дизайн сайта и его вёрстка являются довольно важными вопросами, и порой хочется разработать сайт с хорошим и интересным дизайном... но... Не все из нас дизайнеры, и ещё меньше хороших дизайнеров. Поэтому мне проще было взять 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>

Для Django рекомендую VDS-сервера хостера Timeweb .

Комментарии

Комментарии

Только авторизованные пользователи могут оставлять комментарии.
Пожалуйста, Авторизуйтесь или Зарегистрируйтесь
16 ноября 2018 г. 19:09
Илья Завьялов

Qt - Тест 001. Сигналы и слоты

  • Результат:31баллов,
  • Очки рейтинга-10
16 ноября 2018 г. 12:49
Ирина Минигузина

C++ - Тест 003. Условия и циклы

  • Результат:0баллов,
  • Очки рейтинга-10
16 ноября 2018 г. 8:55
Vitaliy

Qt - Тест 001. Сигналы и слоты

  • Результат:52баллов,
  • Очки рейтинга-4
Последние комментарии
16 ноября 2018 г. 6:50
Евгений Легоцкой

Добрый день! шаблон не находит, или шаблон неправильно прописали, или тег шаблона неправильно написан, иных выводов сделать не могу, из того, что вы написали. трейсбек нужно смотреть. Со...
16 ноября 2018 г. 6:48
Евгений Легоцкой

пройтись циклом по всем виджетам в обратном порядке for (int i = ui->vertialLayout->count() - 1; i >= 0; --i){ QWidget* w = ui->verticalLyout->itemAt(i)->widget();...
15 ноября 2018 г. 21:35
chunk

Доброго времени суток Евгений. Не подскажете что я делаю не так? Получаю ошибку такого характера: Reverse for 'add_comment' with arguments '('',)' not found. 1 pattern(s) tried: ...
15 ноября 2018 г. 15:35
Михаиллл

Спасибо. Похоже где то описку сделал, поэтому не работало. Я добавил на verticalLayout много виджитов. А можно ли их как то быстро и просто удалить?
15 ноября 2018 г. 14:55
Евгений Легоцкой

verticalLayout - это, по-моему предположению, должен быть у вас объект класса QVBoxLayout, который наследован от QBoxLayout. Поэтому открываете документацию на QVBoxLayout ...
Сейчас обсуждают на форуме
16 ноября 2018 г. 16:28
Евгений Легоцкой

Добрый день! Спасибо, что воспользовались именно форумом. Заниматься курсовыми работами чьими-то ни было у меня времени нет, у самого полторы работы. Но что-то подсказать на фо...
16 ноября 2018 г. 9:52
Евгений Легоцкой

Отладчик!!!! Версия комплекта MSVC 2015 + компилятор 14.0!!!!
14 ноября 2018 г. 15:25
Михаиллл

вот решение // grab the model QStandardItemModel* model = qobject_cast<QStandardItemModel*> ( ui->combobox->model() ); if (!model) { // check is important or u can/might ...
14 ноября 2018 г. 19:56
Евгений Легоцкой

Добрый день! QGripSize целится на окно, но никак не на виджет. Здесь можно кастомную вьюшку написать. Вот в этой статье есть пример написания собственного ресайза ....
Присоединяйтесь к нам в социальных сетях

Для зарегистрированных пользователей на сайте присутствует минимальное количество рекламы