Платформа EXPAND

Appearance

Насколько хорошо ты знаешь Bootstrap: ​

20+ интерактивных задач-испытаний 🥇 ​

Испытания: от простых к сложным ​

20+ частых задач, которые Bootstrap помогает сделать быстро:

❗ Ограничение на всех этапах

Старайся писать минимум стилей в CSS. Используй готовые CSS-классы (а.k.a хелперы) из Bootstrap


1) Начнём с простого: мелкие доделки и улучшения 🖌 ​

  1. Содай 3 колонки с текстом и поставь их в ряд:
Колонка 1
Колонка 2
Колонка 3
  1. Теперь закрась эти колонки и добавь немного пространства между ними:
Колонка 1
Колонка 2
Колонка 3
  1. Думаю, будет неплохо поставить текст колонок по центру:
Колонка 1
Колонка 2
Колонка 3

  1. Давай поместим в наши колонки кнопки и кастомизируем их: изменим заливку, размер и цвет текста для каждой из них

  2. Теперь давай сделаем так, чтобы 1 колонка оказалась слева, а две остальные — справа: раздвинь их между собой


2) Время адаптивов! ✨ ​

  1. Создай 6 непустых колонок. Закрась их любым цветом
  2. Сделай так, чтобы текст отступил от краев экрана после мобильника
  3. Сделай так, чтобы после мобильника блоки стали в ряд. При этом (те же цены на услуги)
  4. Задай разную ширину колонок на телефоне, планшете и ПК
  5. Создай мобильное бургер-меню силами Bootstrap
  6. Научись прятать слайдер на мобильном
  7. Научись изменять сетку колонок: на мобильном колонки идут друг под другом, на планшете - по 2 в ряд, на десктопе - по 3 в ряд, и на больших ПК - по 4 в ряд


3) Работа с элементами интерфейса 🧩 ​

  1. Разбей сайт на 3 части: сайдбар слева (20% ширины) контент по центру и сайдбар справа (20% ширины)
  2. Убедись в том, что все блоки одинаково растянуты по высоте
  3. Наполни сайдбары пунктами меню. Сделай так, чтобы они прятались на мобильном
  4. Добавь в контент 3 карточки: картинка, текст и кнопка
  5. Убедись в том, что вне зависимости от количества текста карточки всегда одинаковой высоты, а их кнопки прижаты к низу
  6. Научись менять порядок блоков на планшете: меняй сайдбары местами
  7. Добавь на сайт липкий хедер


4) Модификации компонентов и сайта: кастомизируем Bootstrap 🎨 ​

Цель задания

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

Задание ​

  1. Добавь на сайт несколько цветных элементов. Кнопки из бутстрапа сгодятся

html
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
  1. Твоя задача следующая: не просто изменить цвета, а перезаписать глобальные переменные Bootstrap. Вот они.
  2. Ограничение на этом задании: нельзя использовать color и background-color в CSS. Меняем только значение глобальных переменных - и любуемся нашими кастомными кнопочками:

В итоге ты повысишь навыки владения Bootstrap и CSS ​

Ты улучшил владение как Bootstrap, так и CSS. Разработка внешнего UI станет быстрее и приятнее

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

И самое классное в этом то, что код менять вовсе не нужно: достаточно просто перезаписать CSS-переменные.

Всё это осознаешь, когда часто пользуешься библиотеками с глобальными CSS-переменными. Делай интересные проекты и практикуйся!


5) Хардкор ⚓ ​

  1. Установи себе Bootstrap с помощью npm / yarn / pnpm
  2. Используй в своём коде @extend хотя бы троих классов из scss-хелперов Bootstrap
  3. Теперь используй @include хотя бы троих миксих из scss-миксин Bootstrap
  4. Научись быстро создать одностраничный лендинг, используя Bootstrap

Дополнено: