Evgenij LegotskojSept. 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 .



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 the application is executed by using pip utility, be sure to only activate the virtual environment.

pip install django-bootstrap3


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



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

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.
Support the author Donate

Как вариант 1

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

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

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

вариант 2

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

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

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


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

Let me recommend you the excellent hosting on which EVILEG is located.

For many years, Timeweb has been proving his stability.

For projects on Django I recommend VDS hosting

View Hosting

C ++ - Test 004. Pointers, Arrays and Loops

  • Result:50points,
  • Rating points-4

C++ - Test 005. Structures and Classes

  • Result:41points,
  • Rating points-8

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

  • Result:42points,
  • Rating points-8
Popular publications in the last 90 Days
Last comments
  • fryn3
  • Oct. 21, 2021, 5:24 a.m.

QML - Tutorial 038. Using the clip property to crop child objects inside Item or Rectangle

Зачем внутри OpacityMask Item, почему сразу Rectangle не вставить? И что за rect.adapt? Мое предложение: layer.enabled: true layer.effect: OpacityMask { …

Qt/C++ - Lesson 060. Configuring the appearance of the application in runtime

Добрый вечер, на "лету" не работает, только перезапуск

Qt/C++ - Lesson 060. Configuring the appearance of the application in runtime

Спасибо, завтра опробую и отпишусь по результату

Django - Tutorial 007. Adding Pagination based on django-bootstrap3

Просто список каких-нибудь объектов передавайте, который дёрнули ищ api стороннего сервера from django.core.paginator import Paginatorobjects = ['john', 'paul', 'george', 'ringo']p = Pagina…

PyQt5 - Tutorial 009. Using QThread with MoveToThread

Спасибо большое
Now discuss on the forum
  • grig_p
  • Oct. 21, 2021, 8:33 a.m.

Применение стилей *.qss к собственным виджетам.

Здравствуйте! Я бы хотел в виджете использовать некоторые свои свойства для его элементов. Задаю в коде виджета так: Q_PROPERTY(QColor sig1_color READ sig1Color WRITE setSig1Col…
  • juvf
  • Oct. 21, 2021, 7:31 a.m.

Qt Quick Virtual Keyboard

В QtCreator есть пример на QML с виртуальной клавиатурой "Qt Quick Virtual Keyboard - Basic Example". Собрал, работает. Собрал свой хеловорд свою программу состоящую из главного окна …

QScrollArea dynamically add QCheckBoxes

Всё правильно. Это просто спамер, который отправился в вечный бан.
  • Nomad
  • Oct. 15, 2021, 6:39 a.m.

Вопрос из раздела "как реализовать"

Всем привет. Есть бизнес логика которую надо реализовать на джанге, она состоит в следующем: надо реализовать функционал регистрации/авторизации компаний у которого есть свой дашборд …

Проблема с созданием файлов перевода для составного проекта

Я имею ввиду, если у вас был старые ts файлы, то написать парсер, который составил бы словарь переводов. Например. "Hello world" - "Привет мир" "Hello dev" - "Привет dev" и…
© EVILEG 2015-2021
Recommend hosting TIMEWEB