LXF168:Web-разработка. Django - История изменений

Olkol в 18:44, 10 ноября 2018

2018-11-10T18:44:24Z

Olkol: /* Создаем раскладку */

2018-11-10T18:43:00Z

‎Создаем раскладку

Olkol: /* Создаем шаблон */

2018-11-10T18:41:06Z

‎Создаем шаблон

Olkol: /* Темы и шаблоны */

2018-11-10T18:35:30Z

‎Темы и шаблоны

Olkol: /* Введение в Django */

2018-11-10T18:27:05Z

‎Введение в Django

Olkol: Новая страница: «Категория: Учебники '''Каркас для web-приложений. Программирование в Django''' == Вве…»

2018-11-10T18:19:04Z

Новая страница: «Категория: Учебники '''Каркас для web-приложений. Программирование в Django''' == Вве…»

Новая страница

[[Категория: Учебники]]
'''Каркас для web-приложений. Программирование в Django'''
== Введение в Django ==

''Джоно Бэкон применяет Twitter Bootstrap для украшения проектов Django.''
[[Файл: Jono_bacon_fmt.png|left |100px |thumb|'''Наш эксперт''' Джоно Бэкон управляет сообществом Ubuntu; он автор книги «Искусство сообщества» и основатель ежегодного саммита руководителей сообщества.]]
Два урока мы занимались созданием мощных сайтов с помощью популярного фреймворка Django. В предыдущих частях мы рассмотрели такие темы, как создание баз данных, добавление данных, использование форм и другие. Все это было очень... функционально, но, к сожалению, выглядело довольно уродливо.

На этом уроке мы узнаем, как немного приукрасить ваши приложения. Django добивается многого малым объемом кода. Мы создадим простую шаблонную программу и затем поэкспериментируем с набором различных возможностей, чтобы создать привлекательный сайт, совместимый с большинством браузеров. Приступим к делу.

Современная эпоха

Скажу для новичков в web-программировании: для создания тем и стилей web-страниц используется специальный язык CSS (Cascading Style Sheets – каскадные таблицы стилей). С ним можно взять HTML-код страницы и изменить ее визуальное наполнение, например, цвета и контуры, а также расположение текста на странице. Увы, ветераны web-программирования хорошо знают, что CSS чертовски сложен, не с точки зрения языка, а из-за всех этих уловок и приемов, требуемых для корректного отображения содержимого страницы в различных браузерах, поскольку в каждом из них то там, то здесь есть отличия. По существу, понимание CSS – это отдельный навык, а написание красивого CSS – настоящее искусство.

В былые времена CSS для сайтов приходилось писать вручную, и в итоге наплодили безобразных сайтов. К счастью, времена изменились, и хотя вручную писать никто не запрещает, большинство людей пользуются клиентскими фреймворками, оборачивающими всю эту сложность в набор кирпичиков «Лего» для сборки дизайна страницы. Иначе говоря, вам достаточно знать, как применять кирпичики, а они сделают всю работу по отображению должного CSS в любом браузере, которым вы пользуетесь.

Существует масса фреймворков, каждый со своими достоинствами и недостатками. В качестве фреймворка нам обычно нужно нечто гибкое (включающее разнообразные возможности для различных требований к интерфейсу пользователя), приятное на вид (соответствующее выбранному вами дизайну), небольшое по размеру (большие страницы увеличивают нагрузку на канал) и лицензированное так, как вам нужно (в данном случае, доступное свободно). Я исследовал множество различных фреймворков, и мне больше всех прочих понравился Bootstrap, созданный в Twitter.

Bootstrap обладает фантастическим набором возможностей. Он поддерживает различные гарнитуры шрифтов, виды кнопок, иконки, вкладки, модальные диалоги, гибкие структуры компонентов и другое. Он приятен на вид, настраиваем, снабжен прекрасную документацию и лицензирован по свободной лицензии Apache. К счастью, подключить его к Django просто, и это дает нам впечатляющие возможности по изменению внешнего вида сайта.

