Урок #5 - Статические файлы. Добавление Bootstrap

Урок #5 - Статические файлы. Добавление Bootstrap

На данный момент наш сайт выглядит очень плохо. У него нет ни стилей, ни картинок, ни корректного HTML кода. В уроке мы это исправим. Мы добавим Bootstrap, пропишем HTML и создадим красивые стили для всего нашего сайта.

Видеоурок

Полезные ссылки:

  • Bootstrap CDN;
  • Ссылка для подключения FontAwesome: https://use.fontawesome.com/releases/v5.8.2/css/all.css


Язык стилей CSS

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




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


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


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

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


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


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

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

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

Исходный код

Файл «index.html»
{% extends 'main/layout.html' %}

{% block title %}Главная страница{% endblock %}

{% block content %}
    <div class="features">
        <h1>Главная страница</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur deleniti doloribus officia officiis quam quasi rerum tempore ut voluptates voluptatibus.</p>
        <button class="btn btn-warning">На страницу про нас</button>
    </div>
{% endblock %}
Посмотреть остальной код можно после подписки на проект!

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

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

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

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

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

Изучение Python до профи / Основы, Django, TKinter
Telegram Bots: Создание ботов на Python Aiogram
10 уроков
Уроки ChatGPT API / Разработка программ на Python и ChatGPT
7 уроков
Изучение Flask / Создание сайта на Python
6 уроков
Разработка игр на Python с нуля / Уроки Pygame
10 уроков
Изучение PyQt5 / Графический интерфейс на Python
6 уроков
Комментарии (6)
Добавить комментарий

Аня 14 сентября 2023 в 16:32

Здравствуйте, расскажите, пожалуйста, подробнее про добавление bootsrap через загрузку файла css
Ответить

Анна 14 августа 2023 в 16:02

Код писала по видео. Но не работают изменения на боковой панели, и картинки с сайта fontawesome не грузятся ни с одной версии.
Ответить

Medaza 28 мая 2023 в 12:53

Не работает стиль боковой панели. Код писал по видео. Пробовал менять ширину и цвета. При этом цвет фона меняется. В чем проблема?
Ответить

Михаил 28 февраля 2023 в 15:48

Если у вас не грузит картинки с fontawesome даже если используете туже ссылку что и автор, то попробуйте в ссылке поменять версию сайта awesomr
Ответить

Habit 28 декабря 2022 в 17:43

Не грузились иконки с font awesome ни с одной из ссылок с урока, но проблему решил сл. способом: на сайте fontawesome просто зарегистрировался, дальше в личном кабинете жмете на kits, дальше жмете на свой единственный имеющийся kits, и там уже есть ссылка в виде JS, которую я подставил и все заработало. Т второй пункт, на сайте при поиске иконок выберите пункт "бесплатные", т.к. если у вас нету платной версии они просто не отобразятся
Ответить

Ihor 13 ноября 2023 в 21:31

Не грузились даже так. Применил стили, пошло.

Iaroslav 06 августа 2022 в 16:36

Перепроверьте задание с загрузкой картинки. Выскакивает ошибка:

TemplateSyntaxError at /
Invalid block tag on line 13: 'static', expected 'endblock'. Did you forget to register or load this tag?

статика подключена только в файле base, а index на него ссылается через extends.
Решить проблему помогает только подключение статики в файле index.
Ответить