Question

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

我看了几个像我在app中使用的twitter bootstrap的css框架。当我在mywidget中使用它时，由于css类名称冲突，它与现有的gmail样式混乱。是否有任何其他框架我可以使用没有名称冲突的地方？我遇到了jquery-ui框架。这里的所有类名都以.ui- *开头，从而不会引起名称冲突。是否还有其他具有唯一类名的css框架？

Answer 1

更新2：以下是@ GFoley83提供的v3.1.1的a gist

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

你应该明确地使用up-to-date version并自己编译。

以下是我使用bootstrap less files所做的事情：

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

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

Demo (jsfiddle)

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

Answer 2

我使用了@Sherbrow解决方案，但也必须添加响应文件。

.my-bootstrap-container {
     @import "less/bootstrap.less";
     @import "less/responsive.less";
}

然后运行

node_modules/less/bin/lessc demo.less -x > demo.css

如果有人需要完整的分步教程如何为您自己的命名空间容器编译bootstrap，我发了一篇关于它的博客文章http://joomla.digital-peak.com/blog/151-how-to-add-bootstrap-to-your-joomla-2-5-extension

最后一部分是Joomla，但开头可以全局使用。它还有一个指向最新编译的bootstrap版本2.3.2的链接。只需进行搜索并替换 .dp-container 。

Answer 3

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/

Answer 4

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

Answer 5

目前接受的答案没有正确呈现表单（使用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设置样式的内容放在bootstrap类中：

<div class="bootstrap">
  <div class="container">
    ...
  </div>
</div>

具有现有样式表的应用程序的css框架

5 个答案: