Книга «Изучаем Python»
жүктеу/скачать 7,86 Mb. Pdf көрінісі
|
Изучаем Python. Программирование игр, визуализация данных, веб-приложения ( PDFDrive )
раздел Navbars in action . Мы воспользуемся шаблоном Static top navbar , который предоставляет простую панель навигации у верхнего края, заголовок страницы и контейнер для ее содержимого. На рис. 20.1 показано, как будет выглядеть домашняя страница после применения шаблона Bootstrap к base .html и незначительного изменения index .html . Рис. 20.1. Домашняя страница Learning Log Теперь вы знаете, к какому результату мы стремимся, и вам будет проще понять дальнейшие пояснения. Изменение base .html Шаблон base .html необходимо изменить так, чтобы в нем был задействован шаблон Bootstrap. Новая версия base .html будет представлена в несколько этапов. 440 Глава 20 • Оформление и развертывание приложения Определение заголовков HTML Первое изменение в base .html : заголовки HTML определяются в файле, чтобы при открытии страницы Learning Log в строке заголовка браузера выводилось имя сайта. Также будут добавлены некоторые требования для использования Bootstrap в шаблонах. Удалите все содержимое base .html и замените его следующим кодом: base.html {% load bootstrap3 %} {% bootstrap_css %} {% bootstrap_javascript %} В точке загружается коллекция шаблонных тегов из django-bootstrap3 . Затем файл объявляется как документ HTML , написанный на английском языке . Файл HTML состоит из двух основных частей, заголовка и тела — заголовок фай- ла начинается в точке . Заголовок файла HTML не содержит контента: он всего лишь передает браузеру информацию, необходимую для правильного отображения страницы. В точке включается элемент title страницы; его содержимое будет выводиться в строке заголовка браузера при открытии Learning Log. В точке используется один из шаблонных тегов django-bootstrap3 , который приказывает Django включить все стилевые файлы Bootstrap. Следующий тег активизирует все интерактивное поведение, которое может использоваться на странице, — напри- мер, раздвижные навигационные панели. В точке располагается закрывающий тег . Определение навигационной панели В верхней части страницы определяется навигационная панель: ... Первый элемент — открывающий тег . Тело файла HTML содержит кон- тент, который будет виден пользователям на странице. В точке элемент |