Как применять внешние CSS только в определенной области

Question

Я разрабатываю веб-приложение, в котором должна быть возможность увидеть область с Bootstrap4.1 или Bootstrap3.Все приложение разработано с Bootstrap3:

У меня есть логика, реализованная для переключения между BT4 и BT3

Но когда я вставляю Bootstrap4, все страницы затрагиваются.

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

Как применить Bootstrap4.1 только в определенной области?

Answer 1

OK. У вас есть работа.

• Сначала загрузите исходные файлы Bootstrap 4 и откройте файл bootstrap.scss.
• Включите весь CSS с именем класса по вашему выбору.

Пример:

.your_class_name {
  /*Source files*/
}

Теперь у вас есть файл SCSS.

• Затем перейдите по этой ссылке , скопируйте, вставьте свой код и преобразуйте его в файл CSS.

Вы заметите, что всем классам Bootstrap предшествует имя вашего класса.

• Скопируйте этот файл в ваш проект.

В HTML-коде, когда вы хотите использовать классы Bootstrap 4, просто начните с

<div class="your_class_name"> и вложите в него свое содержимое.

Классы Bootstrap 4 будут применяться только к дочерним элементам вложенного div.