IT-инфраструктура для бизнеса и творчества
Разработка
Selectel

Вышел Bootstrap 5: оцениваем главные нововведения

Bootstrap — самый популярный в мире CSS-фреймворк с открытым исходным кодом, который разработан командой Twitter. В его новую пятую версию внесено сразу несколько критически важных изменений. Подробности — в материале Selectel.

До выпуска Bootstrap 5 прошло несколько несколько альфа- и бета-версий. В итоге новая версия претерпела серьезные изменения, включая отказ от поддержки Internet Explorer (IE) и зависимости jQuery. Подробнее о главных нововведениях.

1. Отказ от jQuery

Больше Bootstrap не поддерживает библиотеку jQuery. Вместо этого команда разработчиков улучшила поддержку библиотеки JavaScript.

В целом, зависимость от jQuery не была в Bootstrap чем-то плохим. Наоборот, появление jQuery радикально изменило способ использования JavaScript. Это упростило написание задач на JavaScript, которые в противном случае требовали бы много строк кода.

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

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

2. Настраиваемые свойства CSS

От Internet Explorer отказались, а значит, теперь разработчики могут использовать настраиваемые свойства CSS, как хотят и когда хотят. Проблема IE была в том, что он не поддерживает кастомные CSS.

Соответственно, CSS custom properties делают CSS более гибким и программируемым. Для того, чтобы предотвратить появление конфликтов со сторонними CSS, используется префикс -bs.

Всего доступно два типа переменных: корневые и компонентные. Что касается первого класса, то доступ к ним можно получить везде, где загружен Bootstrap CSS. Эти переменные находятся в файле root.scss и являются частью скомпилированных файлов dist. Что касается второго класса, то эти переменные локальны в отдельных компонентах. Они помогают избежать случайного наследования стилей в таких компонентах, как вложенные таблицы.

Для масштабных проектов.

Selectel

3. Улучшенная система сеток (Grid)

Поскольку при переходе с 3 на 4 версию возникли некоторые проблемы, v5 сохраняет большую часть системы сеток, а не обновляет ее полностью. Вот некоторые изменения:

  • Вместо gutter ввели новые классы g* для указания отступов между ячейками.
  • Также были включены классы вертикального интервала.
  • У столбцов больше нет дефолтного значения position: relative.

4. Улучшенная документация

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

Разработчики добавили больше гибкости в настройку тем, чтобы сайты не были похожими друг на друга. Тему четвертой версии доработали, добавили контент и фрагменты кода для разработки поверх Sass (популярный препроцессор CSS). Пример стартового npm-проекта можно найти на Github.

Расширена и цветовая палитра, пользоваться которой теперь проще. Проделана дополнительная работа по улучшению цветового контраста.

5. Управление формой

Разработчики улучшили элементы управления формой, input groups и прочие компоненты.

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

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

6. Добавление API-утилит

Здесь разработчики Bootstrap не оригинальны, библиотеки утилит ранее добавили, например, создатели CSS-библиотеки Tailwind CSS.

Команда Bootstrap добавила возможность использования утилит еще в 4 версии, там это было организовано с использованием глобальных классов $ enable- *. В новой версии разработчики решили перейти на API, новый язык и синтаксис в Sass. Все это дает возможность создавать собственные утилиты, сохраняя при этом возможность удалять и или изменять дефолтные.

Для улучшения организации процесса работы некоторые утилиты из версии 4 переместили в раздел Helpers.

7. Новая библиотека иконок

Еще одно приятное нововведение — добавление открытой библиотеки иконок, в которой содержится более 1300 элементов. Поскольку библиотека открыта, пользователи могут модифицировать иконки по своему вкусу.

Поскольку это изображения SVG, их можно быстро масштабировать и модифицировать, а также стилизовать с помощью CSS.

Установить иконки можно при помощи npm:

$ npm i bootstrap-icons

Кое-что еще

Кроме указанных нововведений, команда представила еще несколько:

  • Новый логотип. Иронизируя над этим достижением, сами разработчики поместили новинку на первое место в списке.
  • Новый компонент offcanvas. Он поставляется с настраиваемым фоном, body scroll и размещением. Компоненты offcanvas можно разместить с разных сторон от viewport. Настраиваются параметры посредством атрибутов данных или API JavaScript.
  • .accordion, основанный на. card, заменили реализацией. accordion без. card. Новинка все же использует плагин Collapse JavaScript, но с кастомными HTML и CSS.

Загрузить Bootstrap 5 можно с официальной странички фреймворка.

