将 Bootstrap 添加到 Domino 表单

Question

在我的 XPages 应用程序中，我想添加一些 $$ Domino 表单并使用 Bootstrap 设置它们的样式。由于 bootstrap 已经为应用程序启用，因此它在服务器上可用，我在这些表单上考虑 re-using 它们，所以我在 HTML 标题内容部分添加了以下公式：

"<meta charset=\"utf-8\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <meta name=\"description\" content=\"\">
    <meta name=\"author\" content=\"\">
    <meta charset=\"utf-8\">
    <link rel=\"shortcut icon\" href=\"/" + @WebDbName + "/favicon.ico\">
    <title>Authentication Failure</title>
    <!-- Bootstrap core CSS -->
    <link href=\"../../xsp/.ibmxspres/.extlib/responsive/dijit/dbootstrap-0.1.1/theme/dbootstrap/dbootstrap.css\" rel=\"stylesheet\">
    <link href=\"../../xsp/.ibmxspres/.extlib/responsive/bootstrap3/css/bootstrap.css\" rel=\"stylesheet\">
    <script src=\"../../xsp/.ibmxspres/.extlib/responsive/jquery/jquery.min.js\"></script>  
    <script src=\"../../xsp/.ibmxspres/.extlib/responsive/bootstrap3/js/bootstrap.min.js\"></script>    
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src=\"http://getbootstrap.com/assets/js/html5shiv.js\"></script>
      <script src=\"http://getbootstrap.com/assets/js/respond.min.js\"></script>
    <![endif]-->"

因此，我应用的任何文本似乎都采用 Bootstrap CSS 格式。但是像 jumbotron 这样的组件没有格式化，尽管我注意到 bootstrap.min.css 文件中定义的 jumbotron class。

我是不是忽略了什么？

Answer 1

XPages 运行time 具有识别路径“/xsp/.ibmxspres”的代码，并且运行通过定义的所有 ResourceProvider 来查找从何处加载相关资源。在这种情况下，后续的“.extlib”标识它是扩展库插件的一部分。

OSGi 允许它从插件中提取相关资源。

对于标准的 Domino 表单，您没有这些，因此它不知道文件在哪里，如果知道也无法提取它们。如果您从 OpenNTF 下载 ExtLib，您可以使用您通常用来解压缩 zip 文件的任何东西解压缩相关插件 ("com.ibm.xsp.theme.bootstrap") - jar 是另一个类似于 zip 的存档。然后您可以提取 bootstrap 文件并相应地使用。将它们放在服务器上的 \domino\html 文件夹中可能是值得的，因为 NSF 可以容纳最大数量的设计元素。

Answer 2

我有一个启用了 Bootstrap 的 Domino 表单，它在 HTML 标题内容（有效）中使用以下内容：

"<meta http-equiv='X-UA-Compatible' content='IE=Edge'>
<meta charset=\"utf-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">

<!-- Bootstrap core CSS -->
<link rel=\"stylesheet\" type=\"text/css\" href=\"/xsp/.ibmxspres/.extlib/bootstrap/xsptheme/xsp.css\">
<link rel=\"stylesheet\" type=\"text/css\" href=\"/xsp/.ibmxspres/.extlib/bootstrap/bootstrap320/css/bootstrap.min.css\">
<link rel=\"stylesheet\" type=\"text/css\" href=\"/xsp/.ibmxspres/.extlib/bootstrap/xpages300.css\">

<script src='/xsp/.ibmxspres/.extlib/bootstrap/jquery/jquery-1.11.0.min.js'></script>
<script src='/xsp/.ibmxspres/.extlib/bootstrap/bootstrap320/js/bootstrap.min.js'></script>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src=\"https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.js\"></script>
  <script src=\"https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js\"></script>
<![endif]-->"

因此，将您的 CSS link href 更改为以 /xsp 开头（因此，删除 ../..）并查看它是否有效。

将 Bootstrap 添加到 Domino 表单

Adding Bootstrap to a Domino form

lotus-domino

xpages

twitter-bootstrap

xpages-extlib