Создаем шаблон

Начнем с создания простого шаблонного проекта Django, и затем мы сможем посмотреть, как работают различные компоненты Bootstrap. Я пробегусь по созданию проекта довольно быстро, так как почти все это должно быть вам знакомо.

Сначала создается проект Django:

django-admin.py startproject homepage

Затем зададим настройки в settings.py. Сперва зададим «шаблонный» поиск проекта в верхней части файла:

import os

ROOT_PROJECT = os.path.join(os.path.split(__file__)[0], “..”)

Настроим базу данных:

‘ENGINE’: ‘django.db.backends.sqlite3’

‘NAME’: ‘homepage.db’

В Django есть понятие местоположения «статических» файлов. Сюда мы поместим файлы тем Bootstrap. По умолчанию это каталог static проекта. Настроим его – для этого укажите следующий параметр:

STATIC_URL = ‘/static/’

Свяжем с этим каталогом параметр STATICFILES_DIRS:

STATICFILES_DIRS = (

os.path.join(ROOT_PROJECT, ‘static’),

)

Как и в предыдущих проектах, мы помещаем шаблоны в каталог ‘templates’ проекта. Задайте следующий параметр:

TEMPLATE_DIRS = (

“templates”,

)

Создадим в проекте приложение mainapp:

python manage.py startapp mainapp

Наконец, добавьте следующие параметры в раздел INSTALLED_APPS файла settings.py. В нашем приложении-шаблоне будет три страницы: домашняя, страница с информацией о программе и страница с контактами. В urls.py добавьте следующие параметры:

url(r’^$’, ‘mainapp.views.index’),

url(r’^about/$’, ‘mainapp.views.about’),

url(r’^contact/$’, ‘mainapp.views.contact’),

Теперь добавьте представление в views.py:

from django.shortcuts import render

from mainapp.models import Contact

from mainapp.forms import ContactForm

from django.template import RequestContext

from django.shortcuts import render_to_response

def index(request):

return render(request, ‘mainapp/index.html’)

def about(request):

return render(request, ‘mainapp/about.html’)

def contact(request):

form = ContactForm(request.POST or None)

if form.is_valid():

cmodel = form.save()

cmodel.save()

return redirect(index)

return render_to_response(‘mainapp/contact.html’, {‘contact_form’: form}, context_instance=RequestContext(request))

Этот код просто выводит страницы – кроме страницы с контактами, на которой выводится форма из модели Contact data. Добавим эту модель в models.py:

class Contact(models.Model):

name = models.CharField(max_length=200)

email = models.CharField(max_length=200)

query = models.TextField(blank=True, null=True)

def __unicode__(self):

return self.name

Потом добавим файл forms.py для отображения ModelForm:

from django.forms import ModelForm

from mainapp.models import Contact

class ContactForm(ModelForm):

class Meta:

model = Contact

За исключением шаблонов (в которые мы будем добавлять информацию о теме), наш шаблонный проект готов. Теперь создадим базу данных:

python manage.py syncdb

Загрузим и добавим в проект тему Bootstrap. Для этого сначала создайте каталог static в корне проекта. Зайдите на http://twitter.github.com/bootstrap и загрузите последнюю версию Bootstrap. В загруженном архиве есть каталог bootstrap с тремя подкаталогами css, img и js. Распакуйте эти три подкаталога в свой каталог static. Теперь все необходимое для проекта готово, но мы пока не можем его запустить, поскольку нет шаблонов. Ну так мы их добавим!

Темы и шаблоны

Чтобы воспользоваться Bootstrap, нужно добавить в шаблоны код, который загружает библиотеку bootstrap; после этого в шаблоне можно будет пользоваться специальными командами для отображения содержимого различными способами. Раньше у нас было по одному шаблону на страницу, и все было просто. Для нашего сегодняшнего проекта в шаблонах нужно загружать существующий код, формирующий общую структуру сайта, а также код, загружающий библиотеку bootstrap.

