angle-uparrow-clockwisearrow-counterclockwisearrow-down-uparrow-leftatcalendarcard-listchatcheckenvelopefolderhouseinfo-circlepencilpeoplepersonperson-fillperson-plusphoneplusquestion-circlesearchtagtrashx

Переход с Bootstrap 4 на Bootstrap 5

В декабре 2020 года был выпущен Bootstrap 5 Beta 1 . Ознакомившись со всеми изменениями и дополнениями, можно лишь сделать вывод, что это еще один большой шаг вперед.

17 января 2021
post main image
https://unsplash.com/@davidboca

В настоящее время сайты используют большое количество CSS и Javascript. Когда вы строите сайты, вы не можете постоянно тестировать их с помощью основных браузеров. Вместо этого вам нужен framework , который поддерживает все основные браузеры. Этот framework должен хорошо поддерживаться, а это значит, что осталось всего несколько.

Для этого сайта я выбрал Bootstrap 4. Это не совпадение. Несколько лет назад я искал лучший framework для большого количества сайтов для клиента. После обширного отбора Bootstrap вышел как номер один.

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

Зачем переходить на Bootstrap 5?

В декабре 2020 года был выпущен Bootstrap 5 Beta 1 . Прочитав все изменения и дополнения, можно только сделать вывод, что это еще один большой шаг вперед. Bootstrap 5 Beta заменила Bootstrap 4 на домашней странице сайта Bootstrap , что означает, что они, по крайней мере, считают ее подходящей для новых дизайнов.

Почему я хотел обновить Bootstrap 4 до Bootstrap 5? В прошлые выходные я обновил свой ПК и ноутбук-разработчик с Ubuntu 18.04 до Ubuntu 20.04. Поэтому я подумал, что пока я еще в режиме апгрейда, почему бы не обновить и Bootstrap , наверное, я все равно захочу это сделать когда-нибудь в этом году.

RTL, языки справа налево

Многим это не понадобится, но это замечательно, если вы хотите поддерживать языки справа налево. Около 300 миллионов носителей этих языков. Чтобы активировать это, все, что вам нужно сделать, это добавить dir="rtl" в элемент <html>. Вы можете попробовать это самостоятельно.

To enable  RTL  add '?rtl=on' to the url

To disable  RTL  add '?rtl=off' to the url

Вам нужно обновить?

Как и многие, я использую Bootstrap как есть, так что, начиная с CDN, только я размещаю его на своем собственном веб-сервере. Если вы используете много настроек, SCSS, это может стать сложным. В этом посте я делюсь своими заметками об обновлении этого сайта.

Некоторые вопросы и ответы:

  • Была ли миграция успешной?
    Да. Этот сайт теперь работает с Bootstrap 5.
  • Было ли обновление затруднено?
    Нет.
  • Сколько времени это заняло?
    Пять дней. Большая часть времени была потрачена на преобразование полей формы. Также мне пришлось модифицировать функции генерации формы.
  • Были ли проблемы?
    Да, были некоторые проблемы. По крайней мере, одна из них до сих пор не решена. В Bootstrap 4 переключатель (иконка гамбургера) меняется на 'X' и наоборот. Понятия не имею, как это сделать в Bootstrap 5.
  • Вы должны обновиться?
    Это зависит от вас. Я предлагаю вам сначала взглянуть на сложные части, такие как выпадающее меню. Прочитайте остальную часть этого сообщения и посмотрите на проблемы на Github.
  • Что заняло больше всего времени?
    Перестановка полей формы.

Bootstrap 5 бросил jQuery, но я не могу жить без него.....

Bootstrap 5 больше не использует jQuery. Могу себе это представить. Им нужна была только часть, и теперь они могут сами исправлять проблемы, несовместимости. Одной зависимостью меньше.

Я везде использую jQuery и уж точно не собираюсь заменять весь свой код на обычный Javascript. Основная причина в том, что у меня нет времени на решение проблем с браузером, проблем с безопасностью. Значит ли это, что нужно больше загружать Javascript? Не совсем. Bootstrap также взяли необходимый код из popper.js и связали его со своим кодом.

Инструмент для преобразования классов Bootstrap

Я не смог найти инструмент для конвертирования классов Bootstrap , поэтому использовал Rexxer, общий инструмент поиска и замены Linux. Это работало хорошо, но иногда было очень медленно из-за всех файлов, которые приходилось искать. Но я не жалуюсь. Также я мог бы написать утилиту в Python, но это заняло бы еще четыре часа. Возможно, вам захочется подождать, пока появится больше утилит для обновления.

Шаг 1: Проверьте документы по миграции Bootstrap .

На сайте Bootstrap есть страница 'Migrating to v5'. Хотя не все здесь перечислено, я часто сталкивался с тем, что возвращаюсь на эту страницу, чтобы увидеть изменения в некоторых классах, например. На сайте Bootstrap также теперь (наконец) есть фантастическое окно поиска с автозавершением.

