Primefaces使用twitter引导程序布局呈现组件

Question

我将Twitter Bootstrap v2.3.1集成到Primefaces v3.5项目中， 我使用Bootstrap进行布局，使用Primefaces进行组件。

但是我在使用DataTable时出现问题，它在图片中看不到很好：

通过使用Firebug我发现问题，引导输入样式默认的primefaces输入的css

这里是按顺序加载的样式表：

<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" />

正如您所看到的，boot.crap

中的theme.css得到了ovver

有没有办法在Bootstrap之后加载所有的primefaces样式表？ 或者是否有任何其他解决方案来正确呈现Primefaces组件？

Answer 1

我只需要customize（在Base CSS下取消选中Forms）下载之前的bootstrap框架！

Answer 2

应用样式表没有严格的规则。

它全部依赖于你所以它不是一个改变样式表顺序的解决方案，在你的情况下它是用!important完成的，但是使用Chris Coyier tells you when to use !important是好的，所以sitepoint内的特殊机制在某个地方帮助解决冲突的级联可以帮助你。

您可以在Specificity Calculator阅读相关信息并在{{3}}进行测试。

Answer 3

这篇文章是葡萄牙语，但示例很简单，您可以下载datatable.css，以便在您的项目中使用。

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

对不起我的“古老的凯尔特阿拉伯语英语”。