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

Question

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

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

Answer 1

更新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您可以轻松地进行查找/替换,不应该有任何冲突.

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 -您-的Joomla-2-5扩展

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