28

我正在构建一个 chrome 扩展，它将一个小部件之类的东西附加到 gmail 消息。当用户在 gmail.com 网站上时，它会出现在每封电子邮件（类似于 gmail 上下文小工具）下方。

我查看了一些在我的应用程序中使用的 css 框架，例如 twitter bootstrap。当我在 mywidget 中使用它时，由于 css 类名冲突，它与现有的 gmail 样式混淆了。在没有名称冲突的情况下，我可以使用任何其他框架吗？我遇到了 jquery-ui 框架。这里的所有类名都以 .ui-* 开头，因此不会导致名称冲突。有没有像这样具有唯一类名的其他 css 框架？

4

5 回答 5

51

更新 2：这是@GFoley83 提供的 v3.1.1的要点

更新：下面加入的 pastebin 是 Twitter Bootstrap版本 2.0.4

您应该明确使用最新版本并自己编译。

这是我对 bootstrap less 文件所做的事情：

.tw-bs {
    @import "less/bootstrap.less";
}

这就是结果： http: //pastebin.com/vXgRNDSZ

演示（jsfiddle）

如果您不喜欢tw-bs您可以轻松地进行查找/替换，则不应该有任何冲突。

于 2012-08-07T08:27:10.430 回答
6

我使用了@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-扩展

最后一部分用于 Joomla，但开头可以在全球范围内使用。它还有一个指向最新编译的引导程序版本 2.3.2 的链接。只需搜索并替换.dp-container 即可。

于 2013-05-11T08:20:19.563 回答
2

2016 更新：未来缓解此问题的方法（而不是必须重新编译引导程序）是利用 Web 组件，特别是影子 DOM。这允许您的应用程序是自包含的（几乎就像 iFrame），而 Web 浏览器不必打开单独的页面/失去页面之间通信的能力。

说你的组件包含在<div id='plugin'>...</div>

您可以将该 div 中的内容移动到您脑海中的标签中，例如。

<template id="template"><!--Your Code Here--></template>

您的模板可以包含您想要的所有引导链接标签和 js。然后在你的 javascript/bookmarklet 中，你可以写

var pluginRoot = document.querySelector('plugin').createShadowRoot();
var template = document.querySelector('#template');
var clone = document.importNode(template.content, true);
pluginRoot.appendChild(clone);

您可以在此处阅读有关 Web 组件（以及 Shadow DOM）的更多信息：http ://webcomponents.org/articles/introduction-to-shadow-dom/

于 2016-02-03T06:21:01.953 回答
0

我开始使用 jquery ui - http://jqueryui.com/因为它有自己的不与 gmail 冲突的 css 类。YUI 是我发现的另一个这样的框架。但是 Sherbrow 展示了我如何使用带有我们自己独特的 css 样式名称的 bootstrap css。

于 2012-08-07T17:37:52.867 回答
0

当前接受的答案没有正确呈现表单（使用 SASS 和 bootstrap 4 beta）。以下对我有用：

.bootstrap {
    @import 'bootstrap-4.0.0-beta/scss/bootstrap.scss';

    box-sizing: border-box;
}

box-sizing 很重要，因为在编译 SASS 样式表时，将生成以下内容。

.bootstrap html {
  box-sizing: border-box;
  ...
}

即该box-sizing属性将被放置在一个html元素内的一个元素上class="bootstrap"，当然不会存在。可能还有其他样式html，body您可能希望手动添加到您的样式中。

现在您可以将使用引导程序设置样式的内容放置在bootstrap类中：

<div class="bootstrap">
  <div class="container">
    ...
  </div>
</div>
于 2017-09-15T11:12:30.167 回答