Я создаю расширение chrome, которое прикрепляет виджетов к сообщению gmail. Он появляется под каждым письмом (что-то вроде gmail-контекстного гаджета), когда пользователь находится на сайте gmail.com.
Я просмотрел несколько фреймворков CSS, таких как twitter bootstrap для использования в моем приложении. Когда я использовал его в mywidget, он испортился с существующими стилями gmail из-за столкновения имени класса css. Есть ли какая-либо другая структура, которую я могу использовать там, где не было бы столкновения имен? Я наткнулся на jquery-ui framework. Все имена классов начинаются с .ui- *, тем самым не вызывая столкновения имен. Существуют ли какие-либо другие рамки css, подобные этому, с уникальными именами классов?
Обновление 2: Вот суть v3.1.1, предоставленная @GFoley83
Обновление:. Пастебином, подключенным ниже, является Bootstrap Twitter версия 2.0.4
Вы должны окончательно использовать обновленную версию и скомпилировать ее самостоятельно.
Вот что я сделал с загрузочным файлом less :
.tw-bs {
@import "less/bootstrap.less";
}
И это результат: http://pastebin.com/vXgRNDSZ
Если вам не нравится tw-bs, вы можете легко найти/заменить, конфликт не должен быть.
Я использовал решение @Sherbrow, но мне также пришлось добавить отзывчивый файл.
.my-bootstrap-container {
@import "less/bootstrap.less";
@import "less/responsive.less";
}
а затем запустите
node_modules/less/bin/lessc demo.less -x > demo.css
Если кому-то нужен полный пошаговый учебник, как скомпилировать бутстрап для собственного контейнера с расширением имен, я сделал сообщение в блоге об этом http://joomla.digital-peak.com/blog/151-how-to-add-bootstrap-to-your-joomla-2-5-extension
Последняя часть предназначена для Joomla, но начало можно использовать глобально. Он также имеет ссылку на последнюю скомпилированную загрузочную версию 2.3.2. Просто выполните поиск и замените .dp-контейнер.
2016: будущий способ смягчить эту проблему (вместо необходимости перекомпилировать загрузочный файл) - использовать веб-компоненты, в частности, теневое DOM. Это позволяет вашему приложению быть самодостаточным (почти как iFrame), без необходимости просмотра отдельной страницы/потери связи между страницами.
скажите, что ваш компонент содержится в <div id='plugin'>...</div>
Вы можете перемещать то, что внутри этого div в тег в вашей голове, например.
<template id="template"><!--Your Code Here--></template>
Ваш шаблон может включать все теги ссылок для загрузки и js, которые вы хотите. Затем в вашем javascript/букмаркете вы можете написать
var pluginRoot = document.querySelector('plugin').createShadowRoot();
var template = document.querySelector('#template');
var clone = document.importNode(template.content, true);
pluginRoot.appendChild(clone);
Здесь вы можете много узнать о веб-компонентах (вместе с Shadow DOM): http://webcomponents.org/articles/introduction-to-shadow-dom/
Я начал использовать jquery ui - http://jqueryui.com/, потому что у него есть свои собственные классы css, которые не сталкиваются с gmail. YUI - еще одна такая основа, которую я нашел. Но Шерброу показал, как я могу использовать bootstrap css с нашими уникальными именами стиля css.
В настоящее время принятый ответ не корректно отображает формы (используя SASS и bootstrap 4 beta). Для меня работает следующее:
.bootstrap {
@import 'bootstrap-4.0.0-beta/scss/bootstrap.scss';
box-sizing: border-box;
}
Размер окна очень важен, потому что при компиляции вашей таблицы стилей SASS создаются следующие.
.bootstrap html {
box-sizing: border-box;
...
}
т.е. свойство box-sizing будет помещено в элемент html внутри элемента с class="bootstrap" - который, конечно, не будет существовать. Могут быть другие стили на html и body, которые вы можете вручную добавить в свои стили.
И теперь вы можете размещать контент, созданный с помощью бутстрапа внутри класса bootstrap:
<div class="bootstrap">
<div class="container">
...
</div>
</div>