twitter-bootstrap-3 – 使用带有webjars和jsf2.2的bootstrap 3

发布时间：2020-12-17 20:38:46 所属栏目：安全来源：网络整理

导读：我正在尝试在jsf 2.2中创建一个带bootstrap和glypicons的简单页面.我已经包含了webjar的bootstrap依赖项(打开jar我可以看到字体文件存在). 将应用程序部署到wildfly时,bootstrap css正常工作,但显示的图标很糟糕(如默认字体或其他东西).查看浏览器中的网络选

我正在尝试在jsf 2.2中创建一个带bootstrap和glypicons的简单页面.我已经包含了webjar的bootstrap依赖项(打开jar我可以看到字体文件存在).

将应用程序部署到wildfly时,bootstrap css正常工作,但显示的图标很糟糕(如默认字体或其他东西).查看浏览器中的网络选项卡,我只看到404错误：

http://localhost:8080/proto/javax.faces.resource/bootstrap/3.1.1/fonts/glyphicons-halflings-regular.woff 404

http://localhost:8080/proto/javax.faces.resource/bootstrap/3.1.1/fonts/glyphicons-halflings-regular.ttf 404

我尝试包含其他依赖项(bootstrap-glypicons),我只得到404错误两次.我错过了什么？

这就是我包括boostrap的方法,它适用于css：

<h:outputStylesheet library="webjars" name="bootstrap/3.1.1/css/bootstrap.min.css" />

这就是我使用css类的方式：

<button><span class="glyphicon glyphicon-minus"></span></button>

解决方法

你应该使用< link>标签而不是< h：outputStylesheet>
例如.

<link rel="stylesheet" type="text/css" media="all" href="webjars/bootstrap/3.1.1/css/bootstrap.min.css"/>

—更新
这是因为JSF中的ResourceHandler将库值(webjars)作为参数添加到URI的末尾：
面/ javax.faces.resource /引导/ 3.1.1 / CSS / bootstrap.min.css？LN = webjars

在bootstrap.min.css CSS中有这样的文件引用：
url(‘../ fonts / glyphicons-halflings-regular.woff’)格式(‘woff’),url(‘../ fonts / glyphicons-halflings-regular.ttf’)格式(‘truetype’),

所以如果你想使用< h：outputStylesheet>您可以编写自己的ResourceHander,也可以编辑bootstrap.min.css并修复glyphicons-halflings-regular.*文件的路径

在我看来,最好使用标准的html标签< link>而不是< h：outputStylesheet>因为JSF组件树会更小并且它会影响性能.在bootstrap.min.css里面没有EL所以不需要使用< h：outputStylesheet>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!