Настроить расположение компонентов на странице с помощью Bootstrap можно по-разному, но для простоты мы ограничимся панелью навигации вверху и двумя колонками на странице – основным содержимым (col1) и боковой колонкой (col2). Сначала создадим базовый файл шаблона, который будут загружать все остальные. В этом файле мы загрузим тему Bootstrap и сформируем вышеупомянутую схему из двух колонок.

Хотя сейчас в нашем проекте Django всего одно приложение (mainapp), в будущем их может стать несколько, а мы хотим, чтобы в них во всех использовалась одна и та же тема. Итак, создадим наш базовый шаблон вне приложения mainapp, чтобы он мог совместно использоваться всеми приложениями.

Для начала создайте каталог templates в корневом каталоге проекта, и в нем – файл base.html. Начнем добавлять содержимое. Сначала добавим несколько мета-тэгов шаблона:

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”utf-8”>

<title>My Homepage [Моя домашняя страница]</title>

<meta name=”viewport” content=”width=devicewidth, initial-scale=1.0”>

<meta name=”description” content=””>

<meta name=”author” content=””>

Затем загрузим главный CSS-файл Bootstrap. Он живет в static/css, поэтому воспользуемся специальным тэгом шаблона Django, чтобы сослаться на каталог static:

<link href=”{{ STATIC_URL }}/css/bootstrap.css” rel=”stylesheet”>

Теперь добавим дальнейшее содержимое – это несколько блоков CSS, которые введут небольшие зазоры вверху и внизу страницы:

<style type=”text/css”>

body {

padding-top: 60px;

padding-bottom: 40px;

}

.sidebar-nav {

padding: 9px 0;

}

</style>

Далее добавим CSS-код Bootstrap, отвечающий за дизайн страницы. С ним страница будет правильно отображаться на планшетах, телефонах и других устройствах. Хотя на данном уроке мы этого не обсуждаем, код все равно добавим, чтобы при желании обратиться к нему в будущем:

<link href=”{{ STATIC_URL }}/css/bootstrapresponsive.css”rel=”stylesheet”>



<link rel=”shortcut icon” href=”../assets/ico/favicon.ico”>

<link rel=”apple-touch-icon-precomposed”sizes=”144x144” href=”../assets/ico/apple-touch-icon-144-precomposed.png”>

<link rel=”apple-touch-icon-precomposed”sizes=”114x114” href=”../assets/ico/apple-touch-icon-114-precomposed.png”>

<link rel=”apple-touch-icon-precomposed”sizes=”72x72” href=”../assets/ico/apple-touch-icon-72-precomposed.png”>

<link rel=”apple-touch-icon-precomposed”href=”../assets/ico/apple-touch-icon-57-precomposed.png”>

</head>

<body>

Приступим к организации раскладки нашего сайта. Bootstrap предоставляет богатую коллекцию классов, применяемых к различным элементам HTML. Например, к тэгу ссылки <a> можно применить класс, который превратит ссылку в кнопку указанного типа. Аналогично, существует набор классов, применяемых к тэгу <div> для настройки расположения компонентов страницы. Давайте сначала добавим панель навигации в верхней части страницы.

<div class=”navbar navbar-inverse navbar-fixed-top”>

<div class=”navbar-inner”>

<div class=”container-fluid”>

<a class=”brand” href=”/”>My Homepage</a>

<div class=”nav-collapse collapse”>

<p class=”navbar-text pull-right”>

<a href=”” class=”btn btn-small btn-primary”>Sign In</a>

</p>

<ul class=”nav”>

<li><a href=”/”>Home</a></li>

<li><a href=”/about”>About</a></li>

<li><a href=”/contact”>Contact</a></li>

</ul>

</div>

</div>

</div>

</div>

