С чего начинается Bootstrap 5

Каждый верстальщик, который сталкивался хотя бы с версткой макета с PSD знаком с библиотекой Bootstrap. Она появилась в августе 2011, и изначально была фреймворком для Twitter, имела название Twitter Blueprint. Но большую популярности приобрела именно со второй версии, в которой появились 12-колоночная верстка и поддержка адаптивности. Boottrap является самым популярным в мире фреймворком для создания интерфейсов сайтов и административных панелей, такая популярность достигается благодаря простоте. Даже начинающий разработчик может с легкостью начать им пользоваться, и сверстать сайт без углубленных знаний веб разработки. Библиотеку можно загрузить по ссылке: https://getbootstrap.com/

Но что иногда останавливает тех кто им ни разу не пользовался? Его колоссальный набор возможностей, а точнее выбор какой частью его пользоваться. Если вы решили пользоваться Bootstrap, это не означает, что вы будете использовать весь потенциал библиотеки, большинство использует всего лишь сетку для размещения элементов, а для этого достаточно знать его часть Bootstrap Grid. Разберем структуру библиотеки, она содержит модули:

  • Bootstrap Grid
  • Bootstrap RTL
  • Bootstrap Reboot
  • Bootstrap Utilities

Bootstrap Grid

Модуль содержит мощную систему сеток для верстки под любые размеры дисплеев расположения любых элементов на странице. Поддерживаются как и была озвучено выше 12-колоночная верстка, 5 адаптивных ярусов и так же Sass. В основном, поняв смысл 12-колоночной верстки мы начинаем пользоваться предустановленными классами. Ниже представлена сетка верстки, для понимания что представляет из себя этот тип верстки:

По своей практике могу сказать что как верстальщик я не люблю Photoshop, это самая неудобная программа, как и Sketch. Для проектирования макетов лучше подходит Figma, а для верстки лучше пользоваться сразу Avocode, там и стили показывает Pixel Perfect верстку лучше через него делать. В Avocode как раз такую сетку мы и накладываем на наш макет и визуально можем разделить на блоки проект и приступить непосредственно к верстке.

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

Bootstrap RTL

RTL — right to left. Так и переводится дословно справа на лево, актуально при верстке макетов, где используется правило письма с права на лево. Как пример, арабский, иврит и др.

Bootstrap Reboot

Раньше модно было подключать Reset.css, Normalize.css. Эти библиотеки существуют и развиваются до сих пор, но если у вас есть Bootstrap, то можно воспользоваться модулем Reboot. Он позволяет выполнить сброс базовых стилей, установить единый стиль отображения для всех браузеров и привести все единицы отображения в rem. Если ознакомится с документацией на официальном сайте, то видно сколько было сделано изменений, для того чтобы каждый элемент одинаково отображался во всех браузерах.

Bootstrap Utilities

Этот раздел довольно обширный, а в 5 версии еще и появилась уникальная возможность, реализованная в механизме Utilities API, благодаря которому вы можете расширять или изменять действующий функционал классов на Sass. В модуль входит следующий функционал:

  • Utility API
  • Borders — скругление и цвета границ элементов
  • Colors — готовый набор цветов
  • Display — меняет CSS свойство display на указанное
  • Flex — удобные классы использования CSS Flexbox
  • Float — различные вариации CSS свойства float
  • Interactions — взаимодействией с текстом (запретить выделение или выделение всего текста)
  • Overflow — используется CSS overflow. При переполнении контента задает поведение
  • Position — позиционирование элементов на странице
  • Shadows — различные варианты теней для элементов
  • Sizing — задает 25-кратные размеры элементов в контейнере в процентном соотношении
  • Spacing — отступы (margin и padding), различные варианты
  • Text — все что только может понадобится для операций с текстом, от выравнивания и декорирования до переноса и переполнения
  • Vertical Align — вертикальное выравнивание блоков и таблиц
  • Visibility — управление видимостью элемента

Важное преимущество новой библиотеки, что она больше заточена под работу с препроцессорами Sass, а соответственно это во многом упрощает работу и расширяет границы для адаптивного творчества. Все готовые классы можно изменять с помощью Utility API и добавлять свои.

Вывод. С чего начать?

Начать конечно стоит с самого простого, с системы сеток Bootstrap Grid, затем можно перейти к Utility, поиграться с простыми блоками и текстом, а в дальнейшем перейти к Components, это очень важная часть библиотеки, ведь вам особо не придется возится со стилизацией интерфейса, все уже готово. Любые кнопки, таблицы, да даже модальные окна, все уже здесь. Ну и конечно не забывать пользоваться документацией: https://getbootstrap.com/docs/5.0/getting-started/introduction/

Последние публикации

0 комментариев

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *