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
L

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

  • Result:80points,
  • Rating points4
DTs

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

  • Result:46points,
  • Rating points-6
SB

Qt - Test 001. Signals and slots

  • Result:94points,
  • Rating points8
Last comments
JaO

Как соответствовать новым требованиям Google Play

Ку всем! Вопрос! Как с помощью JNI вызвать оплату на android устройстве? Попробовал Qt Purchasing вроде пошло... но android пишет что библиотека устарела. В qt6 пока поддержки purchasing нет. Р…

Django - Tutorial 014. Displays a list of popular articles on Django

Я как понял, этот метод создает статистику каждый день (на каждый день), не удаляя старые данные за день и выводит все данные за сегодняшние просмотры у всех статей?

Qt/C++ - Lesson 006. QSqlQueryModel – Tables in Qt with SQL-query

Изменить запрос при создании модели.
L
  • Livis
  • May 30, 2021, 1:18 p.m.

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

Отвечал на все команды после sudo service supervisor start Исправил таким образом sudo killall supervisordsudo supervisord -c /etc/supervisor/supervisord.conf
D

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

Это на какую команду так отвечает?
Now discuss on the forum
v
  • vika
  • June 17, 2021, 12:19 a.m.

Вопрос новичка ui-форма

все получилось. создала обьект, исправила ошибки и все заработало. спасибо, что есть с кем поговорить.
s

Ключевое слово class

Разобрался,на стаковерфлоу нашел топик и понял почему так происходило .
KM

Django как воспользоваться результатом метода?

Priv = 2020 Now = 2021 Next = 2022 Rok = ( (None, "Nie wybran"), (Priv, '2020'), (Now, '2021'), (Next, '2022') ) Rok = models.IntegerField(choices=Rok, de…

QScrollArea dynamically add QCheckBoxes

Всё правильно. Это просто спамер, который отправился в вечный бан.

Папка с шаблоном сайта

Есть проект с поддержкой динамического создания поддоменов. Как назначить разные пути к шаблонам в templates from django.shortcuts import renderfrom horticulture.utilities import get_horticu…
About
Services
© EVILEG 2015-2021
Recommend hosting TIMEWEB