为什么是用户代理的样式表重写我的CSS

Question

[见下面溶液]

我无法控制按钮样式中，其中我延伸的引导主题一个XPage应用。

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

在Chrome浏览器开发工具检查揭示

，由于某种原因类 “BTN BTN-默认” 已添加到类。但是，当我试图追查在灰度是来自真正的问题面：

用户代理???

这是怎么回事？

<?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> 

SOLUTION：

所有的答案是好的，帮我拿出最终解决方案。

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

我不知道secondary只是bootstrap 4。我用克努特推测的3，我不想冒险到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

引导3主题使用 “CONCAT” 模式设置的styleClass XPages中controlls。你可以在下面看到它。

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

这意味着它会一直增加BTN按钮的BTN-默认到styleClass属性。要解决此问题，您可以创建自己的ThemeId并将其设置为Buttons。

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

Answer 2

当你为自己设定使用的styleClass参数，CSS类也许如果你阻止主题添加通过将disableTheme =“true”添加到按钮可能会有所帮助。

Answer 3

类btn-secondary不可用在引导3

你可能扩展主题为“Bootstrap3”或“Bootstrap3_flat”。
切换到主题为 “Bootstrap4”，而不是和它的工作：