Question

[见下面的解决方案]

我无法控制Xpage应用程序中按钮的样式，我在其中扩展了Bootstrap主题。

我想要一个透明按钮。我得到的就是这个。

在Chrome开发工具中查看

由于某种原因，类“btn btn-default”已被添加到类中。但是，当我试图追踪灰色的来源时，真正的问题浮出水面：

用户代理???

发生了什么????

<?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:button
        value="Example"
        id="btn"
        styleClass="btn btn-secondary">
    </xp:button>
    <button class="btn btn-secondary">Example</button>
</xp:view>

解决方案：

所有答案都很好，帮助我找到了最终解决方案。

首先，我确实使用了disableTheme属性来阻止Xpages自动添加btn btn-default类。

我不知道二级只是bootstrap 4。我正在使用3作为Knut推测，我还不想冒险进入4。

这是我的按钮的CSS：

.btn.btn-bryan {padding: 0px; margin: 0px;color: #3379b7;background-color: transparent;text-align: left;}

按钮代码：

<xp:button
    value="#{entry2.mnuItmNme}"
    id="button2"
    type="button"
    styleClass="btn btn-bryan btn-block"
    disableTheme="true">
     <xp:span
       style="margin-right:10px;color:#337ab7"
       styleClass="glyphicon glyphicon-#{entry2.mnuIcon}">
     </xp:span>
     <xp:eventHandler
        event="onclick"
        submit="true"
        refreshMode="partial"
        refreshId="dynamicCustomControl"
        onComplete="XSP.partialRefreshGet('#       {id:dynamicCustomControl}')">
        <xp:this.action><![CDATA[#{javascript:var x = entry2.mnuItmTrg;
        viewScope.controlName = x;
        getComponent('dynamicCustomControl').show(null)}]]>               </xp:this.action>
</xp:eventHandler>
</xp:button>

Answer 1

当您使用styleClass参数自己设置css类时，如果您通过向按钮添加disableTheme =“true”来阻止主题向您的按钮添加类可能会有所帮助。

Answer 2

引导程序3中没有类btn-secondary。

你可能会扩展主题＆＃34; Bootstrap3＆＃34;或＆＃34; Bootstrap3_flat＆＃34;。
切换到主题＆＃34; Bootstrap4 ＆＃34;相反，它会工作：

Answer 3

Bootstrap 3主题使用＆＃34; concat＆＃34;用于在XPage控件中设置styleClass的模式。你可以在下面看到它。

<!-- XPages Buttons -->
    <control>
        <name>Button</name>
        <property mode="concat">
            <name>styleClass</name>
            <value>btn btn-default</value>
        </property>
    </control>

这意味着它总是会将 btn btn-default 添加到Button的styleClass属性中。要解决此问题，您可以创建自己的ThemeId并在按钮中进行设置。

   <control>
        <name>Button1</name>
        <property mode="override">
            <name>styleClass</name>
            <value>myButton</value>
        </property>
    </control>

为什么用户代理样式表覆盖了我的CSS

3 个答案: