Как создать пространство имен Twitter Bootstrap, чтобы стили не конфликтовали

106

Я хочу использовать 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 будет использовать оба стиля h1, но я хочу быть более избирательным в отношении того, в каких областях я применяю стили Twitter Bootstrap.

Андрей
источник
возможный дубликат css framework для приложения с существующей
таблицей
Это поможет «Как изолировать Bootstrap CSS, чтобы избежать конфликтов» formden.com/blog/isolate-bootstrap
Samuel Ev

Ответы:

132

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

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

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

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

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

Андрей
источник
Эй, я пытаюсь следить за этим, но я немного запутался. Я работаю с Angular. Используя CDN, я ссылался на файлы bootstrap.min.js, less.min.js и bootstrap.min.css. Однако я не совсем уверен, где делать пространство имен в моем приложении.
Бэтмен
После этого мои модальные окна перестают работать так, как они используются. Этого следовало ожидать?
Batman
2
@Batman Вы не хотите использовать CDN, потому что вы, по сути, переписываете весь Bootstrap, чтобы включить префикс. Вам нужно использовать препроцессор, такой как SASS, для @importисходного Bootstrap. У меня тоже были проблемы с модальными окнами, я думаю, потому что Bootstrap применяет определенные классы к тегу тела верхнего уровня. Не помню, нашел ли я решение. В конце концов, мне кажется, я написал свою собственную модальную замену.
Эндрю
4
Это больше не работает после версии 3 ( hereswhatidid.com/2014/02/… )
adamj
2
Может кто-нибудь объяснить, куда должен идти этот оператор импорта? Похоже на отдельный файл .less. Я сделал это и поместил его в папку bootstrap less, но он не компилируется с пространством имен. Я думаю, я что-то
упускаю
35

@ Андрей отличный ответ. Вы также захотите отметить, что 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';
}
Кевин
источник
Ты забылmargin: 0;
колобок
1
Внимание! Я не знаю почему, но в некоторых местах создается меньше css, например .my-prefix .my-prefix ..., поэтому вам также нужно искать и заменять его.
колобок
10

Собрав ответы @Andrew, @Kevin и @adamj вместе (плюс несколько других стилей), если вы включите следующее в файл с именем "bootstrap-namespaced.less", вы можете просто импортировать 'bootstrap-namespaced.less' в любой 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;
}
Сингулярность
источник
1
Спасибо. Это действительно лучшее решение.
колобок
Прекрасно работает!
Кевин Бертоммье
8

Добавление пространства имен в начальный CSS нарушит модальную функциональность, поскольку начальная загрузка добавляет класс 'modal-backdrop' непосредственно в тело. Обходной путь - переместить этот элемент после открытия модального окна, например:

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

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

user3567343
источник
Если вы используете angular с ngbootstrap, вы можете открыть модальное окно внутри определенного контейнера. this.modalService.open('myModal', {container: '#modalgoeshere'})
Ena
3

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

.bootstrap-styles {

    h1 { }

}

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

.bootstrap-styles h1 { }
Скотт Симпсон
источник
3

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

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

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

myDialog.modal({
    show: false
});

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

myDialog.modal("show");

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

Thenickdude
источник
1

Самое простое решение - начать использовать собственные сборочные изолированные классы 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>
user3879851
источник
0

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

снится
источник
0

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

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

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

Тобиас Эрнст
источник