Bootstrap 5 что нового и дата выходаBootstrap, самая популярная интерфейсная инфраструктура, созданная для разработки современных, адаптивных и динамических интерфейсов для профессиональных веб-страниц, в настоящее время осуществляет серьезное обновление до Bootstrap 5. Bootstrap — это бесплатная коллекция с открытым исходным кодом кода CSS и JavaScript / jQuery, используемая для создания сайтов с динамическим макетом и веб-приложений. Являясь инструментом для создания внешнего интерфейса, он состоит из серии шаблонов дизайна на основе HTML и CSS для различных компонентов.

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

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

Bootstrap 4 в настоящее время имеет версию 4.4.1, которая теперь имеет много жизненно важных функций, таких как карты, flexbox, интеграция с Sass и мощные плагины, построенные на jQuery. После более чем 4-летнего прогресса с момента выхода альфа-версии Bootstrap 4 19 августа 2015 года; в фоновом режиме разрабатывается обновление для версии 5.

В этой статье мы рассмотрим основные обновления Bootstrap 5, включая дату выпуска, интеграцию и модификацию.

Bootstrap версии 5.0: чего нам ожидать?

Официальная доска отслеживания проектов Bootstrap 5 на Github содержит более 765 задач, более 83 запросов на получение и 311 проблем. Если мы сопоставим дату выпуска с предыдущего периода разработки (Bootstrap 4 до Bootstrap 4.1), команде разработчиков потребовалось около 3 месяцев, чтобы завершить Bootstrap 4.1 до Bootstrap 4.2 — около 8 месяцев. Мы можем ожидать Bootstrap 5 в первой половине 2020 года . Bootstrap еще не подтвердил официальную дату релиза.

Оглядываясь назад, есть список изменений, которые мы ожидаем от версии 5, такие как удаление jQuery, что является основным подъемом для этой версии, и прекращение поддержки Internet Explorer 10 и 11.

Ниже приведены некоторые из ожидаемых изменений в Bootstrap 5:

  • JQuery был удален;
  • Переключиться на Vanilla JavaScript;
  • Адаптивные размеры шрифтов;
  • Отключите поддержку Internet Explorer 10 и 11;
  • Изменение единицы измерения ширины;
  • Удаленные Card Decks;
  • Оптимизация Navbar;
  • Библиотека пользовательских иконок SVG;
  • Переход от Jekyll к Hugo;
  • Обновления класса.

Удаление jQuery

Удаление jQuery Bootstrap

jQuery — это библиотека, которая предлагает обширные функции для классических веб-сценариев, который эффективен практически при любых требованиях веб-разработки. Его расширяемая основа позволяет получать доступ к элементам в документе без написания большого количества JavaScript, изменять внешний вид вашего контента на веб-странице, который используют разработчики для преодоления разрыва во всех браузерах, изменять содержимое документа, реагировать на взаимодействие с пользователем, получение информации с сервера без обновления страницы с помощью AJAX, добавление анимации на веб-страницу, упрощение общих задач JavaScript и список можно продолжить.

Хотя Bootstrap использует jQuery уже более 8 лет, jQuery стал довольно большой и раздутой средой, требующей от веб-сайтов, использующих ее, загрузки и добавления тривиального времени загрузки для библиотеки, которая не может использоваться никаким другим плагином, кроме самого Bootstrap.

Поскольку в настоящее время фреймворки JavaScript, такие как Angular, Vue и React, доминируют в сообществе веб-разработчиков, jQuery теряет свою популярность, поскольку большинство этих современных фреймворков работают через виртуальный DOM, а не непосредственно на DOM, что приводит к гораздо более высокой производительности.

В дальнейшем любые функции запросов jQuery должны выполняться с помощью чистого или Vanilla JavaScript в Bootstrap 5, который поможет с размером файла или весом фреймворка.

Переключаемся на Vanilla JavaScript

Переключаемся на Vanilla JavaScript

Большинство современных веб-сайтов работают на JavaScript, и все современные веб-браузеры на настольных компьютерах, консолях, планшетах, играх и мобильных телефонах содержат интерпретаторы JavaScript, что делает JavaScript наиболее универсальным языком программирования в мире.

