7.2 Что такое bootstrap
Bootstrap – это CSS библиотека, которая хранит в себе огромное количество элементов, позволяющих быстро создавать элементы на странице. Его можно использовать как средставо для полного создания визуала на странице. Можно использовать только часть от нег и менять его элементы. Можно просто взять слайдер и всё остальное на странице верстать своими силами
7.3 Как подключить bootstrap в свой проект
Можно подключить бутстрап через удалённые ссылки (скрипт + линк на CSS)
Так же мы можем быстро добавлять целые компоненты bootstrap, которые работают с ранее вставленными скриптами и линками
Ну и никто не мешает менять уже скопированные блоки со стилями. Очень важный момент – свои стили нужно вставить ниже подключенных стилей бутстрапа, чтобы они имели более высокий приоритет
Так же мы можем скачать сам бутстрап с официального сайта. Нам даётся вариант подключать только нужные нам блоки
7.4 Какие настройки содержит в себе bootstrap
Во-первых, хочется отметить, что бутстрап уже изначально имеет правильный бокс-сайзинг
Во-вторых, у него свой единый «reboot.css», который заменяет «reset.css» и «normalize.css»
7.5 Как задавать свои стили в bootstrap
Задавать свои стили для бутстрапа можно через файлик CSS, как уже говорилось ранее, но рекомендуется использовать встроенное изменение стилей в теги HTML. Это позволяет стилизовать код быстрее
На официальном сайте есть достаточно непростая инструкция по работе с отступами между элементами. Минимальный отступ 0.25rem, максимальный – 3rem. И далее приведены аббревиатуры модификаторов тегов
Пример использования:
7.6 Свойство Object-fit и как создать слайдер в bootstrap
Как всегда, бутстрап-элементы мы находим в документации и выбираем нужные
И если мы захотим задать размер нашим изображениям в слайдере, то увидим дапнную картину сплющивания:
И тут на помощь к нам приходит свойство object-fit, которое подгоняет размер элемента под определённую ему высоту разными способами
И теперь, когда мы добавили для изображения нашей карусели свойство object-fit: cover, наши изображения перестали сплющиваться
Однако, хочется отметить, что для подгонки изображений будет более правильным вариантом поместить его в див и для самого дива прописать background: url(…) center/cover, чтобы выравнивать изображения
7.7 Как модифицировать слайдер в bootstrap
Ну и тут представлен очередной пример быстрой работы с применением bootstrap.
Первым делом мы добавили отдельный класс с контентом, в который мы расположим текст и кнопку. Сам контент располжим внутри айтема слайдера и зафиксируем его абсолютно.
Кнопку мы достали из документации по бутстрапу. Класс с цветами для текста тоже достали там же
Оверлей у нас служит для затемнения изображения на слайдере. Айтему слайдера зададим релативное положение (чтобы оверлей раполагался относительно родителя). Самому оверлею зададим абсолютное положение с шириной и высотой в 100%, так же нужно задать цвет оверлею и непрозрачность
7.8 Как менять цвета в bootstrap
В быстром доступе в бутстрапе всего несколько цветов кнопок
Остальные же цвета забиты в качестве переменных и их нужно подключать локально через импорт. Однако такой подход – это лишняя трата времени, так как цвета можно задать и через CSS
Однако хочется сказать, что бутстрап позволяет задать кнопки на любой вкус и цвет и можно найти нужный для себя вариант из представленного списка на любой компонент
7.9 Как изменить скорость слайдера в bootstrap
И далее нужно упомянуть про модификацию элементов бутстрапа через атрибуты. В конце каждой страницы компонентов находятся атрибуты, которые можно применить на компоненте, чтобы модифицировать его поведение.
Например, тут нужно применить data-bs-опция=”значение”, чтобы задать другое поведение для слайдера
И, например, таким кодом мы уменьшили интервал между сменой слайда до одной секунды
7.10 Типичные ошибки и проблемы с работой в bootstrap
Тут дана только одна рекомендация – если что-то не работает, то нужно проверять всё по английской версии сайта. Русский сайт даёт примерный перевод документации, а уже оригинал более достоверен по классам и атрибутам
7.11 Как менять компоненты bootstrap. Меняем иконки на слайдере
Первый вариант. На сайте бутстрапа, на главной, можно найти и скачать иконку в svg формате. Далее просто вставляем её в код вместо спана, который находится внутри кнопки
Второй способ. Это подключение через тег svg
Третий способ. Подключение через CDN иконочного шрифта. Он настраивается как текст
7.12 Система сеток bootstrap. Bootstrap-grid
Самая главная фишка, по которой используют бутстрап – это сетка. Как можно увидеть на макете – все наши элементы располагаются относительно колонок, которые мы прописали
И в эту систему сеток включен зарезервированный класс container. В бутстрапе он уже заранее прописан и отвечает за медиазапросы на сужение ширины колонок. Данный контейнер работает как тот, что описывали раньше самостоятельно.
- Есть еще «container-fluid», который имеет ширину всего окна (и имеет только паддинги по 12 пикселей по сторонам)
И далее идёт ещё один важный класс «row». Он выстраивает внутрилежащие объекты в ряд. Если не будет хватать места на экране, то роу просто перенесёт этот элемент на новую строку
И сейчас идёт имбовая система сеток. Для того, чтобы она работала, нужно размещать её элементы внутрь боксов «container» > «row» >. Вызывается изменение размера через класс «col-количествоСтолбцов». Чтобы изменения вступили в силу так же нужно убрать размеры в ширину с самих элементов, которые мы меняем
Тут мы навесили ширину 4-6-2. И как мы видим, тут не видно отступов между элементами. По сути отступы есть, но они не работают на блоки
Чтобы исправить ситуацию, нужно поместить элементы в бокс и присвоить col- именно этим контейнерам, а не самим элементам
Бутстрап использует 12-иколоночную систему с отступами по 30 пикселей
И тут нужно упомянуть, что бутстрап является mobile-first библиотекой (верстается мобильная версия, а потом уже адаптируется десктопная). То есть наименования классов идут от самых маленьких к самым большим размерам. Однако даже мобильные стили работают на более десктопных форматах, поэтому можно меньше волноваться о сложностях адаптива
Тут я написал, что при минимальном размере один элемент будет занимать 12 колонок, при среднем - 6, а при максимальном - 4
- «offset-числоКолонок» создаёт отступы между элементами
И если мы встречаем такой элемент, который малым достаёт следующую колонку, то мы ему должны отдать и эту колонку. Текст лежит в 5 колонках – располагаем на пяти
7.13 Как решать задачи возникающие в процессе верстки
Чтобы решить любую задачу на сайте, можно воспользоваться готовыми ответами в интернете, коих пруд пруди. И теперь живи с этой информацией как жил до этого…
Тут показано как сделать плавную прокрутку