是否可以更改ExtLib中应用程序布局控件中设置的预定义Bootstrap类

Question

我在extlib中使用响应式Bootstrap主题和应用程序布局控件，并且无法找到有关是否可以更改Bootstrap预定义类的任何文档。

在以下示例中，有一个标题栏，其中包含使用预定义Bootstrap类“nav nav-tabs”的制表符 在我的情况下，我不想要“nav-tabs”类，而是我想要“nav-pills”类，但我发现没有办法使用源编辑器更改它，我知道我可以使用客户端更改类侧脚本，但我希望有一个服务器端方法来控制它。

<xe:this.configuration>
        <xe:bootstrapResponsiveConfiguration legal="Copyright " placeBar="true" banner="true" fixedNavbar="fixed-bottom" footer="true" invertedNavbar="true" placeBarName="#{javascript:compositeData.Title}" rightColumnLabel="RightColumnLabel" titleBar="true" defaultNavigationPath="/tab1/link1" productLogo="/logo.gif" pageWidth="full">
            <xe:this.titleBarTabs>
                    <xe:pageTreeNode label="page1" page="/page1.xsp"></xe:pageTreeNode>
                    <xe:pageTreeNode label="page2" page="/page2.xsp"></xe:pageTreeNode>
                    <xe:pageTreeNode label="page3" page="/page3.xsp"></xe:pageTreeNode>
            </xe:this.titleBarTabs>
        </xe:bootstrapResponsiveConfiguration>
</xe:this.configuration>

我试图添加这样的类，但它对html

没有任何作用

<xe:this.titleBarTabs styleClass="nav nav-pills">  

Answer 1

在com.ibm.xsp.theme.bootstrap插件的TitleBarTabsRenderer中设置了特定的bootstrap CSS类。检查源代码here。 ResponsiveAppLayoutRenderer使用该渲染器来渲染标签。

正如目前设置的那样，做你想做的最好的选择就是按照你的说法使用CSJS，或扩展和覆盖TitleBarTabsRenderer和ResponsiveAppLayoutRenderer类。这不是最简单的方法，所以也许这可以转化为SPR /增强请求，并考虑将来的extlib版本。

Answer 2

我发现我可以通过创建自己的主题轻松覆盖由boostrap主题设置的nav-tabs类，如下所示：

<theme extends="Bootstrap3.2.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="platform:/plugin/com.ibm.designer.domino.stylekits/schema/stylekit.xsd" >
<control>
    <name>TabbedPanel</name>
    <property>
        <name>styleClass</name>
        <value>nav nav-pills</value> 
    </property>
</control>