GWT /ブートストラップでCSSスタイルを上書きするにはどうしたらいいですか？

Question

twitter's bootstrapをGWTに移植し始めました（githubプロジェクトhereと非常に醜いデモhereを参照してください）。しかし、私はブートストラップスタイルとGwtスタイルの問題のログを持っていました。

ブートストラップはtr/td要素にborder-topを置き、GWTコンポーネントは基本的にすべてのテーブルを使用します。 demoでは、左のVerticalPanelにそのバグが表示されます。

私は、GWTコンポーネントがブートストラップスタイルを無視する方法を探していましたが、これをどうやって行うのか分かりません。

正常に動作するようにする簡単な方法はありますか？

ありがとうございます。

Answer 1

それはGWTでのリンカで何かを行うことは可能ですが、やや複雑。ハイレベルな考え方は次のようになります。

1. <のdivのid =「GWT」にすべてのGWTコンポーネントを置く> ... </div>の
2. 処理するGWTモジュールのファイルにリンカを追加CSSファイル。
3. リンカでは、各セレクタルールの前に#gwtを挿入するようにGWT CSS（たとえばstandard.css）を変換します。

最初の部分は簡単です。ルート要素にIDを追加するだけです。難しい部分は、リンカを実施している

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

：

第二部

は、単にあなたのModule.gwt.xmlファイルにこのようなコードを追加することも容易です。手で解析することは可能ですが、 SACのようなものを使用する方が簡単です。

リンカを使用すると、各セレクタの前に#gwtを挿入することでCSSを変換できます。 SACを使用すると、すべてのDocumentHandlerメソッドをオーバーライドして、それぞれの引数をOutputStreamに単純に出力することができます。 DocumentHandler.startSelector（）では、まず各セレクターの前に "＃gwt"を出します。

[編集] これは、GWTのstandard.cssがブートストラップスタイルをオーバーライドするスタイルを定義していることを前提としています。そうでない場合は、GWT CSSをデフォルトで「強化」する必要があります。 W3Cが推奨するデフォルトのリストhereがあります。

GWTスタイルが変更された場合、またはブートストラップスタイルが変更された場合、これは将来性があるという利点があります。助け

希望、

アダム

Answer 2

あなたは単にあなたのルート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 
}