Удаление поддержки jQuery в Bootstrap 5 позволяет писать эффективный Vanilla JavaScript, не беспокоясь о размере или добавляя любые другие несущественные функции. Хотя jQuery существует уже долгое время, совершенно невозможно использовать один только jQuery, потому что в основном jQuery добавляет объект $ глобальную область с большим количеством функций. Еще более удобные библиотеки, такие как prototype, не являются альтернативой JavaScript, а существуют только как дополнительные инструменты для решения типичных проблем.

Если вы знаете, как работает JavaScript, это серьезное изменение не сильно повлияет на вас, но для некоторых разработчиков, которые знают только, как использовать jQuery, это может быть хорошим шансом выучить язык.

Адаптивные размеры шрифтов

Адаптивные шрифты Bootstrap

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

Bootstrap 5 по умолчанию включит адаптивные размеры шрифта, что автоматически изменит размер элемента оформления в соответствии с размером окна просмотра пользователя с помощью движка RFS или Responsive Font Sizes.

Согласно репозиторию RFS , RFS — это механизм изменения размеров, который изначально был разработан для изменения размера шрифта. RFS предлагает возможность изменять практически любое значение для любого свойства CSS с помощью таких единиц, как margin, padding, border-radius или box-shadow.

Это механизм на основе препроцессора или постпроцессора, который автоматически вычисляет соответствующие значения размера шрифта на основе размера экрана пользователя или области просмотра. Он работает на известных препроцессорах или постпроцессорных инструментах, таких как Sass, Less, Stylus или PostCSS.

Например, предположим, что у вас есть класс title-hero, который является классом для вашего элемента тега h1, который вы хотите использовать для основного заголовка в разделе hero. Используя SASS, следующий миксин добьется цели:

Это будет скомпилировано в это:

Отказаться от поддержки Internet Explorer 10 и 11

Отказаться от поддержки Internet Explorer 10 и 11

В 1995 году Microsoft выпустила Internet Explorer, который поразил воображение всех, потому что впервые появился браузер, поддерживающий апплеты CSS и Java, что сделало его одним из наиболее широко используемых веб-браузеров в 2003 году с долей использования 95%.

Переносясь вперед к 2020 году, Internet Explorer больше не относится к Chrome, Firefox и Edge. Фактически, это стало одним из кошмаров веб-дизайнера, так как он не поддерживает современные стандарты JavaScript. Чтобы работать с Internet Explorer, будь то 10 или 11, коды JavaScript должны быть скомпилированы в ES5 вместо ES6, что увеличивает размер ваших проектов до 30%. Это, очевидно, ограничивает вашу способность использовать функции ES6 или более новые стандарты JavaScript. Еще хуже то, что он не поддерживает множество современных CSS-свойств, что ограничивает ваш потенциал для современного веб-дизайна.

В Bootstrap 5 команда Bootstrap решила отказаться от поддержки Internet Explorer 10 и 11, что является довольно хорошим ходом, поскольку позволит веб-дизайнерам и разработчикам больше сосредоточиться на разработке современных веб-страниц, не беспокоясь о том, чтобы сломать какой-либо фрагмент кода на старые браузеры или увеличение размера каждого проекта.

Изменяя единицу измерения ширины 

Изменяя единицу измерения ширины 

CSS предлагает способы задания размеров или длинны элементов с использованием различных единиц измерения, таких как px, em, rem,% vw и vh. Хотя пиксели считаются широко известными и используются в абсолютных единицах, относительно DPI и разрешения устройства просмотра, они не меняются в зависимости от других элементов, которые не подходят для современного адаптивного веб-дизайна.

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

Rem обозначает «root em», что означает равное вычисленному значению font-size для корневого элемента. Например, 1 rem равен размеру шрифта HTML-элемента (большинство браузеров имеют значение по умолчанию 16 пикселей).

Удаленные Card Decks

Удаленные Card Decks

В Bootstrap 4 для того, чтобы вы могли устанавливать одинаковые Card Decks ширины и высоты, которые не привязаны друг к другу, вам необходимо использовать следующий код:

В Bootstrap 5 команда Bootstrap удалила Card Decks, так как новая система сетки предлагает более гибкий контроль. Следовательно, удаление ненужных дополнительных классов, которые могут быть решены с помощью сетки.

Оптимизация Navbar

Оптимизация Navbar

