Релиз Bootstrap 5 alpha. Что нового.

19 августа 2015 года вышел релиз 4-й версии Bootstrap, но только в 2018 году мир увидел законченную версию. И вот уже в 2020 году, 16 июня разработчики выпустили 5, пока еще альфа-версию Bootstrap 5. Наверняка еще будет масса доработок, которые в том числе коснутся и наименований, и внешнего вида классов, но поклонники этого фреймворка уже могут скачать или установить с помощью npm, Composer или Meteor новую альфа-версию с официального сайта Bootstrap 5.

Что нового в Bootstrap 5 alpha

Список наиболее важных изменений:

1. Отказ от JQuery в пользу Vanilla JavaScript, т.е. классического JS
2. Отключена поддержка браузера Internet Explorer версий 10 и 11
3. Улучшенная система сетки
4. Улучшенная документация фреймворка
5. Использование CSS-переменных
6. Улучшенные формы
7. Пользовательские иконки на основе SVG
8. Новые классы утилит и классы-помощники
9. Возможность создавать темы
10. Новый API утилит

Пробежимся по списку изменений.

1. Отказ от JQuery в пользу Vanilla JavaScript, т.е. классического JS – это уже наметившаяся тенденция в мире разработки, т.к. jQuery уже достаточно давно вытесняется такими библиотеками и фреймворками, как React.js, Vue.js и Angular.js. С одной стороны, это должно облегчить вес Bootstrap 5 при загрузке, с другой – всем разработчикам Landing Page, которые использовали массу jQuery-плагинов для реализации поставленных задач придется задуматься о переходе к классическому JS. Для кого-то это станет плюсом, для кого-то минусом, т.к. придется менять подходы и переучиваться.Список изменений, связанных с JS для Bootstrap  можно найти на GitHub.
2. Отключение поддержки браузера Internet Explorer версий 10 и 11 – тут, в общем-то Bootstrap следует тенденции самой Microsoft, которая также перестала поддерживать IE 10 и младше, т.к. на его долю приходится порядка 1% пользователей в мире.
3. Улучшенная система сетки – в названиях классов произошло только одно изменение – добавился класс xxl (Extra extra large) для разрешений экранов ≥1400px, т.е. для широкоформатных мониторов. Все остальные классы и брейкпойнты, в рамках которых они действуют, остались такими же, что и в версии Bootstrap 4. Все также для построения сетки используется модель Flexbox. Но есть и ряд нововведений, которые связаны с увеличившимся использованием css-переменных.Например, теперь вы сами можете выбрать, какие отступы будут у элементов, указав классы .gx-*. По умолчанию отступы у классов .col- составляют 1.5rem – 20px (по .75rem слева и справа). Но вы можете добавлять классы p-* для управления внутренними отступами колонок, а для класса .row задавать класс gx-*, который позволит рассчитать отрицательные отступы у родительского для колонок классы для компенсации padding в начале и конце ряда.Также появились несколько вариантов класса .container, который имеет ширину в 100% для разных разрешений экранов:
   

   	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	X-Large ≥1200px	XX-Large ≥1400px
   .container	100%	540px	720px	960px	1140px	1320px
   .container-sm	100%	540px	720px	960px	1140px	1320px
   .container-md	100%	100%	720px	960px	1140px	1320px
   .container-lg	100%	100%	100%	960px	1140px	1320px
   .container-xl	100%	100%	100%	100%	1140px	1320px
   .container-xxl	100%	100%	100%	100%	100%	1320px
   .container-fluid	100%	100%	100%	100%	100%	100%

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

4. Улучшенная документация фреймворка – разработчики указывают, что они поработали не только над текстом документации, но и над ее внешним видом. Улучшен интерфейс для различных экранов и навигация.
5. Использование CSS-переменных привело к тому, что новая версия стала гибче в управлении, особенно для тех верстальщиков, кто уже успел оценить их преимущества. Это же привело к отказу от поддержки IE10, т.к. в нем css-переменные не работают. Для начала вы можете использовать стандартный набор цветов Bootstrap-5 или поменять их с помощью переменных. Правда, вам  еще понадобится скомпилировать код SASS.
6. Улучшенные формы – в 5-й версии была пересмотрена документацию по формам и компонентам. Теперь се стили форм объединили в в новый раздел Forms (включая компонент группы ввода) для удобства пользователей.
   Многие классы, которые были в Bootstrap-4 перекочевали в v5 без изменений, поэтому переучиваться особо не придется/ Изменения коснулись чекбоксов и радио – добавилось больше вариантов их стилизации, которые наверняка придутся вам по вкусу и будут применяться на страницах сайтов.
