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

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

css gwt twitter-bootstrap

如何覆盖GWT/Bootstrap中的CSS样式？,css,gwt,twitter-bootstrap,Css,Gwt,Twitter Bootstrap,我刚开始移植以查看github项目和一个非常难看的演示，但是，我在引导样式和Gwt样式方面遇到了很多问题 Bootstrap在tr/td元素中放置了一个边框顶部，而GWT组件基本上到处都使用表。在中，您可以在左侧垂直面板中看到该错误所以，我一直在寻找一种让GWT组件忽略引导样式的方法，但我不知道如何做到这一点有没有简单的方法让它正常工作提前感谢。您只需向一个根GWT对象添加一个样式，然后简单地覆盖引导样式以删除这些凌乱的边框： <div class="gwt"> ...

我刚开始移植以查看github项目和一个非常难看的演示，但是，我在引导样式和Gwt样式方面遇到了很多问题

Bootstrap在tr/td元素中放置了一个边框顶部，而GWT组件基本上到处都使用表。在中，您可以在左侧垂直面板中看到该错误

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

有没有简单的方法让它正常工作

提前感谢。

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

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

当然，如果您需要在GWT元素中嵌入一些引导元素，那么您将不得不绕过并执行以下操作：

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

您只需将样式添加到一个根GWT对象中，然后简单地覆盖引导样式以删除这些凌乱的边框：

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

当然，如果您需要在GWT元素中嵌入一些引导元素，那么您将不得不绕过并执行以下操作：

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

在GWT中使用链接器是可能的，但有点复杂。高层次的想法是：

将所有GWT组件放入。。。将链接器添加到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"/>

最困难的部分是实现链接器。手动解析是可能的，但您可能会发现使用类似的方法更容易

使用链接器，您可以通过在每个选择器之前插入gwt来转换CSS。使用SAC，您可以通过覆盖所有DocumentHandler方法来实现这一点，只需将它们的每个参数发送到OutputStream。在DocumentHandler.startSelector中，您将首先在每个选择器之前发出gwt

[编辑] 这假设GWT的standard.css定义了覆盖引导样式的样式。如果没有，您可能必须使用默认值“增强”GWT CSS。这里列出了W3C推荐的默认设置

这样做的好处是，它可以抵御未来的挑战——如果GWT样式发生变化或者引导样式发生变化，那么它应该是健壮的

希望有帮助

Adam