Часть пятая. Шаблонизатор
Работаем с Bootstrap
Цель: Создание полноценного сайта с использованием шаблонизатора
Задачи:
    Установка Bootstrap
    Применение шаблонов Bootstrap
    Графическая настройка страницы
    Создание статических стилей

Bootstrap

Перейдём к последнему блоку – фреймворку Bootstrap.
Bootstrap – это фреймворк, в котором прописаны ряд CSS стилей и JavaScript скриптов. Их можно использовать, прописывая их у нас в проекте.
Переходим на сайт ниже:
Official CDN of Bootstrap and Font Awesome
jsdelivr
Копируем первую строку кода:
Переходим в main.html и до закрытия «головы» сайта (head) прописывает link, нажимаем Tab и вставляем скопированную ссылку. Должно получиться вот так:
1
<!doctype html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7
<title>{{ title }}</title>
8
<link rel="stylesheet" ref="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
9
</head>
10
<body>
11
{% block main_section %}
12
{% endblock %}
13
</body>
14
</html>
Copied!
Сейчас мы подключили CSS стиль к нашему сайту. Посмотрим на результат:
Не сказать, что сайт стал красивым, но он уже начал своё преображение. Продолжим.
Пишем в теле main.html «main.container» и жмём Tab (спасибо, Emmet). Должно получиться так:
1
<!doctype html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7
<title>{{ title }}</title>
8
<link rel="stylesheet" ref="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
9
</head>
10
<body>
11
<main class="container">
12
{% block main_section %}
13
{% endblock %}
14
</main>
15
</body>
16
</html>
Copied!
Результат:
Теперь, добавим шапку. Для этого переходим на сайт https://getbootstrap.com. На нём, переходим во вкладку Examples, затем – Navbars.
Выбираем понравившуюся панель. Кликаем по ней правой кнопкой мыши -> Показать код элемента
В коде выделяем элемент целиков, как показано на скриншоте и нажимаем кнопку Copy Element
Скопированный элемент вставляем в тело в файле main.html. Вот так:
1
<!doctype html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7
<title>{{ title }}</title>
8
<link rel="stylesheet" ref="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
9
</head>
10
<body>
11
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
12
<a class="navbar-brand" href="#">Navbar</a>
13
<button class="navbar-toggler" type="button" data-toggle="collapse" data-arget="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
14
<span class="navbar-toggler-icon"></span>
15
</button>
16
17
<div class="collapse navbar-collapse" id="navbarsExample09">
18
<ul class="navbar-nav mr-auto">
19
<li class="nav-item active">
20
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
21
</li>
22
<li class="nav-item">
23
<a class="nav-link" href="#">Link</a>
24
</li>
25
<li class="nav-item">
26
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
27
</li>
28
<li class="nav-item dropdown">
29
<a class="nav-link dropdown-toggle" href="#" id="dropdown09" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
30
<div class="dropdown-menu" aria-labelledby="dropdown09">
31
<a class="dropdown-item" href="#">Action</a>
32
<a class="dropdown-item" href="#">Another action</a>
33
<a class="dropdown-item" href="#">Something else here</a>
34
</div>
35
</li>
36
</ul>
37
<form class="form-inline my-2 my-md-0">
38
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
39
</form>
40
</div>
41
</nav>
42
<main class="container">
43
{% block main_section %}
44
{% endblock %}
45
</main>
46
</body>
47
</html>
Copied!
Осталось отредактировать шаблон. Так и сделаем:
1
<!doctype html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7
<title>{{ title }}</title>
8
<link rel="stylesheet" ref="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
9
</head>
10
<body>
11
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
12
<a class="navbar-brand" href="/blog/">МИИГАиК</a>
13
<button class="navbar-toggler" type="button" data-toggle="collapse" data-arget="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
14
<span class="navbar-toggler-icon"></span>
15
</button>
16
17
<div class="collapse navbar-collapse" id="navbarsExample09">
18
<ul class="navbar-nav mr-auto">
19
<li class="nav-item active">
20
<a class="nav-link" href="/blog/">Главная</a>
21
</li>
22
<li class="nav-item">
23
<a class="nav-link" href="/blog/contacts">О ВУЗе</a>
24
</li>
25
</ul>
26
</div>
27
</nav>
28
<main class="container">
29
{% block main_section %}
30
{% endblock %}
31
</main>
32
</body>
33
</html>
Copied!
Результат:
На этом моменте, становиться видна одна проблема: ссылка на главную страницу выглядит так:
<a class="navbar-brand" href="/blog/">МИИГАиК</a>, то есть главной страницы у нас нет. Мы переходим на страницу второго уровня – blog. Исправим это. Переходим в urls.py в папке проекта (MySite). В файле меняем одно поле.
С этого:
1
path('/blog', include('blog.urls')),
Copied!
на это:
1
path('', include('blog.urls')),
Copied!
Затем поменяем ссылки в main.html с:
1
<a class="navbar-brand" href="/blog/">МИИГАиК</a>
Copied!
на:
1
<a class="navbar-brand" href="/">МИИГАиК</a>
Copied!
Финальный код выглядит так:
1
<!doctype html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7
<title>{{ title }}</title>
8
<link rel="stylesheet" ref="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
9
</head>
10
<body>
11
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
12
<a class="navbar-brand" href="/">МИИГАиК</a>
13
<button class="navbar-toggler" type="button" data-toggle="collapse" data-arget="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
14
<span class="navbar-toggler-icon"></span>
15
</button>
16
17
<div class="collapse navbar-collapse" id="navbarsExample09">
18
<ul class="navbar-nav mr-auto">
19
<li class="nav-item active">
20
<a class="nav-link" href="/">Главная</a>
21
</li>
22
<li class="nav-item">
23
<a class="nav-link" href="/contacts">О ВУЗе</a>
24
</li>
25
</ul>
26
</div>
27
</nav>
28
<main class="container">
29
{% block main_section %}
30
{% endblock %}
31
</main>
32
</body>
33
</html>
Copied!
Проверяем адрес главной страницы:
Всё в порядке.

