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

Question

我刚开始将twitter's bootstrap移植到GWT（请参阅github项目here和一个非常丑陋的演示here），但是，我正在记录问题使用bootstrap样式与Gwt样式。

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

所以，我一直在寻找一种让GWT组件忽略引导样式的方法，我不知道如何做到这一点。

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

提前致谢。

Answer 1

您可以简单地向一个根GWT对象添加一个样式，然后简单地覆盖引导样式以删除那些杂乱的边框：

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

并在你的CSS中：

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

当然，如果你需要在你的GWT元素中嵌入一些bootstrap元素，那么你将不得不乱砍并做：

<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
}

Answer 2

使用GWT中的链接器执行某些操作是可能的，但有点复杂。高层次的想法是：

1. 将所有GWT组件放入＆lt; div id =“gwt”＆gt; ...＆lt; / div＆gt;
2. 将链接器添加到将处理CSS文件的GWT模块文件中。
3. 在链接器中，转换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样式发生变化或者引导样式发生变化，这应该是强大的。

希望有所帮助，

亚当