Как создать пространство имен 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.

Источник

13 ответов

Решение

Это оказалось проще, чем я думал. И Less, и Sass поддерживают пространство имен (даже с использованием одного и того же синтаксиса). Когда вы включаете загрузчик, вы можете сделать это в селекторе, чтобы указать пространство имен:

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

Обновление: для более новых версий LESS, вот как это сделать:

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

На аналогичный вопрос ответили здесь.

Источник

@ Андрей отлично ответил. Вы также можете заметить, что bootstrap изменяет тело {}, в основном для добавления шрифта. Поэтому, когда вы создаете пространство имен через 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-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 нарушит модальную функциональность, так как начальная загрузка добавляет класс 'modal-background' непосредственно к телу. Обходной путь должен переместить этот элемент после открытия модального, например:

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

Вы можете удалить элемент в обработчике для события hide.bs.modal.

Источник

Первый клон загрузчика с 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 в свой проект, и все готово.

Радоваться, веселиться!

Источник

Я сделал 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%}
Источник

Используйте.less версию файлов. Определите, сколько файлов вам нужно, а затем оберните эти файлы.less:

.bootstrap-styles {

    h1 { }

}

Это даст вам вывод: 

.bootstrap-styles h1 { }
Источник

Чтобы лучше объяснить все шаги, о которых говорил Эндрю, для тех, кто не знает, что такое Меньше. Вот ссылка, которая довольно хорошо объясняет, как это делается шаг за шагом. Как изолировать Bootstrap или другие библиотеки CSS.

Источник

Предварительные условия

Решение

Префикс всех селекторов css с селектором класса:

  1. Скопируйте весь CSS из CDN в свой редактор (например, http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css)

  2. Оберните все это селектором (в стиле SCSS), например .bootstrap-styles:

      .bootstrap-styles{
  html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside /* etc... */
}

  1. Используйте инструмент для преобразования SCSS в CSS. Я использовал https://jsonformatter.org/scss-to-css . (Смотрите скриншот в конце)

  2. Самостоятельно разместите полученный файл CSS и включите его на страницы, где он вам нужен.

  3. Оберните части, требующие стиля Bootstrap, с помощью <div class="bootstrap-styles"> ... </div>

    → Стили Bootstrap будут применяться только к этим частям

  4. При желании вы можете свернуть получившийся CSS.

Предостережения

  • Результирующий .bootstrap-styles html {селектор, очевидно, не будет работать, так как у тега html не будет родителя. Вы можете исправить это, изменив его на просто .bootstrap-styles {. То же самое относится к body.

  • Иконки и шрифты с относительным путем будут повреждены. Вы можете найти их, выполнив поиск url(.

    • Вариант 1. Удалите эти стили, если они вам не нужны
    • Вариант 2. Обновите URL-адреса, чтобы использовать абсолютный путь к CDN (например, https://netdna.bootstrapcdn.com/bootstrap/3.1.1/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular
    • Вариант 3. Загрузите ресурсы из CDN и разместите их самостоятельно.

  • Вы не можете использовать инструмент управления зависимостями, такой как npm. Вам придется выполнять эти шаги каждый раз, когда вы хотите обновить Bootstrap (см. предварительное условие).

Скриншот

Преобразование SCSS в CSS

Источник

Пространство имен нарушает фоновый div модального плагина, поскольку он всегда добавляется непосредственно к тегу , минуя элемент пространства имен, к которому применены стили.

Вы можете исправить это, изменив ссылку на плагин на $body прежде чем он показывает фон:

myDialog.modal({
    show: false
});

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

myDialog.modal("show");

$body свойство решает, где фон будет добавлен.

Источник

Самое простое решение - начать использовать пользовательские изолированные классы CSS для Bootstrap.

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

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

и оберните ваш HTML в div с классом bootstrapiso:

<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>
Источник

В качестве дальнейшего примечания для всех. Чтобы заставить модалы работать с фоном, вы можете просто скопировать эти стили из 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;
}
Источник

Я столкнулся с той же проблемой, и метод, предложенный @Andrew, к сожалению, не помог в моем конкретном случае. Классы начальной загрузки столкнулись с классами из другого фреймворка. Вот как этот проект был начат https://github.com/sneas/bootstrap-sass-namespace. Не стесняйтесь использовать.

Источник
Другие вопросы по тегам