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 .

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

Как вариант 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>

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

Comments

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

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
NI

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

  • Result:90points,
  • Rating points8
NI

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

  • Result:92points,
  • Rating points8
NI

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

  • Result:80points,
  • Rating points4
Last comments
D

Django - Tutorial 001. Deploying a site on Django + PostgreSQL + Gunicorn + Nginx

А почему нельзя? Где можно об этом почитать? Киньте, пожалуйста, в меня ссылкой.
D

Django - Tutoral 049. Optimizing Django Performance with a Real Project

Огромное спасибо вам за статью! Для меня стали открытием select_related и prefetch_related
t
  • t1m4
  • Feb. 24, 2021, 2:56 a.m.

Django - Tutorial 052. Redefining a User Model

В данном случае я заходил под superuser но все равно не появлялись эти поля

Django - Tutorial 001. Deploying a site on Django + PostgreSQL + Gunicorn + Nginx

Поднял сервис с помощью systemd, вот по этому мануалу: https://habr.com/ru/post/501414/
t
  • t1m4
  • Feb. 23, 2021, 7:11 a.m.

Django - Tutorial 052. Redefining a User Model

А как дать ему эти права?
Now discuss on the forum
  • BlinCT
  • March 6, 2021, 10:57 a.m.

Работа с QJsonObject и получение данных из него

Вопрос решен. Оказалось что я не очень внимательно прочитал описание метода root.take("devices") Оказывается он удаляте ключ, а занчит и все данные по нему. И по этому после этого…

Как совместить таблицу и дерево в Qt

Добрый день. Имеется таблица QTableView, нужно у некоторых строк сделать возможность раскрытий, как в QTreeVidget и отоборажать в них аналогичные строки. Скажите пожалуйста, как это мо…
KM

не получаеться добавить списки в списокб ошибка в петле

решение: с line 99: listy = [] lista = [] for single_lp in max_list_from_all_plates: suma = 0 lists = [] for sign in single_lp: Highest_score=0 bigl…
KM

Не отдаётся статика на виртуальной машине

В итоге выставил 775 на все файлы проекта и всё заработало. Но я не уверен, что так правильно.
About
Services
© EVILEG 2015-2020
Recommend hosting TIMEWEB