Як простору імен Twitter Bootstrap, щоб стилі не конфліктували

Я хочу використовувати Twitter Bootstrap, але лише на конкретних елементах, тому мені потрібно розібратися з способом приставки всіх класів Twitter Bootstrap з моїм префіксом або використовувати менш міксин. Я ще не досвідчений з цим, тому не зовсім розумію, як це зробити. Ось приклад HTML, який я намагаюся стилізувати:

<div class="normal-styles">
  <h1>dont style this with bootstrap</h1>
  <div class="bootstrap-styles">
    <h1>use bootstrap</h1>
  </div>
</div>

У цьому прикладі Twitter Bootstrap буде нормальним стилем обох h1s, але я хочу бути більш вибірковим щодо того, в яких сферах я застосовую стилі Twitter Bootstrap.

Це виявилося простіше, ніж я думав. І Less, і Sass підтримують простір імен (використовуючи навіть той самий синтаксис). Коли ви включаєте завантажувальний інструмент, ви можете зробити це в селекторі, щоб простору імен:

.bootstrap-styles {
  @import 'bootstrap';
}

Оновлення: для новіших версій менше, ось як це зробити:

.bootstrap-styles {
  @import (less) url("bootstrap.css");
}

На подібне запитання тут відповіли.

@Andrew чудова відповідь. Ви також хочете відзначити, що завантажувальний пристрій змінює тіло {}, головним чином для додавання шрифту. Отже, коли ви називаєте це простором імен через LESS / SASS, ваш вихідний файл CSS виглядає приблизно так: (у завантажувальній програмі 3)

.bootstrap-styles body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.428571429;
    color: #333333;
    background-color: white;
}

але, очевидно, у вашому div не буде тегу body, тому вміст завантажувального файлу не матиме шрифту bootstrap (оскільки всі bootstrap успадковує шрифт від батьківського)

Щоб виправити, відповідь повинна бути:

.bootstrap-styles {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.428571429;
    color: #333333;
    background-color: white;

    @import 'bootstrap';
}

Поклавши відповіді @Andrew, @Kevin та @ adamj разом (плюс кілька інших стилів), якщо ви додасте в файл таке ім'я "bootstrap-namespaced.less", ви можете просто імпортувати "bootstrap-namespaced.less" у будь-який менший файл:

// bootstrap-namespaced.less

// This less file is intended to be imported from other less files. 
// Example usage:
// my-custom-namespace {
//  import 'bootstrap-namespaced.less';
// }

// Import bootstrap.css (but treat it as a less file) to avoid problems 
// with the way Bootstrap is using the parent operator (&).
@import (less) 'bootstrap.css';

// Manually include styles using selectors that will not work when namespaced.

@import 'variables.less';

& {
    // From normalize.less

    // Previously inside "html {"
    // font-family: sans-serif; // Overridden below
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;

    // Previously inside "body {"
    margin: 0;

    // From scaffolding.less

    // Previously inside "html {"
    // font-size: 10px; // Overridden below
    -webkit-tap-highlight-color: rgba(0,0,0,0);

    // Previously inside "body {"
    font-family: @font-family-base;
    font-size: @font-size-base;
    line-height: @line-height-base;
    color: @text-color;
    background-color: @body-bg;
}

Додавання простору імен до завантажувального CSS призведе до порушення модальної функціональності, оскільки завантажувальний додає клас "модальний фон" безпосередньо до тіла. Приблизним способом є переміщення цього елемента після відкриття модалу, наприклад:

$('#myModal').modal();
var modalHolder = $('<div class="your-namespace"></div>');
$('body').append(modalHolder);
$('.modal-backdrop').first().appendTo(modalHolder); 

Ви можете видалити елемент з обробника для події 'hid.bs.modal'.

Використовуйте версію файлів .less. Визначте, які менші файли вам потрібні, а потім оберніть ці .less файли:

.bootstrap-styles {

    h1 { }

}

Це дасть вам результат:

.bootstrap-styles h1 { }

Я зробив GIST з Bootstrap 3 усередині класу з іменем .bootstrap-wrapper https://gist.github.com/onigetoc/20c4c3933cabd8672e3e

Я почав з цього інструменту: http://www.css-prefix.com/ І решту виправити з пошуку та заміни в PHPstorm. Усі шрифти @ font-face розміщуються на maxcdn.

Приклад першого рядка

.bootstrap-wrapper {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}

Розміщення імен розбиває фоновий розділ модуля модуля, оскільки це завжди додається безпосередньо до тегу <body>, минаючи ваш елемент простору імен, у якому застосовуються стилі до нього.

Ви можете виправити це, змінивши посилання на плагін до того, $bodyяк він відобразиться на тлі:

myDialog.modal({
    show: false
});

myDialog.data("bs.modal").$body = $(myNamespacingElement);

myDialog.modal("show");

$bodyВластивість визначає , де буде додано фон.

Щоб краще пояснити всі кроки, про які говорив Ендрю, для тих, хто не знає, що таке менше. Ось посилання, яке досить добре пояснює, як це робиться поетапно Як ізолювати Bootstrap або інші бібліотеки CSS

Найбільш просте рішення - почати використовувати спеціальні збірки css для Bootstrap.

Наприклад, для Bootstrap 4.1 завантажуйте файли з каталогу css4.1 -

https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes

і оберніть свій HTML у розділ із завантажувальним класом:

<div class="bootstrapiso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>

Шаблон сторінки з ізольованим завантажувальним файлом 4 буде

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <title>Page1</title>

    <!-- Isolated Bootstrap4 CSS - -->
    <link rel="stylesheet" href="css4.1/bootstrapcustom.min.css" crossorigin="anonymous">   

    <!-- JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" crossorigin="anonymous"></script>

  </head>

  <body>

  <div class="bootstrapiso">
  <!-- Any HTML here will be styled with Bootstrap CSS -->
  </div>

  </body>
</html>

Я зіткнувся з тим же питанням і метод, запропонований @Andrew, на жаль, не допоміг у моєму конкретному випадку. Класи завантажувальної програми зіткнулися з класами з іншого фреймворку. Ось як цей проект був сприйнятий https://github.com/sneas/bootstrap-sass-namespace . Сміливо користуйтесь.

Як додаткова примітка для всіх. Щоб отримати модальні роботи з фоном, ви можете просто скопіювати ці стилі з bootstrap3

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}
.modal-backdrop.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}
.modal-backdrop.in {
  filter: alpha(opacity=50);
  opacity: .5;
}

Перший клон завантажувального закладу від github:

git clone https://github.com/twbs/bootstrap.git

Вимоги до встановлення:

npm install

Відкрийте scss / bootstrap.scss та додайте простір імен:

.your-namespace {
    @import "functions";
    ...
    @import "utilities/api";
}

Складіть завантажувальний інструмент:

npm run dist

Відкрийте dist/css/bootstrap.cssта видаліть простір імен із тегу htmlта body.

Після цього скопіюйте вміст папки dist у ваш проект, і все налаштовано.

Веселіться!