Bootstrap уже внутри: красивые страницы в Moodle без собственного CSS

Обычно страница урока в Moodle выглядит так: заголовок, несколько абзацев, список и ещё несколько абзацев. Весь материал на месте, но предупреждение теряется среди пояснений, а задание приходится искать глазами.

Для карточек, плашек и колонок часто не нужно устанавливать новую тему или писать собственный CSS. В теме Boost уже есть Bootstrap — библиотека готового оформления. Достаточно обратиться к её классам из HTML-режима редактора.

Я собрал «Мастерскую страниц» в живом Moodle: один урок до и после оформления, восемь блоков для копирования и ZIP с HTML-шаблонами. Примеры и скачивание открыты без регистрации.

Что значит «Bootstrap уже внутри»

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

Например, класс card оформляет карточку, p-4 добавляет внутренние отступы, а mb-4 — отступ снизу. Вы указываете эти имена в HTML, а стили берутся из темы Moodle.

«Без собственного CSS» не означает «без HTML». Вставить небольшой фрагмент разметки придётся. Но писать правила оформления, подключать библиотеки и обращаться к администратору за установкой плагина для этих примеров не нужно: достаточно права редактировать свой курс.

Все примеры ниже проверены в Moodle 5.3, теме Boost с фирменными цветами El-Blog и Bootstrap 5.3.8. У другой темы могут быть другая версия Bootstrap и другие стили, поэтому цвета и детали оформления могут отличаться. Отдельный CSS или JavaScript для уроков я не подключал.

Один урок до и после

Для демонстрации я взял мини-урок «Как распознать подозрительное письмо». В исходном варианте идут обычные абзацы: признаки подозрительного сообщения, сравнение действий и вопрос для самопроверки.

В оформленном варианте тот же учебный материал разбит по смыслу:

• предупреждение выделено плашкой;

• три признака собраны в карточки;

• рискованное и безопасное действия стоят рядом;

• разбор вопроса можно раскрыть после собственного ответа;

• вывод и следующий шаг вынесены в отдельный блок.

Такое оформление помогает различать части урока. Но оно не заменяет работу с содержанием: если материал непонятен, карточка не сделает его понятнее.

Как вставить первый блок в Moodle

Начните с копии страницы или тестового курса.

1. Включите режим редактирования и добавьте элемент «Страница».

2. В редакторе поля «Содержание страницы» откройте «Инструменты → Исходный код». Именно содержания: у поля «Описание» свой редактор с таким же меню.

3. Вставьте HTML из примера ниже.

4. Нажмите «Сохранить» в окне исходного кода, затем «Сохранить и показать» в форме страницы.

5. Посмотрите результат на опубликованной странице. Внутри визуального редактора оформление может выглядеть иначе.

В нашем Tiny пункт исходного кода доступен в меню «Инструменты». В другом редакторе или его конфигурации путь может отличаться; документация Moodle о Tiny поможет сориентироваться.

Вот первая плашка:

<div class="alert alert-warning text-body mb-4">
  <h3 class="h5">Важно: проверьте запрос</h3>
  <p class="mb-0">
    Если письмо требует срочно ввести пароль,
    откройте сервис через закладку.
  </p>
</div>

Здесь alert создаёт плашку, alert-warning задаёт оформление предупреждения, а text-body берёт основной цвет текста из темы. mb-4 добавляет пространство под блоком, mb-0 убирает лишний отступ у последнего абзаца. Класс h5 задаёт размер заголовка, сохраняя его HTML-уровень h3.

В мастерской есть три варианта плашек: «Важно», «Пример» и «Попробуйте». Смысл каждой передаётся текстом: цвет только помогает отличить её от соседних.

Карточки и колонки, которые складываются на телефоне

Когда нужно показать несколько равноправных признаков, хорошо работают карточки. Внутри каждой — один признак и короткое пояснение.

<div class="row g-3 mb-4">
  <div class="col-12 col-md-4">
    <div class="card h-100">
      <div class="card-body">
        <h3 class="h5">Торопят</h3>
        <p class="mb-0">Просят действовать без проверки.</p>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-4">
    <div class="card h-100">
      <div class="card-body">
        <h3 class="h5">Просят секрет</h3>
        <p class="mb-0">Запрашивают пароль или код подтверждения.</p>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-4">
    <div class="card h-100">
      <div class="card-body">
        <h3 class="h5">Адрес не совпадает</h3>
        <p class="mb-0">Домен отличается от известного вам адреса.</p>
      </div>
    </div>
  </div>
</div>

Разобраться можно по слоям:

• row объединяет колонки в строку, g-3 задаёт промежутки;

• col-12 занимает всю строку на узком экране;

• col-md-4 отводит колонке четыре доли из двенадцати начиная с порога md;

• card оформляет карточку, card-body добавляет внутреннее поле;

• h-100 растягивает карточку на высоту её колонки.

В стандартной сетке Bootstrap 5 порог md начинается с ширины окна 768 пикселей. Выше него три карточки стоят рядом, ниже — друг под другом. На нашей площадке я проверил раскладку при ширине 390 пикселей: горизонтальной прокрутки нет.

