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

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

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

Видеоурок

Язык стилей CSS

Для создания стилей в HTML разметке существует язык CSS. Он является основным языком стилей и без знаний CSS очень сложно создавать дизайн сайта. Если вы ещё не знаете CSS, то рекомендуем посмотреть наш урок по изучению CSS за 45 минут.




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


Вы можете детальнее ознакомиться с библиотекой на нашем сайте в курсе «Изучение технологии Bootstrap». 


Использование статических файлов

В Jinja для добавления статических файлов существует специальная команда load staticfiles. Команду необходимо прописывать перед подключением статического файла или же в начале HTML документа перед всеми тегами.


Среди статических файлов могут быть любые файлы, что находятся у вас на сервере: картинки, стили, JavaScript файлы, документы и прочее.


Все статические файлы важно помещать в папку «static». Работает она по принципу папки «templates», но служит для хранения статических данных.

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

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

Исходный код

Основной файл сайта
<!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 для начинающих
21 урок
Изучение Python до профи / Основы, Django, TKinter
Создание игры на Python 3 с PyGame
5 уроков
Изучение Flask / Создание сайта на Python
6 уроков
Комментарии для сайта Cackle