如何覆盖GWT/Bootstrap中的CSS样式？

我刚开始端口twitter's bootstrap到GWT（见GitHub的项目here和非常难看演示here），但是，我有一个日志的自举风格VS GWT风格的问题。如何覆盖GWT/Bootstrap中的CSS样式？

Bootstrap在tr/td元素中放置了一个border-top，而GWT组件基本上在任何地方都使用表。在demo中，您可以在左侧VerticalPanel中看到该错误。

所以，我正在寻找一种方法来使GWT组件忽略引导程序样式，我不知道如何做到这一点。

是否有一个简单的方法使其正常工作？

在此先感谢。

来源

2012-02-09 caarlos0

你想做到这一点无需拿出引导的列表定义？ – thedjpetersen 2012-02-09 16:23:54

基本上，是的。 – caarlos0 2012-02-09 16:26:24

这是可能的，但有些复杂的做一些与GWT的接头。高层次的想法是：

把你所有的GWT部件在< DIV ID =“GWT”> ... </DIV>
添加一个链接器将处理GWT模块文件CSS文件。
在链接器中，转换GWT CSS（例如standard.css）以在每个选择器规则之前插入#gwt。

第一部分很简单，只需在您的根元素中添加一个id即可。

第二部分也很容易，只需添加代码，看起来像这样你Module.gwt.xml文件：

<define-linker name="cssLinker" class="com.you.bootstrap.linker.CssRenamingLinker" /> 
<add-linker name="cssLinker"/>

困难的部分是实现链接。可以手动解析它，但是您可能会发现使用SAC之类的东西更容易。

使用链接器，您可以通过每个选择之前插入#gwt改变你的CSS。使用SAC，您可以通过覆盖所有DocumentHandler方法来将它们的每个参数简单地发送到OutputStream。在DocumentHandler.startSelector（）中，您首先会在每个选择器之前发出“#gwt”。

[编辑] 这假定GWT的standard.css定义样式，覆盖引导样式。如果不是，你可能需要用默认值'增强'GWT CSS。有一个W3C推荐的默认设置列表here。

好处是，这是未来的 - 如果GWT风格改变或引导样式改变，这应该是健壮的。

希望帮助，

亚当

来源

2012-02-09 20:43:58 ahawtho

但gwt在所有类名后面都有'gwt-'... – caarlos0 2012-02-10 12:45:14

添加'gwt'id的意义在于使这些规则比引导规则更具体。 – ahawtho 2012-02-13 17:00:30

要更清楚一点：如果Bootstrap为GWT CSS文件不具有的元素设置样式，则可以使用链接器以相同的方式添加特定规则（这正是我通过链接到W3C默认设置获得的）。通过添加'#gwt'选择器，您可以制定这些规则[更具体]（http://www.w3.org/TR/CSS2/cascade.html#specificity）比任何引导规则。 – ahawtho 2012-02-13 17:09:12

您可以将样式简单地添加到您的根GWT的一个对象，然后简单地重写引导风格，以消除那些凌乱的边界：

<div class="gwt"> 
    ... some other GWT-content 
</div>

，并在你的CSS：

.gwt tr, .gwt td { 
    border-top: 0px; 
}

中当然，如果你需要在你的GWT元素中嵌入一些引导元素，那么你将不得不破解并做：

<div class="gwt"> 
    ... some other GWT-content 
    <div class="bootstrap">... 
     ... Bootstrap elements 
    </div> 
</div>

，并在你的CSS：

.bootstrap tr, .bootstrap td { 
    border-top: 1px; // Whatever bootstrap style puts 
}

来源

2012-02-09 16:26:05

但与此，我将打破与旧gwt应用程序的兼容性... – caarlos0 2012-02-09 17:02:20

正如我在@ahawtho答案中所述，gwt已经有所有类名后的gwt-，也许CSS选择器技巧或可能有所帮助？ – caarlos0 2012-02-10 13:56:58

如何覆盖GWT/Bootstrap中的CSS样式？

回答

相关问题