爲什麼是用戶代理的樣式表重寫我的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」，而不是和它的工作：