В этом блоке мы сперва создаем внешнюю панель навигации (navbar), закрепленную в верхней части страницы (navbar-fixed-top), а затем добавляем компоненты к внутренней части панели (navbar-inner). Затем мы добавляем ссылку с названием сайта класса brand.

Далее добавляется кнопка Sign In [Войти] в виде ссылки с классами btn, btn-small и btn-primary. Это три различных класса; btn отображает ссылку в виде кнопки, btn-small уменьшает ее размер, а btn-primary выделяет ее синим, как важный элемент пользовательского интерфейса. Это хороший пример форматирования страниц с Bootstrap.

Наконец, с помощью тэга nav мы добавляем маркированный список с тремя элементами; они форматируются как кнопки навигационной панели. Теперь добавим код в тело страницы. Он создает две колонки:

<div class=”container-fluid”>

<div class=”row-fluid”>

<div class=”span9”>

{% block col1 %}

{% endblock %}

</div>

<div class=”span3”>

{% block col2 %}

{% endblock %}

</div>

</div>

Bootstrap делит страницу на 12 колонок. Здесь мы создаем <div> для главной колонки и используем в нем класс span9 – он забирает 9 из 12 колонок. Затем мы устанавливаем второй <div> в span3 – это превращает три оставшихся колонки в узкую боковую колонку.

Внутри каждого <div> определяем блок шаблона Django и задаем его имя (col1 или col2). Именами мы воспользуемся в главных шаблонах, чтобы добавлять содержимое в эти колонки. Наконец, добавим нижний колонтитул и файлы JavaScript (они добавляются в конце файла, чтобы страница загружалась быстрее):

<hr>

<footer>

<p>© Jono Bacon 2012</p>

</footer>

</div>

<script src=”../assets/js/jquery.js”></script>

<script src=”../assets/js/bootstrap-transition.js”></script>

<script src=”../assets/js/bootstrap-alert.js”></script>

<script src=”../assets/js/bootstrap-modal.js”></script>

<script src=”../assets/js/bootstrap-dropdown.js”></script>

<script src=”../assets/js/bootstrap-scrollspy.js”></script>

<script src=”../assets/js/bootstrap-tab.js”></script>

<script src=”../assets/js/bootstrap-tooltip.js”></script>

<script src=”../assets/js/bootstrap-popover.js”></script>

<script src=”../assets/js/bootstrap-button.js”></script>

<script src=”../assets/js/bootstrap-collapse.js”></script>

<script src=”../assets/js/bootstrap-carousel.js”></script>

<script src=”../assets/js/bootstrap-typeahead.js”></script>

</body>

</html>

Наш базовый шаблон готов; теперь создадим шаблон страницы, чтобы проверить дизайн. Для этого загрузим шаблоны внутри приложения. Чтобы все шаблоны использовали одну и ту же тему, создайте каталог mainapp в каталоге templates и затем файл base.html в каталоге mainapp. Добавьте в него всего одну строку:

{% extends “base.html” %}

Она загружает наш главный файл base.html с кодом CSS, который применяется ко всем приложениям. Теперь создадим шаблон страницы. В каталоге templates/mainapp создайте файл index.html и добавьте в него следующий код:

{% extends “mainapp/base.html” %}

{% block col1 %}

<h1>Welcome To My Homepage! [Добро пожаловать на мою домашнюю страницу!]</h1>

<p>This is my very own homepage. Feel free to take a look around! [Я сам ее сделал. Смотрите, не стесняйтесь!]</p>

{% endblock %}

{% block col2 %}

{% endblock %}

В этом блоке мы загружаем базовый шаблон и добавляем два блока, которые мы определили в главной структуре. В первом блоке (col1), то есть в теле страницы, мы просто добавляем заголовок и немного текста; второй блок пока оставляем пустым. Теперь страница должна выглядеть так, как показано на рис. 1.

Создаем раскладку

Теперь погрузимся в возможности Bootstrap, которые придают ему такую мощь. Во-первых, сейчас в боковой колонке ничего нет. Добавим во второй блок немного информации о нашей домашней странице:

