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

问题描述

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

I am building a chrome extension that attaches a widget sort of thing to gmail message. It appears below every email (something like a gmail contextual gadget) when the user is on gmail.com site.

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

I looked at few css frameworks like twitter bootstrap to use in my app. When I used it in mywidget, it messed with the existing gmail styles because of css class name clash. Is there any other framework that I can use where there would be no name clash? I came across jquery-ui framework. All the classnames here start with .ui-* thereby causing no name clash. Are there any other css frameworks like this with unique class names?

推荐答案

更新 2: 这里是 a@GFoley83 提供的 v3.1.1 的要点

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

Update: The pastebin joined below is the Twitter Bootstrap version 2.0.4

您应该明确使用最新版本并自行编译.

You should definitively use the up-to-date version and compile it yourself.

这是我用引导程序做的事情less 文件 :

Here is what I did with the bootstrap less files :

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

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

演示(jsfiddle)

如果你不喜欢 tw-bs 你可以很容易地进行查找/替换，应该不会有任何冲突.

If you don't like tw-bs you can easily do a find/replace, there shouldn't be any conflict.

这篇关于具有现有样式表的应用程序的 css 框架的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！