Evgenii Legotckoi
Evgenii Legotckoi18 сентября 2016 г. 8:48

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

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

Рекомендуем хостинг TIMEWEB
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.

Вам это нравится? Поделитесь в социальных сетях!

BL4CK R4BBIT
  • 4 августа 2019 г. 4:54
  • (ред.)

Как вариант 1

<head> #base.html
{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
</head>

{% extends "base.html" %}
{% load bootstrap4 %}


<form method="post">
    {% csrf_token %}
    {% bootstrap_form form layout='vertical' %}
    {% buttons submit='Сохранить' %}{% endbuttons %}
</form>

вариант 2

<head> #base.html
{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='slim' %}
</head>

{% extends "base.html" %}
{% load bootstrap4 %}
{% bootstrap_button content %}

<form method="post">
    {% csrf_token %}
    {% bootstrap_form form layout='gorizontal' %}
    {% bootstrap_button "Сохранить" button_type="submit" button_class="btn-primary" %}
</form>
BL4CK R4BBIT
  • 4 августа 2019 г. 5:03

И кстати заметил что прописывать скрипты бутстрапа {% bootstrap_javascript jquery='slim' %} надо все таки в footer. Так как могут не отработать объекты в других скриптах именно из-за очередности загрузки

Комментарии

Только авторизованные пользователи могут публиковать комментарии.
Пожалуйста, авторизуйтесь или зарегистрируйтесь
m
  • molni99
  • 26 октября 2024 г. 9:37

C++ - Тест 004. Указатели, Массивы и Циклы

  • Результат:80баллов,
  • Очки рейтинга4
m
  • molni99
  • 26 октября 2024 г. 9:29

C++ - Тест 004. Указатели, Массивы и Циклы

  • Результат:20баллов,
  • Очки рейтинга-10

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

  • Результат:42баллов,
  • Очки рейтинга-8
Последние комментарии
i
innorwall9 ноября 2024 г. 0:29
EVILEG - 4 Года онлайн buy priligy Pelleted food this way of administration is less stressful for the mice, and a few vendors offer a commercially available chow
i
innorwall8 ноября 2024 г. 17:51
Django - Урок 036. Как добавить аутентификацию через социальные сети. ВКонтакте buy priligy online usa In addition, it might not be effective at the doses recommended, because of your previous tolerance to a similar type of drug
i
innorwall8 ноября 2024 г. 16:40
Qt/C++ - Урок 039. Как закрасить строку в QSqlTableModel по значению в столбце priligy results This slowing of eGFR decline was observed in patients with and without low eGFR and in those with and without type 2 diabetes
i
innorwall8 ноября 2024 г. 11:45
QML - Урок 002. Custom Button in QML Android 2007; 14 2 270 83 priligy dapoxetine 60mg Testicular imaging is sort of a unique niche right now, Гў
i
innorwall8 ноября 2024 г. 10:32
C++ - Ускоряет ли сборку #pragma once? It could cause harm to the unborn baby buy generic priligy
Сейчас обсуждают на форуме
i
innorwall8 ноября 2024 г. 16:08
добавить qlineseries в функции School of Nursing, Long Island University, Brooklyn Campus, Brooklyn, NY, USA priligy dapoxetine 30mg
9
9Anonim25 октября 2024 г. 17:10
Машина тьюринга // Начальное состояние 0 0, ,<,1 // Переход в состояние 1 при пустом символе 0,0,>,0 // Остаемся в состоянии 0, двигаясь вправо при встрече 0 0,1,>…
ИМ
Игорь Максимов3 октября 2024 г. 12:05
Реализация навигации по разделам Спасибо Евгений!
F
Fynjy22 июля 2024 г. 12:15
при создании qml проекта Kits есть но недоступны для выбора Поставил Qt Creator 11.0.2. Qt 6.4.3 При создании проекта Qml не могу выбрать Kits, они все недоступны, хотя настроены и при создании обычного Qt Widget приложения их можно выбрать. В чем может …

Следите за нами в социальных сетях