Django

Уроки Python Django / Создание сайта

12 уроков 22 задания Справочник Компилятор

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

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


PythonBootstrap

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

Видео урок:

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

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

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

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

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

django-bootstrap-website.zip Необходима подписка!

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

Исходный код

Основной файл сайта
<!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 месяца!


PythonBootstrap

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