Question

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

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

我的xPage没有响应，我不确定为什么会这样。我查看了所有网站上的文档和其他问题，我有几个问题： 1.如果我的应用程序布局上的配置是响应式引导程序配置，而我的应用程序主题 Bootstrap4 并不是我所需要的全部内容？
2.我尝试将 styleClass =＆＃34;表格响应＆＃34; 放在每个表格周围的div中。我还需要使用媒体查询吗？如果是这样，为什么引导配置被称为＆＃34;响应＆＃34;？

以下是我的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，不确定是否重要。 applicationlayout本身将是响应式的，但是你可以为行，col-spans（或任何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>

让我的问卷回应

3 个答案: