3

Twitter Bootstrapv2.3.1をPrimefacesv3.5プロジェクトに統合し、レイアウトにはBootstrapを使用し、コンポーネントにはPrimefacesを使用しました。

しかし、DataTableを使用すると問題が発生します。画像でわかるように、うまくレンダリングされません。 ここに画像の説明を入力してください

Firebugを使用することで、問題を理解しました。primefaces入力のデフォルトのcssは、Bootstrap入力スタイルによってovveriddenされます。

順番にロードされたスタイルシートは次のとおりです。

<link type="text/css" rel="stylesheet" href="/projet/javax.faces.resource/theme.css.xhtml?ln=primefaces-aristo" />

<link type="text/css" rel="stylesheet" href="/projet/javax.faces.resource/bootstrap.css.xhtml?ln=css" />

<link type="text/css" rel="stylesheet" href="/projet/javax.faces.resource/bootstrap-responsive.css.xhtml?ln=css" />

<link type="text/css" rel="stylesheet" href="/projet/javax.faces.resource/primefaces.css.xhtml?ln=primefaces" />

ご覧のとおり、theme.cssはbootstrap.cssによってovveriddenになります

それで、Bootstrapを選択した後にすべてのprimefacesスタイルシートをロードする方法はありますか？または、Primefacesコンポーネントを正しくレンダリングするための他の解決策はありますか？

4

3 に答える 3

2

ダウンロードする前に、ブートストラップフレームワークをカスタマイズする必要がありました（[ベースCSS]の[フォーム]のチェックを外してください）。

于 2013-03-14T10:31:54.200 に答える
1

スタイルシートを適用するための厳格なルールはありません。

それはすべてあなたに依存しているので、スタイルシートの順序を変更する解決策ではなく、あなたの場合はそれで終わりますが、Chris Coyier!importantを使用するのは良いことですが、いつ使用するかを教えてくれるので、どこかで競合の解決を支援するカスケード内の特異性メカニズムが役立ちますこれであなた。!importantCSS

サイトポイントでそれについて読んだり、特異度計算機でテストしたりできます。

于 2013-03-12T10:08:50.713 に答える
1

この投稿はポルトガル語ですが、例は単純で、プロジェクトで使用するためにdatatable.cssをダウンロードできます。

http://jnaldo.com/2013/03/deixando-a-datatable-do-primefaces-com-o-tema-do-twitter-bootstrap/

私の「古いケルトアラビア語英語」でごめんなさい。

于 2013-03-18T22:15:08.293 に答える