Сучасна диджитал-освіта для дітей — безоплатне заняття в GoITeens ×
Mazda CX 5
×

Вийшов Bootstrap 5. Що нового у версії

Bootstrap порадували новиною — після трьох альфа-версій, трьох бета-версій та декількох місяців напруженої роботи вони запустили перший стабільний випуск оновленого Bootstrap 5. Це перше масштабне оновлення фреймворку з 2014 року.

Головні нововведення

Новий логотип

Команда називає оновлення логотипу — однією з найбільших змін 😅 Він відсилає нас до фігурних дужок CSS та старого логотипу B.
«Ми відчуваємо, що це оновлення допомагає задати тон для всього випуску. Все той же Bootstrap, але трошки допрацьований» — пишуть вони у блозі.

Новий компонент offcanvas

Offcanvas поставляється з фоном, який можна налаштувати, body scroll та розміщенням. Компоненти offcanvas можна розмістити зверху, справа, знизу або зліва від області перегляду та можна налаштувати за допомогою атрибутів даних або API JavaScript.

Заміна компонента .card на .accordion

Новий компонент все ще використовує плагін Collapse JavaScript, але з кастомним HTML й CSS. Він містить Bootstrap Icons в якості іконки індикації стану. Flush accordion (додайте .accordion-flush) дає можливість вимкнути зовнішні кордони, що спрощує розміщення батьківських елементів в середині.

Нові та оновлені форми

Команда фреймворку повністю переробила документацію по формах та компонентах та об’єднала усі стилі форм у новий розділ «Форми». Також перепрацювала ти видалила усі елементи управління формами. У 4-й версії був великий набір елементів управління формою, але вони були додатками у браузері до налаштувань за замовчуванням. У 5-й версії вони повністю індивідуальні.

Що ще?

  • повністю видалили jQuery
  • з’явилася підтримка RTL
  • новий file input «відмовився» від JavaScript та тепер працює на чистому CSS
  • нові утиліти API

Та багато іншого. Читайте усі подробиці оновлення в офіційному блозі Bootstrap.

👍ПодобаєтьсяСподобалось7
До обраногоВ обраному0
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Перевёл свой pet-проект github.com/schwarzlichtbezirk/hms под bootstrap5, всё довольно клёво, так что напишу небольшой гайд по переходу. Вообще breaking changes там хватает, и придётся править всю вёрстку и частично css, но сразу скажу — особо не пугайтесь этого. Когда я заменил загрузку bootstrap4 на 5-ю версию, и глянул на список с пометками «breaking», я ожидал, что вместо приложения я увижу пустой экран и консоль всю красную от ошибок. Но ничего этого не произошло, на экране появился привычный интерфейс, и ни одной ошибки в консоли. Правда, ничего не работало, и вёрстка была сбита. Но всё по-порядку.

1) Первым делом запустите копию приложения со старым Бутстрапом. Я лично это сделал чисто на фронтэнде, и старая версия и новая — сидели на одном и том же бэкэнде. Это вам понадобится, чтоб смотреть как раньше было.

2) Просто замените «data-toggle» на «data-bs-toggle», и «data-target» на «data-bs-target», тогда у вас сразу снова заработают менюшки, диалоги, и всякая фигня.

3) Откройте эту ссылку getbootstrap.com/docs/5.0/migration и дальше методично пройдитесь по каждому пункту там. Чаще всего там надо просто заменить одно название на другое, но кое-что там вообще убрали, например класс «pre-scrollable», поэтому надо кое-где править css у себя в коде, или менять вёрстку.

4) В новой версии поубирали дефолтные отступы во многих местах, и в принципе это правильно, поскольку всё равно для лаптопа и мелкого экрана отступы практически везде ставятся свои. Поэтому надо расставить в вёрстке что-нибудь наподобие «px-1 px-sm-2», и аналогично с внешними отступами.

5) Старые компоненты все работают, так что всё ок. И старый аккардион, построенный на кардах — тоже работает. Но в диалогах опять-таки надо править вёрстку.

Ну в принципе, это всё, каких-то особых подводных камней при переходе с 4-го на 5-й бутстрап — нет, неожиданных изменений в поведении UI — тоже нет, так что всё классно.

Дякую. Він обратно сумісний з Bootstrap 4?

А колись був бс, який був таким?

І це взагалі залежить як і наскільки неправильно ви його використовували

Когда начинал использовать bootstrap, выбросил именно потому что там была жесткая завязка на jQuery. Сейчас судя по всему можно попробовать еще раз.

Пожалуйся начальству, что сайт ипама написан на jquery c плагинами.

жесткая завязка на jQuery

У цсс фрейма зав’язка та ще жорстка?
WUT

Скажите там эволюция по сравнению с 4 или опять революция?

Пока что раздают в beta3, но всё же! Очень круто, что в Бутстрап добавили offcanvas! Раньше приходилось пользоваться либой github.com/Mango/slideout для этого, теперь можно избавиться от левых зависимостей. И хорошо, что наконец исключили jQuery, устаревший на сегодняшний день. Раньше его тянули исключительно ради Бутстрапа, в то время как остальной код юзает нормальный фреймвёрк.

Раньше его тянули исключительно ради Бутстрапа

xD
Yeah
Ofc

А какой нормальный фреемверк юзают вместо джейквери?

Поржал с первых же строчек FadeIn/FadeOut :)

Ну сделали элемент прозрачным opacity:0. А display:none ему кто будет делать с таймаутом равным transition? Или мы будем клиенту объяснять, что сюда клацать нельзя, там висит менюшка. Ее не видно но она там есть, как суслик из ДМБ.

А как в CSS привесить JS функцию по окончанию анимации?

Таким образом одна команда jQuery превращается в 50-100 строк говнокода на JS и CSS. И это мы только плавное скрытие менюшки прикрутили.

Я уже молчу про тягание в каждый проект самописной либы для работы AJAX 🤦‍♂️

FadeIn/FadeOut

stackoverflow.com/...​-the-css-display-property

самописной либы для работы AJAX

Ви так часто працюєте с ie6?

А какой нормальный фреемверк юзают вместо джейквери?

Когда речь заходит о нормальном фреймвёрке, конечно же подразумевается Vue.js.

конечно не стоило бы сравнивать. о vue возможно через несколько лет никто и не вспомнит, а jquery и через 10 лет будет использоваться в 70% веб-сайтов.

а jquery и через 10 лет будет использоваться в 70% веб-сайтов

И почему тогда отвинтили такой нужный jquery от Бутстрапа?

Пусть еще отвинтят от хуллиарда плагинов на бутстрапе. Удачи, че.
А вообще берешь любой сайт написанный на react/vue/angular и в 80% случаев там же будет и jquery. Как бы там все эти любители всего «нового и современного» не кукарекали.

берешь любой сайт написанный на react/vue/angular и в 80% случаев там же будет и jquery.

Так напишите авторам, чтоб запилили обратно, поскольку 80% продолжают дальше говнокодить с jquery, несмотря на то, что у них уже давно на проектах react или vue, и надо чтоб всё оставалось покрыто равномерным слоем jquery по всем библиотекам и плагинам.

Как бы там все эти любители всего «нового и современного» не кукарекали.

они обычно не в курсе, что jQuery — это огромная экосистема плагинов под него.
и хотя теоретически для react/vue/angular есть уже аналоги, но если нет на проекете react/vue/angular — то точно незачем изобретать велосипед, а проще, быстрее и надежней реализовать хитрый UI функционал несколькими готовыми jQuery плагинами, с кучей звезд на гитхабе.

Підписатись на коментарі