Посмотреть карточки в Moodle. Если нужны две колонки для сравнения, используйте col-md-6 вместо col-md-4 — такой пример тоже есть в мастерской.

Не старайтесь заполнять каждую строку колонками. Для длинного объяснения обычная текстовая колонка удобнее; карточки полезны там, где материал действительно делится на короткие самостоятельные части.

Отступы и акценты без ручного форматирования

Часто странице не нужны дополнительные украшения: достаточно отделить блоки друг от друга и сделать заголовки различимыми. Для этого пригодятся небольшие классы Bootstrap.

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

Например, итог можно оформить так:

<section class="border rounded p-4 bg-body-tertiary mb-4">
  <h3 class="h4">Сначала проверка — потом действие</h3>
  <p class="lead">
    Знакомое имя отправителя ещё не подтверждает его личность.
  </p>
  <p class="mb-0">
    Следующий шаг: сохраните контакт вашей службы поддержки.
  </p>
</section>

Открыть итоговый блок. Он использует фон и текст темы, поэтому не превращается в белый прямоугольник с белыми буквами при переключении в тёмный режим. На своей теме результат всё равно стоит проверить.

Раскрывающийся ответ без JavaScript

Для самопроверки удобно сначала задать вопрос, а разбор спрятать под раскрывающейся строкой. В нашем шаблоне за поведение отвечает обычный HTML — details и summary. Bootstrap добавляет рамку и отступы.

<details class="border rounded p-3 mb-4">
  <summary class="fw-semibold">Показать разбор</summary>
  <div class="pt-3">
    <p class="mb-0">
      Не переходите по ссылке из неожиданного письма.
      Откройте сервис привычным способом и уточните запрос.
    </p>
  </div>
</details>

Это не Bootstrap Collapse: ему не нужны скрипт, идентификаторы панелей или атрибуты для подключения компонента. На нашей площадке ответ открывается кликом и с клавиатуры — Tab переводит фокус на заголовок, Enter раскрывает блок.

Такой блок не проверяет ответ ученика и ничего не записывает в журнал оценок. Если нужны попытки, баллы или отчёт по ответам, используйте тест Moodle или другую учебную активность.

Попробовать раскрывающийся ответ. В библиотеке есть и более развёрнутый кейс с разбором.

А Tiny не испортит разметку?

Хороший вопрос: красивый пример мало полезен, если после редактирования у него пропадают колонки или раскрывающийся ответ.

Для проверки я собрал все десять HTML-файлов из архива на отдельной скрытой тестовой странице: восемь блоков и два варианта урока. Затем дважды прошёл настоящий цикл в Tiny: открыл исходный код, сохранил его, сохранил страницу, снова открыл редактор и повторил сохранение.

У всех десяти шаблонов сохранились классы, текст и количество блоков details/summary. После первого сохранения Tiny переформатировал отступы и переносы строк в HTML. Второе сохранение уже не изменило код.

Это результат проверки конкретной площадки. На своём Moodle сделайте тот же небольшой тест: вставить → сохранить → открыть на редактирование → сохранить ещё раз → проверить результат. Если разметка меняется, сначала выясните, что делает редактор и тема; ослаблять фильтрацию сайта ради оформления страницы не требуется.

Восемь шаблонов для своего курса

В мастерской каждый блок сопровождается HTML для копирования и подсказкой, что в нём менять.

Скачать HTML-шаблоны ZIP. Внутри восемь блоков, исходный и оформленный урок, а также инструкция. Файлы можно изменять и использовать в своих курсах, в том числе коммерческих. Регистрация для скачивания не нужна.

Файлы содержат фрагменты HTML без подключения Bootstrap. Если открыть их отдельно в браузере, оформление Moodle не появится: вставляйте их в содержание страницы курса.

Что проверить на своей платформе

Перед переносом готового урока достаточно короткой проверки:

1. Версия Bootstrap. Её определяет тема. Примеры рассчитаны на Bootstrap 5.3; в Bootstrap 4 часть классов, например g-3, gap-3 и text-body-secondary, потребует замены или другой разметки. При сомнениях уточните версию у администратора.

2. Повторное сохранение. Убедитесь, что редактор оставляет классы, колонки и раскрывающиеся ответы.

3. Телефон и обе темы. Текст должен читаться, а колонки — складываться без горизонтальной прокрутки. В архиве нет жёстко заданных белых фонов или цветов текста.

4. Заголовки и смысловые подписи. Сохраняйте логичный порядок уровней заголовков. Не передавайте предупреждение одним цветом — слово «Важно» тоже должно остаться.

Начните с одного блока: выделите предупреждение или оформите сравнение. Для этого не нужно переделывать весь курс.

Если хотите собрать целостный курс — с маршрутом, оформленными страницами и интерактивными картами, — встаньте в лист ожидания интенсива «Moodle на 200 %». А в короткой анкете расскажите о своей задаче: ответы помогут определить акценты программы.