7. Пользовательские иконки на основе SVG  предназначены для работы с компонентами Bootstrap, начиная от элементов форм и заканчивая навигаций. Иконки выполнены в формате SVG, поэтому они быстро и легко масштабируются и могут быть стилизованы с помощью CSS. Хотя они созданы для Bootstrap, они будут работать в любом проекте. Вы можете найти их на отдельном сайте, выбрать нужную и скопировать код в свой проект.
   Иконки можно использовать с разными версиями Bootstrap, необязательно только с 5-й его версией. Кроме того, разработчики абсолютно не настаивают на выборе Bootstrap-иконок. На соответствующей странице документации вы найдете ссылки на популярные Font Awesome, Feather, Google Material icons и другие.
8. Новые классы утилит и классы-помощники, например, связанные с выделением всего текста или с невозможностью его выделения, с pointer-events для ссылок, классы для теней, flex-утилиты, знакомые по Bootstrap-4, утилиты размеров, отображения, отступов и т.п.
9. Возможность создавать темы. Если вы продвинутый разработчик, то можете воспользоваться стартовым проект npm project, чтобы вы создавать свои цветовые темы на основе Bootstrap 5. Он также доступен в репозитории GitHub, так что вы можете использовать его для своих целей.
10. Новый API утилит позволяет создавать свои классы на основе SASS-переменных. Например, вы можете управлять названиями классов с прозрачностью, добавив такие варианты кода:
    Утилиты Bootstrap-5

    Sass

    <br /> $utilities: (<br /> “opacity”: (<br /> property: opacity,<br /> values: (<br /> 0: 0,<br /> 25: .25,<br /> 50: .5,<br /> 100: 1,<br /> )<br /> )<br /> );<br /> //или<br /> $utilities: (<br /> “opacity”: (<br /> property: opacity,<br /> class: o,<br /> values: (<br /> 0: 0,<br /> 25: .25,<br /> 50: .5,<br /> 100: 1,<br /> )<br /> )<br /> );

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

    $utilities: (   “opacity”: (     property: opacity,     values: (       0: 0,       25: .25,       50: .5,       100: 1,     )   ) ); //или $utilities: (   “opacity”: (     property: opacity,     class: o,     values: (       0: 0,       25: .25,       50: .5,       100: 1,     )   ) );

    В результате получатся такие классы:

    Классы на основе использования API утилит

    CSS

    <br /> .opacity-0 {<br /> opacity: 0;<br /> }<br /> .opacity-25 {<br /> opacity: .25;<br /> }<br /> .opacity-75 {<br /> opacity: .75;<br /> }<br /> .opacity-100 {<br /> opacity: 1;<br /> }<br /> /* или */<br /> .o-0 {<br /> opacity: 0;<br /> }<br /> .o-25 {<br /> opacity: .25;<br /> }<br /> .o-75 {<br /> opacity: .75;<br /> }<br /> .o-100 {<br /> opacity: 1;<br /> }

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

    .opacity-0 {   opacity: 0; } .opacity-25 {   opacity: .25; } .opacity-75 {   opacity: .75; } .opacity-100 {   opacity: 1; } /* или  */ .o-0 {   opacity: 0; } .o-25 {   opacity: .25; } .o-75 {   opacity: .75; } .o-100 {   opacity: 1; }

Команда Bootstrap 5 понимает, что есть еще много работы в v5, включая некоторые серьезные изменения, но они продолжают работать и обещают выпустить еще одну альфу в течение 3-4 недель, а потоми, возможно, еще пару. В релизе v4.5.1 они планируют сократить  разрыв между v4 и v5.

CSS Grid в Bootstrap версии 5.1.1

В Bootstrap версии 5.1.1 появились классы, позволяющие строить сетку с помощью модели CSS Grid. Для замены класса .row в этом случае используем класс .grid, а классы типа .col-4, .col-md-4 и др. заменяются на классы .g-col-4, .g-col-md-4 , .g-col-lg-4 и т.п. В итоге получаем такую разметку:

Вы также можете использовать классы для смещения, например .g-start-2:

Также в документации вы найдете, как сделать отступы между элементами или добавить строки.