Назад к Все интересное в мире рекламы
Bootstrap 5

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.

Версия 5: Чего нам ожидать?

Официальная доска отслеживания проектов 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
  • Изменение единицы измерения ширины желоба
  • Удаленные колоды
  • Оптимизация Navbar
  • Библиотека пользовательских иконок SVG
  • Переход от Джекилла к Хьюго
  • Обновления класса

jQuery удален

Bootstrap 5: что нового в этом?

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

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

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

Читайте также:  Стратегическое руководство по корпоративному контент-маркетингу

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

Переключиться на Vanilla JavaScript

Bootstrap JavaScript

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

Создавайте сайты с нашими онлайн-строителями

С помощью Startup App и Slides App вы можете создавать неограниченное количество веб-сайтов с помощью онлайн-редактора веб-сайтов, который включает готовые разработанные и закодированные элементы, шаблоны и темы.

Удаление поддержки jQuery в Bootstrap 5 позволяет писать эффективный ванильный код 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, следующий миксин добьется цели:

1
2
3
.hero-title {
  @include font-size(4rem);
}

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

1
2
3
4
5
6
7
8
.hero-title {
  font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
  .hero-title {
            font-size: 4rem;
  }
}

Отказаться от поддержки 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-свойств, что ограничивает ваш потенциал для современного веб-дизайна.

Читайте также:  27 логотипов со скрытыми значениями, которые заставят Вас посмотреть дважды

В 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 пикселей).

Удалить колоды карт

Bootstrap Удалить карточные колоды

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

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
26
<div class=”card-deck”>
   <div class=”card”>
      <img class=”card-img-top” src=”…” alt=”Card image cap”>
      <div class=”card-body”>
         <h5 class=”card-title”>Card title</h5>
         <p class=”card-text”>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
         <p class=”card-text”><small class=”text-muted”>Last updated 3 mins ago</small></p>
      </div>
   </div>
   <div class=”card”>
      <img class=”card-img-top” src=”…” alt=”Card image cap”>
      <div class=”card-body”>
         <h5 class=”card-title”>Card title</h5>
         <p class=”card-text”>This card has supporting text below as a natural lead-in to additional content.</p>
         <p class=”card-text”><small class=”text-muted”>Last updated 3 mins ago</small></p>
      </div>
   </div>
   <div class=”card”>
      <img class=”card-img-top” src=”…” alt=”Card image cap”>
      <div class=”card-body”>
         <h5 class=”card-title”>Card title</h5>
         <p class=”card-text”>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
         <p class=”card-text”><small class=”text-muted”>Last updated 3 mins ago</small></p>
      </div>
   </div>
</div>

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

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

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

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

Читайте также:  5 шагов к созданию фирменного стиля

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

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

Bootstrap Custom SVG Библиотека иконок

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

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

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

Переход от Джекилла к Хьюго

Переход от Джекилла к Хьюго

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

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

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

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

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

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

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

  • Форма-строка
  • форм-рядный
  • Список-рядный
  • колода карт

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

  • Классы gx- * управляют горизонтальной шириной / шириной желоба колонны
  • GY- * классы контролируют ширину вертикального / рядного желоба
  • Классы g- * контролируют горизонтальную и вертикальную ширину желоба
  • рядные-смещ_по_столбцы-авто

Вывод

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

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

Ваш помощник в в бизнесе рекламно-полиграфическая компания “АЗБУКА

(050) 462-02-45

Поделиться этой записью

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

Назад к Все интересное в мире рекламы