{% block col2 %}

<div>

<div class=”well”>

<h3>The Technology</h3>

<p>Этот сайт создан при помощи Django и темы Bootstrap.</p>

</div>

</div>

{% endblock %}

Здесь с помощью класса well элемента <div> мы создаем у боковой колонки тонкий контур с закругленными краями. В том-то и прелесть Bootstrap – чтобы создать контур, не нужно писать никакого кода CSS. Теперь добавим несколько кнопок со ссылками на сайты Django и Bootstrap. Для этого достаточно добавить несколько ссылок с классом btn:

<a href=”https://www.djangoproject.com/”class=”btn”>Django</a>

<a href=”http://twitter.github.com/”class=”btn”>Bootstrap</a>

Ну вот, у нас есть красивые кнопки, вид которых изменяется при наведении курсора мыши. Существуют и другие классы, с помощью которых можно менять внешний вид кнопок. Например, чтобы изменить размер кнопок, воспользуйтесь классами btn-large, btn-small и btn-mini. Для этого просто добавьте их в код справа от первого класса. Например:

<a href=”http://twitter.github.com/” class=”btn btnsmall”>Bootstrap</a>

Кнопки выглядят вполне мило, но лучше будет объединить их в группу, например, так:

<center>

<div class=”btn-group”>

<a href=”https://www.djangoproject.com/” class=”btn”>Django</a>

<a href=”http://twitter.github.com/” class=”btn”>Bootstrap</a>

</div>

</center>

Мы здесь воспользовались классом btn-group в тэге <div>; теперь кнопки сгруппированы.

Таблицы

Таблицы в Bootstrap тоже форматируются просто. Те ужасные таблицы HTML, которые вы знали и любили (ненавидели), ушли в прошлое. Вот пример таблицы с приятным контуром, созданным с помощью класса table-bordered:

<table class=”table table-bordered”>

<th>Name</th><th>Age</th><th>Location</th>

<tr><td>Steve Harris</td><td>55</td><td>London, England</td></tr>

<tr><td>Nicko McBrain</td><td>52</td><td>Florida, USA</td></tr>

</table>

Еще одна приятная возможность Bootstrap – набор иконок, которыми можно быстро и легко воспользоваться. Забыты дни, когда нужно было встраивать собственные иконки, чтобы придать привлекательность сайту.

С каждой иконкой связан собственный класс. Давайте добавим по иконке на каждую из добавленных кнопок:

<a href=”https://www.djangoproject.com/”class=”btn”><i class=”icon-pencil”></i> Django</a>

<a href=”http://twitter.github.com/” class=”btn”><i class=”icon-eye-open”></i> Bootstrap</a>

Здесь мы добавили пустой тэг <i> и просто указали класс для загрузки нужной иконки; при этом иконка будет показана на каждой кнопке с правильными отступами. Чтобы увидеть полный список доступных иконок, зайдите на домашнюю страницу Bootstrap – http://twitter.github.com/.

Есть и прекрасная документация. Беритесь за дело и экспериментируйте с различными возможностями оформления в собственных проектах. Удачи! |

← Предыдущая		Версия 18:41, 10 ноября 2018
Строка 172:		Строка 172:

	» btn btn-link – делает из кнопки ссылку, сохраняя поведение кнопки.}}		» btn btn-link – делает из кнопки ссылку, сохраняя поведение кнопки.}}
		+	[[Файл:LXF168.code_django.fig_opt.jpeg \|left \|300px \|thumb\|> Рис. 1. Наша раскладка по Bootstrap проста, но доходчива.]]
	Загрузим и добавим в проект тему Bootstrap. Для этого сначала создайте каталог static в корне проекта. Зайдите на http://twitter.github.com/bootstrap и загрузите последнюю версию Bootstrap. В загруженном архиве есть каталог bootstrap с тремя подкаталогами css, img и js. Распакуйте эти три подкаталога в свой каталог static. Теперь все необходимое для проекта готово, но мы пока не можем его запустить, поскольку нет шаблонов. Ну так мы их добавим!		Загрузим и добавим в проект тему Bootstrap. Для этого сначала создайте каталог static в корне проекта. Зайдите на http://twitter.github.com/bootstrap и загрузите последнюю версию Bootstrap. В загруженном архиве есть каталог bootstrap с тремя подкаталогами css, img и js. Распакуйте эти три подкаталога в свой каталог static. Теперь все необходимое для проекта готово, но мы пока не можем его запустить, поскольку нет шаблонов. Ну так мы их добавим!

