Как использовать пространство имен для 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%}
Ответ 7
Чтобы лучше объяснить все шаги, о которых говорил Андрей, для тех, кто не знает, что такое "Меньше".
Вот ссылка, которая довольно хорошо объясняет, как это делается шаг за шагом Как изолировать Bootstrap или другие библиотеки CSS
Ответ 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");
}