twitter-bootstrap 在 JSF 中使用 Primefaces 和 Bootstrap
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27449107/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Primefaces and Bootstrap in JSF
提问by Tux
Even now I used JSF+Primefaces in my projects and this give me a lot of new components (from primefaces) to work.
即使现在我在我的项目中使用了 JSF+Primefaces，这给了我很多新的组件（来自 primefaces）工作。
But my new customer required a good layout for the Administrator Panel (Responsive + Clean + Beatiful). Searching in http://themeforest.net/i found a lot of great layouts but almost everything is for bootstrap.
但是我的新客户需要管理员面板的良好布局（响应式 + 清洁 + 美观）。在http://themeforest.net/ 中搜索，我发现了很多很棒的布局，但几乎所有内容都用于引导程序。
So, my doubt is: Can i continue using primefaces (take advantage of powerfull components) and using a layout for bootstrap ? Is there some limitation ?
所以，我的疑问是：我可以继续使用 primefaces（利用强大的组件）并使用 bootstrap 的布局吗？有什么限制吗？
回答by Stephan Rauh
I recommend using BootsFaces along with the Bootstrap theme of PrimeFaces (see http://showcase.bootsfaces.net/integration/PrimeFaces.jsf). BootsFaces reduces the boiler plate code needed to write a Bootstrap page. Plus, it offers a couple of widgets that fit better into a Bootstrap page than their PrimeFaces counterpart. We've designed BootsFaces as a plug-in to PrimeFaces, so you can safely use both together.
我建议将 BootsFaces 与 PrimeFaces 的 Bootstrap 主题一起使用（参见http://showcase.bootsfaces.net/integration/PrimeFaces.jsf）。BootsFaces 减少了编写 Bootstrap 页面所需的样板代码。另外，它提供了几个小部件，比它们的 PrimeFaces 对应物更适合 Bootstrap 页面。我们将 BootsFaces 设计为 PrimeFaces 的插件，因此您可以安全地将两者结合使用。
回答by rmpestano
I have started a project called AdminFaces. It integrates Primefaces and Bootstrap into a new theme, called admin. This theme integrates some bootstrap style into primefaces components like panels, buttons, messages, datatable, tab view and so on. It also brings a template based on the famous Admin LTEbootstrap admin template.
我已经开始了一个名为AdminFaces的项目。它将 Primefaces 和 Bootstrap 集成到一个名为admin的新主题中。该主题将一些引导程序样式集成到面板、按钮、消息、数据表、选项卡视图等primefaces 组件中。它还带来了一个基于著名的Admin LTEbootstrap 管理模板的模板。
You can have a look at showcase here: https://adminfaces.github.io/admin-showcase/
您可以在此处查看展示：https: //adminfaces.github.io/admin-showcase/
The project is in early development stage (e.g: only snapshots are available) so any feedback or contribution is really welcomed.Version 1.0.0 was released, see details on the project blog here.
该项目处于早期开发阶段（例如：只有快照可用），因此非常欢迎任何反馈或贡献。版本 1.0.0 已发布，请在此处查看项目博客上的详细信息。
回答by heq99
Primefaces and Bootstrap are hard to work together. Bootstrap defines a bunch of css classes (like navbar) which are used in html. But primefaces render the components by using its own css classes (like ui-menubar).
Primefaces 和 Bootstrap 很难一起工作。Bootstrap 定义了一堆在 html 中使用的 css 类（如导航栏）。但是 primefaces 通过使用自己的 css 类（如 ui-menubar）来呈现组件。
Although Primefaces provide a bootstrap theme, the theme just makes the primefaces components look like bootstrap look an feel. But those components are still rendered by using primefaces css classes, not bootstrap css classes.
尽管 Primefaces 提供了 bootstrap 主题，但该主题只是使 primefaces 组件看起来像 bootstrap。但是这些组件仍然是通过使用 primefaces css 类而不是引导 css 类来呈现的。
回答by giaffa86
Primefaces already has a bootstrap theme as mentioned in Primefaces Themes Page
Primefaces 已经有一个引导程序主题，如Primefaces 主题页面所述
To configure it you can follow this StackOverflow discussion
要配置它，您可以按照此StackOverflow 讨论
Glad to be helpful.
很高兴有帮助。
回答by yannicuLar
You can use primefaces in a bootstrap-themed Portal. you just have to be careful to set sizes with percentages (use %instead of px)
您可以在以引导程序为主题的门户中使用 primefaces。你只需要小心用百分比设置大小（使用%而不是px）
in most cases, you should have your components e.g p:panelGridwith size = 100%
在大多数情况下，您应该拥有您的组件，例如p:panelGridsize = 100%
<!-- If the screen is too narrow to hold both columns they will be aligned verically -->
<p:panelGrid columns="2" style="width:100%;">
<!-- Left Align -->
<p:panelGrid columns="1" style="width:85%; text-align:left;">
...
</p:panelGrid>
<!-- Right Align ( Controls )-->
<p:panelGrid columns="1" style="width:15%; text-align:right; float:right;">
...
</p:panelGrid>
</p:panelGrid>
I've managed to integrate a Primefaces 4.0 powered portlet with liferay 6.2 (it has a responsive theme), and it worked nice, being responsive and neat.
我已经成功地将 Primefaces 4.0 驱动的 portlet 与 liferay 6.2（它有一个响应式主题）集成在一起，它运行良好，响应迅速且整洁。
You will have some trouble here and there with overflowing dialogs and scrollBars, which are usually limited with fixed pixel sizes, but it's totally do-able.
你会在这里和那里遇到一些溢出对话框和滚动条的麻烦，它们通常受到固定像素大小的限制，但它完全可以做到。
You might also want to check primefaces Grid CSS
您可能还想检查 primefaces Grid CSS
回答by rico-chango
For a long time I searched for my project information to integrate PrimeFaces + JSF and bootstrap, several say it is impossible but I think that is not so true, I encourage everyone to do it.
找了很久我的项目资料，整合PrimeFaces+JSF和bootstrap，有几个说不可能，但我觉得不是这样，我鼓励大家去做。
you nedeed (modal.js) http://getbootstrap.com/javascript/#modals
你需要（modal.js）http://getbootstrap.com/javascript/#modals
private String saludo ="";
public void mensajito(){
saludo = "Saludos bitacorawil!!!" + new Date();
}
public String getSaludo() {
return saludo;
}
public void setSaludo(String saludo) {
this.saludo = saludo;
}
our form will be
我们的表格将是
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" template="/WEB-INF/template.xhtml">
<ui:define name="head">
<h:outputScript name="bootstrap/js/modal.js" />
</ui:define>
<ui:define name="implementation">
<h:form id="form">
<p:messages id="messages" closable="true" autoUpdate="true" />
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-angle-right"></i> Criterios de búsqueda
</div>
<div class="panel-body">
<div class="row">
<div class="form-group has-success col-md-4">
<p:commandButton value="Generar Saludo modal con JSF" oncomplete="$('#myModal').modal('show');" title="Ver campos"
actionListener="#{backbeanController.mensajito}">
</p:commandButton>
</div>
</div>
</div>
</div>
<p:outputPanel autoUpdate="true">
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">Cerrar</button>
<h4 class="modal-title">Datos Registro</h4>
</div>
<div class="modal-body">
<h:panelGrid columns="2">
<h:outputLabel value="Mensaje:" />
<h:outputText value="#{backbeanController.saludo}" />
</h:panelGrid>
</div>
<div class="modal-footer centered">
<button data-dismiss="modal" class="btn" type="button">Cerrar</button>
</div>
</div>
</div>
</div>
</p:outputPanel>
</h:form>
</ui:define>
</ui:composition>回答by MadMad666
I have just tested bootfaces, but when I open the page in the tablet and the phone the font's are quite small. I think, IMO this isn't prepared for real "responsive web design" and probably I have to go manually using bootstrap..
我刚刚测试了引导面，但是当我在平板电脑和手机中打开页面时，字体非常小。我认为，IMO 这并没有为真正的“响应式网页设计”做好准备，可能我必须手动使用引导程序..
But going "manually to use bootstrap" is an extra effort changing from using JavaBeans to RestFul services and add extra security layer... quite a lot of job for a nice Responsive GUI !
但是“手动使用引导程序”是一项额外的工作，从使用 JavaBeans 到 RestFul 服务并添加额外的安全层......
