Evgenii Legotckoi
Evgenii LegotckoiSept. 18, 2016, 8:48 a.m.

Django - Tutorial 004. Implementing Bootstrap 3 to site on the Django

Web site design and layout are pretty important issues, and sometimes it would be desirable to develop a website with good and interesting design ... but ... not all of us are designers, and even less good designers. So it was easier for me to take Bootstrap 3, to find a good skin for him, or rather in the same style customized CSS, and not bothered to start development of the site with the already proven by many web-masters of the instrument.

Let's see how to do it with Bootstrap 3 in Django .


django-bootstrap3

So, there is a ready Django application django-bootstrap3 , you want to install, connect, and use add the necessary components in the head tag on your pages.

Installing

Installing the application is executed by using pip utility, be sure to only activate the virtual environment.

pip install django-bootstrap3

Implementing

Before using Bootstrap, it must be connected in the configuration file.

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

Using

Bootstrap module for Django can be used as a ready-made forms, without spending time on page-proofs and easy to use styles and jQuery library, which is used for this current version of Bootstrap.

For example, for minimum connection it is enough to connect styles files and script of Bootstrap in the head tag.

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

If you want to use fast customization form in bootstrap style, it will also need to specify the connection module in the template and use the template form for the module.

{% 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>

For Django I recommend VDS-server of Timeweb hoster .

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.

Do you like it? Share on social networks!

BL4CK R4BBIT
  • Aug. 4, 2019, 4:54 a.m.
  • (edited)

Как вариант 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
  • Aug. 4, 2019, 5:03 a.m.

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

Comments

Only authorized users can post comments.
Please, Log in or Sign up
МВ

Qt - Test 001. Signals and slots

  • Result:68points,
  • Rating points-1
ЛС

C++ - Test 001. The first program and data types

  • Result:53points,
  • Rating points-4
АА

C++ - Test 001. The first program and data types

  • Result:60points,
  • Rating points-1
Last comments
ИМ
Игорь МаксимовOct. 5, 2024, 5:51 p.m.
Django - Lesson 064. How to write a Python Markdown extension Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
d
dblas5July 5, 2024, 9:02 p.m.
QML - Lesson 016. SQLite database and the working with it in QML Qt Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
k
kmssrFeb. 9, 2024, 5:43 a.m.
Qt Linux - Lesson 001. Autorun Qt application under Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
Qt WinAPI - Lesson 007. Working with ICMP Ping in Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
EVA
EVADec. 25, 2023, 9:30 p.m.
Boost - static linking in CMake project under Windows Ошибка LNK1104 часто возникает, когда компоновщик не может найти или открыть файл библиотеки. В вашем случае, это файл libboost_locale-vc142-mt-gd-x64-1_74.lib из библиотеки Boost для C+…
Now discuss on the forum
K
KeithfapOct. 13, 2024, 7:24 p.m.
добавить qlineseries в функции North Symbol by Bubnov Ltd https://seven-elephants.com/en/categories/penthouse/ Искеле – жемчужина острова! Все факторы говорят про большой инвестиционный потенциал данного района как для …
JW
Jhon WickOct. 2, 2024, 1:52 a.m.
Indian Food Restaurant In Columbus OH| Layla’s Kitchen Indian Restaurant If you're looking for a truly authentic https://www.laylaskitchenrestaurantohio.com/ , Layla’s Kitchen Indian Restaurant is your go-to destination. Located at 6152 Cleveland Ave, Colu…
КГ
Кирилл ГусаревSept. 27, 2024, 7:09 p.m.
Не запускается программа на Qt: точка входа в процедуру не найдена в библиотеке DLL Написал программу на C++ Qt в Qt Creator, сбилдил Release с помощью MinGW 64-bit, бинарнику напихал dll-ки с помощью windeployqt.exe. При попытке запуска моей сбилженной программы выдаёт три оши…
F
FynjyJuly 22, 2024, 2:15 p.m.
при создании qml проекта Kits есть но недоступны для выбора Поставил Qt Creator 11.0.2. Qt 6.4.3 При создании проекта Qml не могу выбрать Kits, они все недоступны, хотя настроены и при создании обычного Qt Widget приложения их можно выбрать. В чем может …

Follow us in social networks