Книга Изучаем Python

• Название: Книга Изучаем Python
• Дата: 10.12.2022
• Размер: 4.68 Mb.
• Имя файла: Erik_Metiz_Izuchaem_Python_Programmirovanie_igr_vizualizatsia_da.pdf
• Тип: Книга; #837531
• страница: 47 из 53


В точке  загружается коллекция шаблонных тегов из django-bootstrap3
. Затем файл объявляется как документ HTML , написанный на английском языке .
Файл HTML состоит из двух основных частей, заголовка и тела — заголовок фай- ла начинается в точке . Заголовок файла HTML не содержит контента: он всего лишь передает браузеру информацию, необходимую для правильного отображения страницы. В точке  включается элемент title страницы; его содержимое будет выводиться в строке заголовка браузера при открытии Learning Log. В точке

используется один из шаблонных тегов django-bootstrap3
, который приказывает
Django включить все стилевые файлы Bootstrap. Следующий тег активизирует все интерактивное поведение, которое может использоваться на странице, — напри- мер, раздвижные навигационные панели. В точке

располагается закрывающий тег

Определение навигационной панели
В верхней части страницы определяется навигационная панель:





aria-expanded="false" aria-controls="navbar">

Оформление приложения Learning Log 441


Learning Log







• Topics



{% if user.is_authenticated %}

• Hello, {{ user.username }}.


• log out

{% else %}

• register


• log in

{% endif %}


Первый элемент — открывающий тег

. Тело файла HTML содержит кон- тент, который будет виден пользователям на странице. В точке  элемент

обозначает раздел навигационных ссылок на странице. Весь контент внутри этого элемента оформляется по правилам Bootstrap, определяемым селекторами navbar
, navbar-default и navbar-static-top
. Селектор определяет, к каким элементам страницы должно применяться стилевое правило.
В точке  visual C# > (Xamarin)">шаблон определяет кнопку, которая будет отображаться, если ширины окна браузера не хватает для горизонтального отображения всей навигационной панели. Когда пользователь нажимает кнопку, навигационные элементы выводятся в раскрывающемся списке. Атрибут collapse сворачивает навигационную панель при уменьшении размеров окна браузера и при отображении сайта на мобильных устройствах с малыми экранами.
В точке  имя проекта выводится у левого края навигационной панели. Так как это имя будет присутствовать на каждой странице проекта, оно оформляется в виде ссылки на домашнюю страницу.
В точке  определяется набор ссылок для навигации по сайту. Панель навигации фактически представляет собой список, начинающийся с

, а каждая ссылка является элементом списка (

• 
  )
  
  . Чтобы включить новые ссылки, добавьте строки со следующей структурой:
  
• 'learning_logs:текст %}">Текст

Эта строка представляет одну ссылку на навигационной панели. Ссылка берется непосредственно из предыдущей версии base .html
В точке

создается второй список навигационных ссылок, на этот раз с использо- ванием селектора navbar-right
. Селектор navbar-right оформляет набор ссылок


442 Глава 20 • Оформление и развертывание приложения так, что он выводится в правой части навигационной панели, где обычно отобра- жаются ссылки для входа/регистрации пользователя. В данном случае выводится либо приветствие для пользователя и ссылка для выхода, либо ссылки для реги- страции и входа. Остальной код этого раздела закрывает элементы, содержащие навигационную панель

Определение основного раздела страницы
Оставшаяся часть base .html содержит основной контент страницы:




{% block header %}{% endblock header %}


{% block content %}{% endblock content %}

Оформление приложения Learning Log 443
Модификация домашней страницы
Изменим домашнюю страницу при помощи нового блока header и другого элемента
Bootstrap, так называемого табло (jumbotron) — большого блока, который выдается на общем фоне страницы и может содержать любую информацию на ваше усмотре- ние. Обычно этот элемент используется на домашних страницах для размещения краткого описания проекта в целом. И раз уж мы занялись домашней страницей, заодно обновим текст сообщения. Файл index .html выглядит так:
index.html
{% extends "learning_logs/base.html" %}

{% block header %}