← Предыдущая		Версия 18:35, 10 ноября 2018
Строка 247:		Строка 247:

	<body>		<body>
		+	{{Врезка\|left\|Заголовок= \|Ширина=40%\|Содержание=Памятка по Bootstrap: Метки

		+	Метки и значки позволят привлечь внимание к отдельным частям страницы.
		+	Непременно поиграйте с разнообразными вариантами.
		+
		+	Метки:
		+
		+	» По умолчанию – <span class=“label”>Default</span>
		+
		+	» Успешно – <span class=“label labelsuccess”>Success</span>
		+
		+	» Предупреждение – <span class=“label label-warning”>Warning</span>
		+
		+	» Важно – <span class=“label label-important”>Important</span>
		+
		+	» Информация – <span class=“label labelinfo”>Info</span>
		+
		+	» Инверсная – <span class=“label labelinverse”>Inverse</span>
		+
		+	Значки:
		+
		+	» По умолчанию – <span class=“badge”>1</span>
		+
		+	» Успешно – <span class=“badge badge-success”>2</span>
		+
		+	» Предупреждение – <span class=“badge badge-warning”>4</span>
		+
		+	» Важно – <span class=“badge badge-important”>6</span>
		+
		+	» Информация – <span class=“badge badgeinfo”>8</span>
		+
		+	» Инверсный – <span class=“badge badge-inverse”>10</span> }}
	Приступим к организации раскладки нашего сайта. Bootstrap предоставляет богатую коллекцию классов, применяемых к различным элементам HTML. Например, к тэгу ссылки <a> можно применить класс, который превратит ссылку в кнопку указанного типа. Аналогично, существует набор классов, применяемых к тэгу <div> для настройки расположения компонентов страницы. Давайте сначала добавим панель навигации в верхней части страницы.		Приступим к организации раскладки нашего сайта. Bootstrap предоставляет богатую коллекцию классов, применяемых к различным элементам HTML. Например, к тэгу ссылки <a> можно применить класс, который превратит ссылку в кнопку указанного типа. Аналогично, существует набор классов, применяемых к тэгу <div> для настройки расположения компонентов страницы. Давайте сначала добавим панель навигации в верхней части страницы.

@@ Строка 1: / Строка 1: @@
 [[Категория: Учебники]]
-'''Каркас для web-приложений. Программирование в Django'''
+'''Каркас для web-приложений. Программирование в Django'''.
 == Введение в Django ==

@@ Строка 456: / Строка 456: @@
 Мы здесь воспользовались классом btn-group в тэге <div>; теперь кнопки сгруппированы.
-Таблицы
+===Таблицы===
 Таблицы в Bootstrap тоже форматируются просто. Те ужасные таблицы HTML, которые вы знали и любили (ненавидели), ушли в прошлое. Вот пример таблицы с приятным контуром, созданным с помощью класса table-bordered:

@@ Строка 9: / Строка 9: @@
 На этом уроке мы узнаем, как немного приукрасить ваши приложения. Django добивается многого малым объемом кода. Мы создадим простую шаблонную программу и затем поэкспериментируем с набором различных возможностей, чтобы создать привлекательный сайт, совместимый с большинством браузеров. Приступим к делу.
