В точке
новый набор ссылок начинается при помощи другого открывающего тега
. На странице можно создать столько групп ссылок, сколько вам понадобится.
Эта группа содержит ссылки, связанные со входом и регистрацией, расположенные
в правой части навигационной панели. Имя селектора
ml-auto
означает «margin-
left-automatic», то есть «автоматическое левое поле»; этот селектор анализирует
другие элементы на навигационной панели и определяет величину левого поля,
которое сдвигает эту группу ссылок к правому краю экрана.
Блок
if
в точке
уже использовался ранее для вывода сообщений для пользо-
вателей в зависимости от того, выполнили они вход или нет. На этот раз блок
стал немного длиннее, потому что некоторые стилевые правила находятся внутри
условных тегов. В точке
расположен элемент
. Элемент
span
оформляет
фрагменты текста или элементы страницы, которые являются частью более длин-
ной строки. Если элементы
div
создают собственный раздел страницы, элементы
span
непрерывно располагаются внутри большего раздела. На первый взгляд такая
структура кажется запутанной, потому что многие страницы содержат элементы
div
с большой вложенностью. Здесь элемент
span
используется для оформления
текста на навигационной панели — например, имени пользователя, выполнившего
вход. Эта информация должна отличаться по внешнему виду от ссылок, чтобы
у пользователей не возникало желания щелкать на них.
В точке
закрывается элемент
div
с частями навигационной панели, которые
сворачиваются на узких экранах, а в конце секции закрывается навигационная па-
нель в целом. Если вы захотите добавить больше ссылок на навигационную панель,
включите другой элемент
в любую из групп
, определенных на навигаци-
онной панели; используйте стилевые директивы, идентичные приведенным выше.
Работа с файлом
base .html
еще не закончена. Необходимо определить два блока,
которые могут использоваться отдельными страницами для размещения контента,
относящегося к этим страницам.
Определение основного раздела страницы
Оставшаяся часть
base .html
содержит основной контент страницы:
460 Глава 20 • Оформление и развертывание приложения
base.html ...