Редактируем стиль в Bootstrap

Теперь вы можете самостоятельно отредактировать сайт с пояснениями из Bootstrap – https://getbootstrap.com/docs. Помните один важный момент – Bootstrap разделяет страницу по вертикали на 12 колонн равной величины, а по горизонтали – разделений нет.
Я настроил сайт по своему вкусу и вот, что у меня получилось (работаем только с файлом main.html):
1
<!doctype html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7
<title>{{ title }}</title>
8
<link rel="stylesheet" ref="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
9
</head>
10
<body>
11
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-5">
12
<a class="navbar-brand" href="/">МИИГАиК</a>
13
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
14
arget="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
15
<span class="navbar-toggler-icon"></span>
16
</button>
17
18
<div class="collapse navbar-collapse" id="navbarsExample09">
19
<ul class="navbar-nav mr-auto">
20
<li class="nav-item active">
21
<a class="nav-link" href="/">Главная</a>
22
</li>
23
<li class="nav-item">
24
<a class="nav-link" href="/contacts">О ВУЗе</a>
25
</li>
26
</ul>
27
</div>
28
<div class="navbar-nav">
29
<a href="tel:+74993227800" class="btn btn-outline-secondary">Позвонить</a>
30
</div>
31
</nav>
32
<main class="container">
33
<div class="row">
34
<div class="col-md-8">
35
{% block main_section %}
36
{% endblock %}
37
</div>
38
39
<aside class="col-md-4">
40
<div class="p-3">
41
<h3><b>Интересные новости</b></h3>
42
<img src="http://www.miigaik.ru/upload/medialibrary/6c5/6c57c4e2a73db9f0dc225b28c8dab3f6.png" height="400">
43
<p>Международная научно-техническая онлайн конференция «Пространственные данные в условиях цифровой трансформации» станет ключевым мероприятием, приуроченным к дате основания Московского государственного университета геодезии и картографии (МИИГАиК) 25 мая 1779 года и пройдет в период с 25 по 27 мая 2020 года.</p>
44
<a href="http://www.miigaik.ru/about/" target="_blank">
45
<button class="btn btn-warning">Посмотреть</button>
46
</a>
47
</div>
48
</aside>
49
</div>
50
</main>
51
</body>
52
</html>
Copied!
Результат:
Внимательно изучите код и прочитайте о не понятных тегах в самоучителе по html и bootstrap.
Last modified 10mo ago