-Современная эпоха
+===Современная эпоха===
 Скажу для новичков в web-программировании: для создания тем и стилей web-страниц используется специальный язык CSS (Cascading Style Sheets – каскадные таблицы стилей). С ним можно взять HTML-код страницы и изменить ее визуальное наполнение, например, цвета и контуры, а также расположение текста на странице. Увы, ветераны web-программирования хорошо знают, что CSS чертовски сложен, не с точки зрения языка, а из-за всех этих уловок и приемов, требуемых для корректного отображения содержимого страницы в различных браузерах, поскольку в каждом из них то там, то здесь есть отличия. По существу, понимание CSS – это отдельный навык, а написание красивого CSS – настоящее искусство.
@@ Строка 16: / Строка 16: @@
 Существует масса фреймворков, каждый со своими достоинствами и недостатками. В качестве фреймворка нам обычно нужно нечто гибкое (включающее разнообразные возможности для различных требований к интерфейсу пользователя), приятное на вид (соответствующее выбранному вами дизайну), небольшое по размеру (большие страницы увеличивают нагрузку на канал) и лицензированное так, как вам нужно (в данном случае, доступное свободно). Я исследовал множество различных фреймворков, и мне больше всех прочих понравился Bootstrap, созданный в Twitter.
 Bootstrap обладает фантастическим набором возможностей. Он поддерживает различные гарнитуры шрифтов, виды кнопок, иконки, вкладки, модальные диалоги, гибкие структуры компонентов и другое. Он приятен на вид, настраиваем, снабжен прекрасную документацию и лицензирован по свободной лицензии Apache. К счастью, подключить его к Django просто, и это дает нам впечатляющие возможности по изменению внешнего вида сайта.
-Создаем шаблон
+===Создаем шаблон===
 Начнем с создания простого шаблонного проекта Django, и затем мы сможем посмотреть, как работают различные компоненты Bootstrap. Я пробегусь по созданию проекта довольно быстро, так как почти все это должно быть вам знакомо.
@@ Строка 134: / Строка 153: @@
 python manage.py syncdb
 Загрузим и добавим в проект тему Bootstrap. Для этого сначала создайте каталог static в корне проекта. Зайдите на http://twitter.github.com/bootstrap и загрузите последнюю версию Bootstrap. В загруженном архиве есть каталог bootstrap с тремя подкаталогами css, img и js. Распакуйте эти три подкаталога в свой каталог static. Теперь все необходимое для проекта готово, но мы пока не можем его запустить, поскольку нет шаблонов. Ну так мы их добавим!
-Темы и шаблоны
+===Темы и шаблоны===
 Чтобы воспользоваться Bootstrap, нужно добавить в шаблоны код, который загружает библиотеку bootstrap; после этого в шаблоне можно будет пользоваться специальными командами для отображения содержимого различными способами. Раньше у нас было по одному шаблону на страницу, и все было просто. Для нашего сегодняшнего проекта в шаблонах нужно загружать существующий код, формирующий общую структуру сайта, а также код, загружающий библиотеку bootstrap.
@@ Строка 341: / Строка 378: @@
 В этом блоке мы загружаем базовый шаблон и добавляем два блока, которые мы определили в главной структуре. В первом блоке (col1), то есть в теле страницы, мы просто добавляем заголовок и немного текста; второй блок пока оставляем пустым. Теперь страница должна выглядеть так, как показано на рис. 1.
-Создаем раскладку
+===Создаем раскладку===
 Теперь погрузимся в возможности Bootstrap, которые придают ему такую мощь. Во-первых, сейчас в боковой колонке ничего нет. Добавим во второй блок немного информации о нашей домашней странице:

LXF168:Web-раз­ра­бот­ка. Django - История изменений

Olkol в 18:44, 10 ноября 2018

Olkol: /* Соз­да­ем рас­клад­ку */

Olkol: /* Соз­да­ем шаб­лон */

Olkol: /* Те­мы и шаб­ло­ны */