Как использовать пространство имен для Twitter-бутстрапа, поэтому стили не конфликтуют

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

ОТВЕТЫ

Ответ 1

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

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

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

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

На этот вопрос был дан ответ.

Ответ 2

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

Чтобы исправить, ответ должен быть:

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

    @import 'bootstrap';
}

Ответ 3

Включение @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;
}

Ответ 4

Добавление пространства имен в bootstrap CSS нарушит модальную функциональность, так как bootstrap добавляет класс "модальный фон" непосредственно в тело. Обходным путем является перемещение этого элемента после открытия модального, например:

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

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

Ответ 5

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

.bootstrap-styles {

    h1 { }

}

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

.bootstrap-styles h1 { }

Ответ 6

Я сделал 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%}

Ответ 8

Namespacing разбивает div div div модального плагина, так как это всегда добавляется непосредственно в тег body, минуя элемент namespacing, который имеет стили, применяемые к нему.

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

myDialog.modal({
    show: false
});

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

myDialog.modal("show");

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

Ответ 9

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

Ответ 10

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

Ответ 11

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

Ответ 12

Используйте этот код (вы можете изменить версию css на любую):

.bootstrap-scope {
    @import (less) url("https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.css");
}