0

Я сверстал одностраничник ручками. Теперь, допустим, я хочу подключить bootstrap - это не сложно. Однако проблема в том, что при подключении bootstrap.css изменяются также и глобальные стили - об этом даже в документации говорится. Так, например, все заголовки h2 меняют шрифт и толщину и размер шрифта. Из-за этого сверстанная до подключения страничка выглядит не так, как должна. Переопределять все эти стили вручную - та еще морока.

Есть ли способ подключить bootstrap без изменения глобальных стилей?

2
  • 1
    Скорее нет, потому что bootstrap - это фреймворк, чтобы на нем что-то делали, а не накидывали поверху чего-то... Плюс там много !important, что в принципе слишком усложняет жизнь... Commented 19 сент. 2021 в 14:03
  • @VladimirGonchar есть ли тогда наборы готовых компонентов и/или стилей, которые можно выборочно использовать на сайте?
    – ComeInRage
    Commented 19 сент. 2021 в 14:06

2 ответа 2

2

Скачайте исходники и в файле scss/bootstrap.scss удалите ненужное.

// Configuration
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";

// Layout & components
@import "root";
@import "reboot"; // <- Сброс стилей
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";
0

Возможен вариант с тем, чтобы повысить специфичность самого bootstrap. Для этого можно обернуть весь код bootstrap-a в какой-нибудь класс. Для этого можно использовать less или scss препроцессоры.

  1. Сделать новый файл .less

  2. Сделать класс и вставить внутрь код bootstrap

  3. После, конвертировать в .css, если не используются препроцессоры

    .className { ... код бутстрапа }

После этого можно будет сделать блок с классом className, а внутри можно будет использовать классы bootstrap.

P.S. Вариант крайне костыльный, но однажды применялся на практике. Легче писать сразу используя bootstrap или другую библиотеку. Или писать без них используя свои стили.

4
  • А почему просто не собрать из исходников как душа пожелает?
    – nazarpunk
    Commented 19 сент. 2021 в 17:37
  • @nazarpunk Скорее всего то, что будет взято из пересобранного бутстрапа все равно переопределит часть уже написанного css. А так будет гарантия, что старая верстка останется целой и не будет сломана. Commented 20 сент. 2021 в 3:27
  • А что мешает при сборке не специфичности добавить, а префикс. Будет же удобней и возможно быстрее.
    – nazarpunk
    Commented 20 сент. 2021 в 3:34
  • В целом тоже вариант. Сам уже несколько лет не пишу на бутстрапах и подобном. Можешь добавить в свой ответ, тогда он будет еще круче. Commented 20 сент. 2021 в 3:36

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.