Уроки Django

Урок #5 - Добавление Bootstrap стилей к сайту

Урок #5 - Добавление Bootstrap стилей к сайту

Каждый сайт должен иметь красивый дизайн, чтобы пользователь оставался как можно дольше на нем. В этом видео мы добавим библиотеку Bootstrap к сайту, а также научимся добавлять статические файлы на сайт.

Видеоурок

Для оформления стилей существует специальный язык CSS, но помимо него можно также использовать различные готовые технологии. Одной из таких технологий является библиотека Bootstrap, которая предназначена для добавления готовых стилей к объектам на сайте. Скачать библиотеку можно на этом сайте.

Вы можете детальнее ознакомиться с этой библиотекой посмотрев видеокурс по изучению этой библиотеки. Если вы не знаете эту библиотеку, то это не беда, так как основной упор мы будем делать не на ней, а на добавлении статических файлов.

В Jinja для добавления статических файлов существует специальная команда, которая называется - load staticfiles. После её вызова мы можем подключать различные статические файлы, которые находятся в папке static. Среди статических файлов могут быть любые файлы, которые находятся у вас на сервере такие, как: картинки, стили, JS файлы, документы и прочие файлы.

Важно помещать файлы в еще одну папку, чтобы не получились конфликты имен. Дело в том, что Django объединяет все папки static в одну общую папку, поэтому дополнительные папки предотвращают ошибки связанные с одинаковыми именами.

Материалы для курса

Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт

Исходный код

Основной файл сайта
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Заголовок страницы</title>
  {% load staticfiles %}
  <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css">
</head>
<body>
  <div class="jumbotron">
    <div class="container">
      <h1>{% include "mainApp/includes/some_html.html" %}</h1>
      {% block content %}
      {% endblock %}
      <p>
        <a href="/" class="btn btn-success btn-lg">Главная страница</a>
        <a href="/news" class="btn btn-primary btn-lg">Узнать больше &raquo;</a>
      </p>
    </div>
  </div>
  <div class="container">
    <img src="{% static 'mainApp/image/mercedes.png' %}" class="img-thumbnail">
    <hr>
    &copy; Все права защищены 2018
  </div>
</body>
</html>

Онлайн редактор кода

Загрузка...

Задание к уроку

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца

Также стоит посмотреть

Изучение Python до профи / Основы, Django, TKinter
Создание игры на Python 3 с PyGame
5 уроков
Уроки Python для начинающих
21 урок