Как подключить bootstrap без изменения глобальных стилей? Web
Я сверстал одностраничник ручками. Теперь, допустим, я хочу подключить bootstrap - это не сложно. Однако проблема в том, что при подключении bootstrap.css изменяются также и глобальные стили - об этом даже в документации говорится. Так, например, все заголовки h2 меняют шрифт и толщину и размер шрифта. Из-за этого сверстанная до подключения страничка выглядит не так, как должна. Переопределять все эти стили вручную - та еще морока.
Есть ли способ подключить bootstrap без изменения глобальных стилей?
Ответы (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";
Возможен вариант с тем, чтобы повысить специфичность самого bootstrap. Для этого можно обернуть весь код bootstrap-a в какой-нибудь класс. Для этого можно использовать less или scss препроцессоры.
Сделать новый файл .less
Сделать класс и вставить внутрь код bootstrap
После, конвертировать в .css, если не используются препроцессоры
.className { ... код бутстрапа }
После этого можно будет сделать блок с классом className, а внутри можно будет использовать классы bootstrap.
P.S. Вариант крайне костыльный, но однажды применялся на практике. Легче писать сразу используя bootstrap или другую библиотеку. Или писать без них используя свои стили.