Шаг 2: Изменение базового шаблона

Перемещение вашего базового шаблона в Bootstrap 5 не является чем-то особенным. Самое интересное - это удаление popper.js. Теперь код находится в файле bootstrap.bundle.min.js. После выполнения этого шага вы можете подумать: что же случилось с моим прекрасным сайтом? Не отчаивайтесь!

Bootstrap 4 базовый шаблон:

<!DOCTYPE html>
<html lang="en">
<head>
<meta  charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="/static/vendor/bootstrap/4.5.0-dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" rel="stylesheet">
</head>
<body>
	
<header>
</header>

<main>
</main>

<footer>
</footer>

<script src="/static/vendor/jquery/3.5.1/jquery-3.5.1.min.js"></script>
<script src="/static/vendor/popper/1.16.0/umd/popper.min.js"></script>
<script src="/static/vendor/bootstrap/4.5.0-dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

</body>
</html>

Bootstrap 5 базовый шаблон:

<!DOCTYPE html>
<html lang="en">
<head>
<meta  charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="/static/vendor/bootstrap/5.0.0-beta1-dist/css/bootstrap.min.css" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" rel="stylesheet">

<body>

<header>
</header>

<main>
</main>

<footer>
</footer>

<script src="/static/vendor/jquery/3.5.1/jquery-3.5.1.min.js"></script>
<script src="/static/vendor/bootstrap/5.0.0-beta1-dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

</body>
</html>

Шаг 2: Переименовать классы Bootstrap

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

Components
---
Rename .dropleft and .dropright to .dropstart and dropend.
Rename .dropdown-menu-*-left and .dropdown-menu-*-right to .dropdown-menu-*-start and .dropdown-menu-*-end.
Rename .bs-popover-left and .bs-popover-right to .bs-popover-start and .bs-popover-end.
Rename .bs-tooltip-left and .bs-tooltip-right to .bs-tooltip-start and .bs-tooltip-end.
Rename .carousel-item-left and .carousel-item-right to .carousel-item-start and .carousel-item-end.
Rename .close to .btn-close for a less generic name.

Utilities
---
Rename .left-* and .right-* to .start-* and .end-*.
Rename .float-left and .float-right to .float-start and .float-end.
Rename .border-left and .border-right to .border-start and .border-end.
Rename .rounded-left and .rounded-right to .rounded-start and .rounded-end.
Rename .ml-* and .mr-* to .ms-* and .me-*.
Rename .pl-* and .pr-* to .ps-* and .pe-*.
Rename .text-left and .text-right to .text-start and .text-end.

Text utilities
---
Rename .font-weight-* utilities as .fw-* for brevity and consistency.
Rename .font-style-* utilities as .fst-* for brevity and consistency.

Data utilities
---
Rename data-toggle to data-bs-toggle
Rename data-target to data-bs-target
Rename data-parent to data-bs-parent
Rename data-dismiss to data-bs-dismiss
Rename data-offset to data-bs-offset
Rename data-interval to data-bs-interval
Rename data-ride to data-bs-ride

Helpers
---
Rename .sr-only and .sr-only-focusable to .visually-hidden and .visually-hidden-focusable

Шаг 3: Исправлена ошибка

Следующий шаг - исправить все, что сломано. Я поддерживаю два дополнительных CSS-файла:

  • default.css
    Может быть изменено на другую тему.
  • custom.css
    Содержит CSS, который всегда должен присутствовать.

Ниже приведены мои заметки. Здесь перечислено не все, что я сделал. Я пропустил некоторые преобразования полей формы.

Теперь по умолчанию все ссылки подчеркнуты. Ужасно!

Исправление: Добавить в default.css:

a, ... {
	color: #000000;
	text-decoration: none;
}

Заголовки слишком жирные

Не знаю, изменилось ли это на самом деле.
Исправить: Добавить в default.css:

h1, h2, h3, h4, h5, h6 {
	font-weight: 400!important;
}

Проблемы с переключателем Navbar (гамбургер) (не решены).

Теперь все по-другому. В Bootstrap 4 я переключаю с гамбургера на X и наоборот. В Bootstrap 5 это больше не работает и на данный момент у меня нет решения для этого. Мне пришлось удалить 'X'.

Заказ колонок, левая и правая колонки были заменены на мобильные.

Исправление: Приходилось немного поиграть с классами заказов, чтобы это исправить.

Теги визуально исчезли

В тегах использовался класс значка. С классом значка произошли некоторые изменения.
Исправление: я заменил класс значка на класс кнопки. В любом случае, лучше.

Кнопка закрытия для предупреждений и модалов

Исправить: Удалить символьную строку '&times'.