Не пропускайте последние новости из мира IT, подписывайтесь на блог Selectel.

(function () { let cdnUrl = `https://specialsf378ef5-a.akamaihd.net/SelectelBranding/images/` let previousArticleNumber = null let currentArticleNumber = 0 let platform = 'Desktop' let articles = [ { name: 'camera', url: `${cdnUrl}CameraCat`, text: 'умную камеру для\u00A0наблюдения за\u00A0котиками', link: 'https://vc.ru/selectel/306690', num: 3 }, { name: 'chill', url: `${cdnUrl}ChillCat`, text: 'трекер, который подскажет, когда пора отдохнуть', link: 'https://vc.ru/promo/288561-eye-tracker', num: 1 }, { name: 'cloud', url: `${cdnUrl}CloudCat`, text: 'котика: даёшь ему «пять», а\u00A0он делает бэкап в облако', link: 'https://vc.ru/dev/294799-maneki-neko', num: 2 } ] let buttonCycle = document.querySelector('.button--cycle') let buttonChoose = document.querySelector('.button--choose') let buttonMobile = document.querySelector('.button--mobile') let textField = document.querySelector('.selectel-footer-subtitle') let imageAgent = document.querySelector('.image--agent') let banner = document.querySelector('.selectel-footer') buttonCycle.addEventListener('click', cycleClick) buttonChoose.addEventListener('click', () => sendEvent(`Promo ${articles[currentArticleNumber].num} Left`, 'Click')) buttonMobile.addEventListener('click', () => sendEvent(`Promo ${articles[currentArticleNumber].num} Left`, 'Click')) let media = window.matchMedia("(max-width: 570px)") media.addEventListener('change', matchMedia) function matchMedia() { if (media.matches) { platform = 'Mobile' } else { platform = 'Desktop' } update() } matchMedia() function cycleClick(event) { sendEvent(`Promo ${articles[currentArticleNumber].num} Right`, 'Click') if (event) { event.preventDefault() event.stopPropagation() } window.open('https://vc.ru/tag/selectelDIY', '_blank') //cycle(event) } function cycle(event) { // incrementArticleNumber() textField.innerHTML = generatedText() imageAgent.src = articles[currentArticleNumber].url + platform + '.svg?3' imageAgent.setAttribute("class", "") imageAgent.classList.add('image--agent', articles[currentArticleNumber].name) banner.href = articles[currentArticleNumber].link } function update() { banner.href = articles[currentArticleNumber].link imageAgent.src = articles[currentArticleNumber].url + platform + '.svg' textField.innerHTML = generatedText() } function incrementArticleNumber() { previousArticleNumber = currentArticleNumber if (currentArticleNumber >= articles.length - 1) { currentArticleNumber = 0 } else { currentArticleNumber++ } } const sendEvent = (label, action = 'Click') => { const value = `SelectelDIY — loc: Footer — ${label} — ${action}`; if (window.dataLayer !== undefined) { window.dataLayer.push({ event: 'data_event', data_description: value, }); } }; function generatedText() { let defaultText if (platform === 'Desktop') { defaultText = `Мы тут собрали %text%. Хотите научим?` } else { defaultText = `Мы тут собрали %text%.` } return defaultText.replace('%text%', articles[currentArticleNumber].text) } function getRandom(min, max) { min = Math.ceil(min) max = Math.floor(max) return Math.floor(Math.random() * (max - min + 1)) + min } (function create() { currentArticleNumber = getRandom(0, articles.length - 1) cycle() let page = document.querySelector('.page--entry') if (page) { function insertAfter() { let parents = page.querySelectorAll('[data-id="7"]') let referenceNode = parents[0] referenceNode.parentNode.insertBefore(banner, referenceNode.nextSibling); loaded() } setTimeout(() => insertAfter(), 0) } }()) function loaded() { banner.classList.add('loaded') } loadImages([ `${cdnUrl}CameraCatDesktop.svg`, `${cdnUrl}ChillCatDesktop.svg`, `${cdnUrl}CloudCatDesktop.svg`, `${cdnUrl}CameraCatMobile.svg`, `${cdnUrl}ChillCatMobile.svg`, `${cdnUrl}CloudCatMobile.svg?3`, ]) function loadImages(urls) { return Promise.all(urls.map(function (url) { return new Promise(function (resolve) { var img = document.createElement('img'); img.onload = resolve; img.onerror = resolve; img.src = url; }); })); } }())
0
12 комментариев
Популярные
По порядку
Написать комментарий...
Alexander VamShop

Кто интересно пишет эти тексты, вообще ведь не в курсе, о чём пишут, для чего пишут, прям в самом начале "...команда разработчиков улучшила поддержку библиотеки JavaScript" и по тексту аналогичных пассажей немало

Ответить
7
Развернуть ветку
ЯжПрограммист

Вы наверное не знали но фреймвок vanilla js сейчас снова начинает набирать популярность http://vanilla-js.com/ 🤣

Ответить
3
Развернуть ветку
J S

Этот фреймворк на lynx не работает

Ответить
0
Развернуть ветку
Михаил Бакаев

Добрый день
На той неделе писали терминал на вм ubuntu. Все пашет

Ответить
0
Развернуть ветку
Антон Чуфаровский

Вспомнил статью студентов с Трибуны, которые за 1800 рублей купили, цитирую, «протокол HTTPS».

Ответить
1
Развернуть ветку
maguto dev

Что значит "команда разработчиков улучшила поддержку библиотеки JavaScript"??
Какой библиотеки??

Ответить
3
Развернуть ветку
ЯжПрограммист

JavaScript же

Ответить
2
Развернуть ветку
maguto dev

Я всю жизнь думал что java script - это язык программирования, оказывается нет))

Ответить
0
Развернуть ветку
ИгорьOK

Век живи - век учись!

Ответить
0
Развернуть ветку
Влажный инструмент

Комментарий удален по просьбе пользователя

Ответить
1
Развернуть ветку
Alex Babak

Новые версии — это замечательно, выглядит отлично.
 
Жаль, только, большое количество плагинов к bootstrap ещё не были адаптированы даже под версию 4.

Ответить
0
Развернуть ветку
Читать все 12 комментариев
«Купи сейчас, плати потом»: новая классика или мимолетная мода

Сервис рассрочек рассказывает о новом финтех-тренде.

«Яндекс» представил «Станцию» второго поколения с новым дизайном и улучшенным звуком Статьи редакции

Колонка поступит в продажу в первой половине 2022 года.

Как сделать работу компаний и фрилансеров удобной

С помощью сервиса «Рокет Ворк».

Потерять канал в телеграме и заодно репутацию? Это легче, чем вы думаете

Всем привет! Меня зовут Альберт Базалеев, я эксперт в сфере информационной безопасности бизнеса. Одно из моих направлений — проект Варежка, это софт, который защищает telegram-каналы и корпоративные telegram-аккаунты от злоумышленников. Сегодня расскажу, какие «дырки» есть в telegram-каналах (которые так любят пиарить здесь на vc.ru) и к чему…

Новый дизайн «Секрета фирмы» учтёт пользовательские сценарии потребления и поиска контента

О трендах бизнеса и экономики можно прочесть коротко и ясно в удобных форматах

Ozon и AliExpress начали задерживать доставку товаров на несколько дней Статьи редакции

Оператор доставки для маркетплейсов объяснил задержки загруженностью дорог в Сибири и на Дальнем Востоке и высоким спросом накануне праздников.

«Яндекс» научил «Алису» генерировать сказки при помощи нейросети Статьи редакции

И научил разговаривать шёпотом.

Увлечение самолётами, которое переросло в бизнес

Предприниматель из Волгограда производит и продаёт по всему миру симуляторы дополненной реальности.

Лидерские качества. 30 полезных материалов для их развития

Наверняка вы не раз слышали фразу: «Саша — прирожденный лидер». Но разве лидерство «дается» с рождения? Конечно, нет. Как и многие навыки и soft skills, лидерские качества можно в себе развить. В этой статье я расскажу, с чего начать путь к лидерству, а еще поделюсь полезными материалами.

Его отверг Y Combinator, но признали миллионы пользователей: как работает и зарабатывает криптокошелёк MetaMask Статьи редакции

Сервис приносит материнской фирме ConsenSys сотни миллионов выручки в год, рентабельность составляет почти 100%, а используют его более 20 млн человек. Кто создал кошелёк, с кем он конкурирует и за что его критикуют — в разборе The Generalist.

Презентация MetaMask
Мощные сервисы для быстрого машинного обучения: от GPU SuperCloud до суперкомпьютера

В последние три года мы видим рост спроса на технологии искусственного интеллекта (ИИ) и машинного обучения. Они проникли практически во все сферы нашей жизни, начиная от различных колл-центров и городских систем видеонаблюдения, заканчивая системами медицинского скрининга и диагностики заболеваний. Даже для оплаты проезда в столичной подземке…

null