Определение навигационной панели

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

...

</head>

<body>

. .

(1) . .<nav class="navbar navbar-default navbar-static-top">

. . <div class="container">

. . . .

. . . .<div class="navbar-header">

(2) . . . . <button type="button" class="navbar-toggle collapsed"

. . . . . . data-toggle="collapse" data-target="#navbar"

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

. . . . </button>

(3) . . . . <a class="navbar-brand" href="{% url 'learning_logs:index' %}">

. . . . . . Learning Log</a>

. . . .</div>

. . . .

(4) . . . .<div id="navbar" class="navbar-collapse collapse">

(5) . . . . <ul class="nav navbar-nav">

? . . . . . .<li><a href="{% url 'learning_logs:topics' %}">Topics</a></li>

. . . . </ul>

. . . .

? . . . . <ul class="nav navbar-nav navbar-right">

. . . . . .{% if user.is_authenticated %}

. . . . . . <li><a>Hello, {{ user.username }}.</a></li>

. . . . . . <li><a href="{% url 'users:logout' %}">log out</a></li>

. . . . . .{% else %}

. . . . . . <li><a href="{% url 'users:register' %}">register</a></li>

. . . . . . <li><a href="{% url 'users:login' %}">log in</a></li>

. . . . . .{% endif %}

? . . . . </ul>

. . . .</div>

. . . .

. . </div>

. .</nav>

Первый элемент — открывающий тег <body>. Тело файла HTML содержит контент, который будет виден пользователям на странице. В точке (1) элемент <nav> обозначает раздел навигационных ссылок на странице. Весь контент внутри этого элемента оформляется по правилам Bootstrap, определяемым селекторами navbar, navbar-default и navbar-static-top. Селектор определяет, к каким элементам страницы должно применяться стилевое правило.

В точке (2) шаблон определяет кнопку, которая будет отображаться, если ширины окна браузера не хватает для горизонтального отображения всей навигационной панели. Когда пользователь нажимает кнопку, навигационные элементы выводятся в раскрывающемся списке. Атрибут collapse сворачивает навигационную панель при уменьшении размеров окна браузера и при отображении сайта на мобильных устройствах с малыми экранами.

В точке (3) имя проекта выводится у левого края навигационной панели. Так как это имя будет присутствовать на каждой странице проекта, оно оформляется в виде ссылки на домашнюю страницу.

В точке (4) определяется набор ссылок для навигации по сайту. Панель навигации фактически представляет собой список, начинающийся с <ul> (5), а каждая ссылка является элементом списка (<li>) ?. Чтобы включить новые ссылки, добавьте строки со следующей структурой:

<li><a href="{% url 'learning_logs:текст %}">Текст</a></li>

Эта строка представляет одну ссылку на навигационной панели. Ссылка берется непосредственно из предыдущей версии base.html.

В точке ? создается второй список навигационных ссылок, на этот раз с использованием селектора navbar-right. Селектор navbar-right оформляет набор ссылок так, что он выводится в правой части навигационной панели, где обычно отображаются ссылки для входа/регистрации пользователя. В данном случае выводится либо приветствие для пользователя и ссылка для выхода, либо ссылки для регистрации и входа. Остальной код этого раздела закрывает элементы, содержащие навигационную панель ?.