Как постепенно перенести сайт на bootstrap 4?

Question

[Artem Ivanov]

Есть сайт, верстка самопальная, писалась не мной.
Как подключать bs4 к отдельным блокам сайта, если подключать на всю страницу или сайт, вся вёрстка едет боком.

Хочется минимум переделки кода, весь сайт проверять и переписывать стили, блоки не вариант.
Пока вижу один вариант, сделать поддомен или папку с bs4 и оттуда вставлять фреймы в нужные части сайта.
Есть варианты лучше, профессиональнее?

Answer 1

[Mikhail Osher]

Собрать кастомный билд, который будет применяться только в определённом namespace.
Чтобы на выходе получилось что-то вроде:

.bs4 {
  // all bootstrap v4 stuff goes here
}

Так же, будет удар по весу сайта, ибо два стиля грузить

Comments

[Artem Ivanov]

на вес, пока будет идти переработка - пофиг
подскажете как собрать билд?

[Mikhail Osher]

Artem Ivanov, хотя есть вариант, что bs4 компоненты будут требовать что-то от html/body.. Так что, может и не сработать идея

[Mikhail Osher]

Artem Ivanov, upgrade-bootstrap.bootply.com может какой? google "codemod bootstrap" и дальше рыть выдачу

Answer 2

[Narts]

https://getbootstrap.com/docs/3.4/customize/
Берите только сетку, в less/sass измените названия смежные классов, сконвертируйте в css

Сейчас у вас просто стили сетки пересекаются (.container, .row, .col...). Если у бутстрапа будут классы а-ля ".bs-contsiner, .bs-row, etc", то проблемы не будет

Или же как предложил Mikhail Osher, в том же less/sass все стили "завернуть" в класс .bs, и тогда стили бутстрапа будут применяться только к блоку с классом .bs и его потомкам

Comments

[Artem Ivanov]

версия
3.4 != 4

попробую блокнотом в css 4 версии всем стилям префикс задать...
костыли но проще не знаю как сделать

[Narts]

Artem Ivanov, ну тогда как вариант взять sass бутстрапа и в импорте убрать все, кроме сетки
а далее любым предложенным способом интегрировать bs на сайт