Question

我正在尝试使用： http://www.primefaces.org/showcase/ui/menu/breadcrumb.xhtml

在我的网站上，我得到：

看起来箭头不在中间，字体很大，链接有下划线。如何将它改为PrimeFaces展示的类似内容？

我的主题是“bootstrap”。我的XHTML：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
    </h:head>  

    <h:body>
        <p:breadCrumb>
            <p:menuitem value="Categories" url="#" />
            <p:menuitem value="Sports" url="#" />
            <p:menuitem value="Basketball" url="#" />
            <p:menuitem value="NBA" url="#" />
            <p:menuitem value="Teams" url="#" />
            <p:menuitem value="L.A. Lakers" url="#" />
            <p:menuitem value="Roster" url="#" />
            <p:menuitem value="Kobe Bryant" url="#" />
        </p:breadCrumb>
    </h:body>  
</html>

Answer 1

首先，您正在使用Bootstrap主题，而展示默认使用Omega主题。因此，首先要确保将showcase设置为使用您在项目中使用的相同主题。您可以通过单击“PF主题”按钮（使用PC时页面右上角最左侧的按钮）来执行此操作。

然后使用浏览器的调试工具检查breadcrumb元素（或PrimeFaces展示中的任何内容）。您会注意到，在主题的CSS旁边，还会加载showcase.css。其中一条规则适用于所有小部件：

.ui-widget {
    font-size: 90%;
}

这会导致您遇到的差异（您的文字较大）。

如果您检查痕迹中的锚点，您将找到以下规则：

a {
    text-decoration: none;
    outline: none;
    color: #25AAE1;
}

可能还有更多自定义项。好好看看showcase.css。

如果您不熟悉调试工具，这是您可以期待的一个示例。此屏幕截图是使用Chrome拍摄的。在顶部你有网站。在左侧是DOM树，在这种情况下最重要的是，在右侧，所选节点上应用的规则。在每个规则上，您可以看到它从哪个样式表加载。

如果您有兴趣（并使用Chrome），可以使用documentation on how to use the DOM inspector。

您找到的任何差异（或至少在您的项目中需要）都应放在自定义样式表中。创建一个CSS文件，让我们说/webapp/resources/css/custom.css，并将其合并到模板的头部：

<h:head>
  ...
  <h:outputStylesheet name="css/custom.css"/>
</h:head>

Answer 2

在样式表中尝试使用此CSS。

我希望这会起作用

CSS：

a {
  text-decoration: none;
  outline: none;
}

.ui-breadcrumb ul li {
  display: block;
  float: left;
  overflow: hidden;
  position: relative;
}

.ui-breadcrumb ul li a.ui-icon-home {
  margin-top: 1px;
  overflow: hidden;
  padding: 0;
}

.ui-widget-header a {
  color: #222;
}

.ui-breadcrumb ul li .ui-menuitem-link {
  display: block;
  float: left;
  margin-top: 3px;
  overflow: hidden;
  position: relative;
  color: #222;
  font-size: 90%;
}

.ui-breadcrumb-chevron {
  margin-top: 2px;
}

PrimeFaces组件看起来与展示不同

2 个答案: