Как найти и обновить BS 5 CSS, массовое переименование BootStrap 4 в классы CSS BootStrap 5

Question

Bootstrap 4 имеет более 1500 классов CSS / Sass, мы готовимся кBootstrap 5. Меня попросили проверить, какая часть сайта сломается. Поскольку это огромная задача, не могли бы вы рассказать, как выполнить процесс обновления и миграции.

Как этого добиться, есть ли сценарий, подключаемый модуль или проверка соответствия для этого обновления?

Тогда, от BS 3 до BS4, это было более управляемо! но с 1500 CSS мне нужна помощь.

Answer 1

Я создал сценарий инструмента миграции Bootstrap 5, который сканирует все страницы/шаблоны в папке и:

• Заменяет все классы Bootstrap 4 классами Bootstrap 5.
• Заменяет устаревшие компоненты (такие как.jumbotronи.media) с соответствующими классами полезности
• Переименовывает все атрибуты данных (например,data-toggleиdata-target) к новым именам с префиксом bs
• Обновляет все ссылки CDN Bootstrap v4 (jsdelivr.net, unpkg.com и stackpath.bootstrapcdn.com) до последней версии Bootstrap v5.

Это бесплатно и с открытым исходным кодом:https://github.com/coliff/bootstrap-5-migrate-tool .

Answer 2

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

https://gist.github.com/Juanosorio94/f76535a1264ac6f7251c643af50c184d

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

Answer 3

Хорошо, думаю, я понял ваш вопрос. Если у вас есть отдельная страница css, перейдите на страницу html и выполните следующие действия:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!--Bootstrap 4, not 5-->

Имейте в виду, что приведенный выше код - это Bootstrap 4, поэтому замените ссылку на 5. В любом случае, продолжение:

<link rel="stylesheet" href="css/yourcss.css">
<!--linking to my CSS page-->

Итак, вам нужно проверить свой сайт со всех сторон и посмотреть, что сломается при использовании bootstrap 5.

Answer 4

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

Как перейти на v5: https://v5.getbootstrap.com/docs/5.0/migration/

Просто обнови <link> а также <script>до v5 и посмотрите, как это выглядит. Просмотрите всю страницу. Начните с крупных элементов, таких как макет, формы, и самое худшее уже сделано.

Answer 5

Смотрите это: https://getbootstrap.com/docs/5.0/migration/ . Это объясняет, как Bootstrap переходит на v5, и покажет, как заставить ваше веб-приложение реагировать.