Компонент Bootstrap navbar является основной частью Bootstrap, которая используется постоянно. В предыдущих версиях Bootstrap вам нужно было создать приличный массив разметки, чтобы она работала. Однако в Bootstrap 4 они упростили это за счет использования HTML-элемента nav или div и неупорядоченного списка. Класс navbar — это класс по умолчанию, который всегда должен присутствовать в компоненте.

По умолчанию Bootstrap 4 использует встроенный блок в своей опции отображения, но в Bootstrap 5 он был удален. Они также использовали сокращенную запись flex и убрали марку бренда, вызванную необходимостью использования контейнеров в навигационных панелях. Помимо этого, они также реализовали темный раскрывающийся список через класс dropdown-menu-dark, который превращает раскрывающийся список в черный фон, который мы обычно видим на выпадающих элементах панели навигации.

Библиотека пользовательских иконок SVG

Библиотека пользовательских иконок SVG

В версии 3 Bootstrap имеется 250 многократно используемых компонентов значков в формате шрифта под названием «Glyphicons»,созданных для предоставлениязначковгруппам ввода, оповещениям, раскрывающимся спискам и другим полезным компонентам Bootstrap.

Тем не менее, в Bootstrap 4 он был полностью удален, и веб-дизайнеры и разработчики должны полагаться на бесплатные шрифты иконок, такие как Font Awesome, или использовать свои собственные значки SVG, чтобы повысить ценность своего веб-дизайна.

В Bootstrap 5 есть новая библиотека иконок SVG, тщательно созданная Марком Отто , соучредителем Bootstrap. Перед официальным выпуском Bootstrap 5 эти значки теперь можно добавлять и использовать в вашем проекте в данный момент. Вы можете посетить эту страницу, чтобы узнать больше.

Переход от Jekyll к Hugo

Переход от Jekyll к Hugo

Jekyll— это бесплатный статический генератор сайтов с открытым исходным кодом . Если вы знаете, как работает WordPress, Joomla или Drupal, то, вероятно, у вас есть представление о том, как это работает. Jekyll используется для создания веб-сайтов с простой в использовании навигацией, компонентами веб-сайтов и генерирует весь контент одновременно. Jekyll в основном предоставляет шаблоны страниц, такие как навигация и нижние колонтитулы, которые будут отражаться на всех ваших веб-страницах. Эти шаблоны объединяются с другими файлами с определенной информацией (например, файлом для каждого сообщения в блоге на вашем веб-сайте) для создания полных HTML-страниц для просмотра пользователями сайта.

Bootstrap 4 был отличным инструментом для интеграции с Jekyll через SASS, но в Bootstrap 5 ожидается серьезное переключение с Jekyll на Hugo.

Hugoописывается как «Быстрый и гибкий генератор статических сайтов, созданный с любовью spf13 в GoLang». Подобно Jekyll, это генератор статических сайтов, но написанный на языке Go. Возможная причина переключения заключается в том, что Hugo молниеносен, прост в использовании и настраивается. По сравнению с Jekyll, он отлично интегрируется с популярным веб-хостингом и может организовать ваш контент с любой структурой URL.

Обновления класса

Обновления класса Bootstrap

Конечно, Bootstrap 5 не будет интересен без нового CSS-класса Bootstrap. Bootstrap 4 имеет более 1500 CSS-классов. Будет несколько классов CSS, которые больше не будут доступны в новой версии, и некоторые классы CSS, которые будут добавлены.

Некоторые из классов CSS, которые уже удалены, согласно официальной платформе отслеживания проекта Github Bootstrap 5:

  • form-row;
  • form-inline;
  • list-inline;
  • card-deck.

Вот несколько новых CSS-классов Bootstrap 5:

  • Классы gx- * управляют горизонтальной шириной / шириной колонки;
  • GY- * классы контролируют ширину горизонтали или вертикали колонки;
  • Классы g- * контролируют горизонтальную и вертикальную ширину ;
  • row-cols-auto.

Вывод

Один из разочаровывающих опытов разработчика — это переосмысление базового HTML, CSS и JavaScript для каждого проекта. Хотя некоторые предпочитают писать свой собственный код, все же имеет смысл просто использовать существующий фреймворк, такой как Bootstrap.

Со всеми новыми обновлениями, появившимися в Bootstrap 5, можно с уверенностью сказать, что команда Bootstrap делает огромные шаги, чтобы сделать фреймворк легким, простым, полезным и быстрым в интересах разработчика.