使我的问卷具有响应性

Question

我已经为 xPages 编程了一段时间，但这是我第一次使用 Bootstrap 并使 xPage 具有响应性。

我将 Bootstrap 4 与 Domino 9.0.1 和 ExtLib Release 9.0.1 (20160428) 一起使用。我的 xPage 包含一个自定义控件，其中包含一个包含 3 个表的应用程序布局，其中 1 个有 4 列（需要响应）。

我的 xPage 没有响应，我不确定这是为什么。我查看了所有网站上的文档和其他问题，我有几个问题： 1. 如果我的应用布局上的配置是Responsive Bootstrap Configuration，而我的应用主题是Bootstrap4，这难道不是我所需要的吗？
2. 我尝试将 styleClass="table-responsive" 放在每个表格周围的 div 中。我还需要使用媒体查询吗？如果是这样，为什么引导配置称为“响应式”？

这是我的 xsp 属性中的内容：

xsp.ajax.renderwholetree=false
xsp.client.script.radioCheckbox.ie.onchange.trigger=early-onclick
xsp.persistence.mode=fileex
xsp.resources.aggregate=true
xsp.theme=Bootstrap4
xsp.error.page.default=true
xsp.library.depends=com.ibm.xsp.extlib.library,com.ibm.xsp.extlibx.library
org.openntf.domino.xsp=godmode,marcel,khan,bubbleExceptions
xsp.min.version=9.0.1
xsp.compress.mode=gzip-nolength
xsp.html.page.encoding=utf-8
xsp.html.doctype=html
xsp.html.meta.contenttype=true

这是我的自定义控件中的一部分（减去 4 列表中的标签和字段）：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xe="http://www.ibm.com/xsp/coreex"
    >
    <xp:this.data>
        <xp:dominoDocument
            var="document1"
            formName="ApplicationForm">
        </xp:dominoDocument>
    </xp:this.data>
        <div class="table-responsive">
    <xp:table
        border="3"
        cellspacing="0"
        cellpadding="0">
        <xp:tr>
            <xp:td>
                <xe:applicationLayout id="applicationLayout1">
                    <xe:this.configuration>
                        <xe:bootstrapResponsiveConfiguration
                            banner="false"
                            legal="false">
                        </xe:bootstrapResponsiveConfiguration>
                    </xe:this.configuration>
                    <xp:this.facets>
                        <xp:div
                            xp:key="MastHeader"
                            align="center"
                            styleClass="table-responsive">
                            <xp:table
                                border="0"
                                cellspacing="0"
                                cellpadding="0"
                                styleClass="table-responsive">
                                <xp:tr>
                                    <xp:td>

BLA BLA BLA

<xp:div
    align="center"
    styleClass="table-responsive">
    <xp:table
    border="0"
    cellspacing="0"
    cellpadding="0">
      <xp:tr>
        <xp:td>
           <xp:div xp:key="Questionnaire">
             <div class="table-responsive">
                <xp:callback
                    facetName="facet_1"
                    id="callback1">
                </xp:callback>
                    <xp:table
                        border="0"
                        cellspacing="0"
                        cellpadding="0"
                        styleClass="table">
                    <xp:tr>
                        <xp:td style="width:10%">                               
                        </xp:td>
                        <xp:td style="width:40.0%">         
                        </xp:td>
                        <xp:td style="width:10%">
                        </xp:td>
                        <xp:td>                 
                        </xp:td>
                        </xp:tr>
                    </xp:table>
                </div>
            </xp:div>
        </xp:panel>
    </xe:applicationLayout>
        </xp:td>
        </xp:tr>
    </xp:table>
    </div>
</xp:view>

任何澄清将不胜感激。

Answer 1

正如 Aquila 所说，您还需要为表格设置样式。

我也总是为行添加 div，不确定这是否重要。应用程序布局本身将是响应式的，但您可以为行、列跨度（或任何 BS 4 使用的）等提供所有 css 和 html。

无论如何，我通常从不使用 appLayout...导航栏运行良好。了解正确的 html 和 css 并确保您的页面输出正确的引导页面应该具有的内容。

Answer 2

我不确定 ExtLib 17 是为 Bootstrap 4 设计的。9.0.1 FP8（相当于 ExtLib 17）仅提供 Bootstrap 3.3.7。 Bootstrap 不仅仅是样式，它也是 HTML 布局，所以即使应用 CSS 也可能无法按预期工作，因为您可能需要不同的渲染器来发出不同的 HTML。

Answer 3

您可以在主题中设置一些内容，而不是修改所有现有表格以使用引导样式等。例如，我使用下面的方法让我的所有表格都使用行悬停/背景颜色更改。

<control>
    <name>DataTable.ViewPanel</name>
    <property>
        <name>dataTableStyleClass</name>
        <value>table table-hover</value>
    </property>
</control>