Jsf+Primefaces响应式设计

Question

我已经开始为我的网站的JSF+Primefaces最新版本的工作，这在某种程度上是可能的，我可以使我的设计响应这些技术。我不想使用Primefaces mobile，或者我不想为相同的功能创建两个不同的页面

Answer 1

x有响应式设计更新，包括响应式网格。

这个网格不是JSF组件，它是一个带有ui-grid类的简单div。

三栏布局示例:

<div class="ui-grid">
   <div class="ui-grid-col-4">Col1</div>
   <div class="ui-grid-col-4">Col2</div>
   <div class="ui-grid-col-4">Col2</div>
 </div>

---

在实际情况下，只有一个网格不能满足需求，所以你通常应该使用一些框架，如bootstrap或foundation。

两个框架都提供了CSS/Javascript规则，它们可以很容易地应用于JSF组件，例如，如果您有一个按钮:

<h:commandButton styleClass="btn" value="Button">
</h:commandButton>

btn是一个bootstrap CSS类。

你可能会遇到一些不接受这种样式的组件，比如Primefaces表，在这种情况下，你应该编写自己的CSS媒体查询/Javascript，以保持响应性。

看到更多

• JSF和Twitter Bootstrap集成