Предупреждения. В Bootstrap 4 у вас есть что-то вроде:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

В Bootstrap 5 это становится:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

То же самое исправление для модалов.

Обрушение бренда navbar и смещение гамбургера на левую и правую границы страницы

С Bootstrap 4 мне пришлось это подправить.

Исправлено: Удалить px-0 в контейнерном классе.

From:

<div class="sticky-top z-index-30">
  <nav class="navbar   navbar-expand-md {{  navbar_main_extra_class }} sticky-top z-index-30">
    <div class="container  px-0  mx-auto max-width-site">

To:

<div class="sticky-top z-index-30">
  <nav class="navbar   navbar-expand-md {{  navbar_main_extra_class }} sticky-top z-index-30">
    <div class="container mx-auto max-width-site">

Увеличен залог слева и справа на XS и SM.

Исправить: Уменьшение маржи путем добавления px-0 и px-md-2.

От:

<main role="main" class="container-fluid  px-0  px-sm-3 pb-3 pt-5">
  <div class="row no-gutters mx-auto max-width-site">
    <div class="col">

Кому:

<main role="main" class="container-fluid  px-0  px-sm-3 pb-3 pt-5">
  <div class="row no-gutters mx-auto max-width-site">
    <div class="col  px-0  px-md-2">

Форма - отсутствие залога под полями формы

Класс "Форм-группа" был удален.

Исправление: добавление в custom.css:

.form-group {
	margin-bottom: 1rem;
}

Формы - группа ввода

Панель поиска в navbar стала уродливой. Это группа Input. Bootstrap 5 сбросила .input-group-приложение и .input-group-prepend.

Исправление: Использовать документацию Bootstrap для группы ввода.

В Bootstrap 4 у вас есть:

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's  username" aria-label="Recipient's  username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">@example.com</span>
  </div>
</div>

В Bootstrap 5 это становится:

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's  username" aria-label="Recipient's  username" aria-describedby="basic-addon2">
  <span class="input-group-text" id="basic-addon2">@example.com</span>
</div>

Формы - Метки полей формы теперь требуют класса .form-label

Исправление: Добавлен класс формы-ярлыка.

В Bootstrap 4 :

  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
  </div>

В Bootstrap 5 это становится:

<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>

Формы - пользовательский выбор был удален

Исправление: изменение класса.

В Bootstrap 4 :

<select class="custom-select">
...

В Bootstrap 5 это становится:

<select class="form-select" aria-label="Default select example">

Формы - Пользовательский флажок был удален

Теперь он идентичен флажку Bootstrap 4 .

В Bootstrap 4 у вас есть:

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">
    Check this custom checkbox
  </label>
</div>

В Bootstrap 5 это становится:

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>

Некоторые вещи мне нравятся и некоторые вещи я все еще хочу

Типа того:

  • Больше контроля над планировкой
  • Устранены некоторые несоответствия
  • Новый шрифт по умолчанию
  • Отзывчивые шрифты
  • Границы шириной
  • Управление водостоком
    Теперь можно очень легко менять пространство водостока. Я сразу же применил класс gx-3!

Желание:

  • Больше классов ширины, таких как w-10, w-40
  • Классы ширины отзыва, например, w-md-25
  • Ответные границы, например, границы канав на мобильном телефоне.

Резюме

Переход с Bootstrap 4 на Bootstrap 5 занял много времени. Это сделано примерно на 90%. И я использую только ограниченный набор. Большую часть времени занимала конвертация полей формы. Я генерировал формы с полями с помощью скрипта Jinja и должен был сделать много изменений. Но хорошо то, что Bootstrap 5 удалил пользовательские поля.
Если у вас сайт работает еще несколько лет, то переход на Bootstrap 5 определенно стоит того. Вы также можете подождать несколько месяцев, к тому времени большинство ваших проблем, вероятно, будут решены другими.

Ссылки / кредиты

Bootstrap 5 Beta 1
https://blog.getbootstrap.com/2020/12/07/bootstrap-5-beta-1/

Build fast, responsive sites with Bootstrap
https://getbootstrap.com/

Migrating to v5
https://getbootstrap.com/docs/5.0/migration/

Reboot
https://getbootstrap.com/docs/5.0/content/reboot/

twbs / bootstrap
https://github.com/twbs/bootstrap

Подробнее

Bootstrap

Оставить комментарий

Комментируйте анонимно или войдите в систему, чтобы прокомментировать.

Комментарии (1)

Оставьте ответ

Ответьте анонимно или войдите в систему, чтобы ответить.

avatar

I created a really cool tool to help on this. What do you think?
It works pretty good, and can help. I put a live version of my script, which is available on the webpage downloadable or usable. It is licensed under the GNU, so please feel free to modify it.
https://properprogramming.com/tools/converters/bootstrap-4-to-bootstrap-5-converter/