Question

我想改变下拉按钮的颜色，所以让它像＆＃34; btn btn-primary＆＃34;。但它也改变了所有菜单项的颜色，并且它也正确地移动了它们。这是原始下拉列表的样子：

然后我就这样设计：

        <xp_1:dropDownButton id="dropDownButton1">
            <xp_1:this.treeNodes>
                <xp_1:basicContainerNode label="Open"
                    styleClass="btn btn-primary">
                    <xp_1:this.children>
                        <xp_1:basicLeafNode label="item1">
                        </xp_1:basicLeafNode>
                        <xp_1:basicLeafNode label="item2">
                        </xp_1:basicLeafNode>
                        <xp_1:basicLeafNode label="item3">
                        </xp_1:basicLeafNode>
                    </xp_1:this.children>
                </xp_1:basicContainerNode>
            </xp_1:this.treeNodes>
        </xp_1:dropDownButton>

然后我得到了：

那么我如何仅设置OPEN下拉按钮的样式，但将菜单项保持为默认样式，因此它位于按钮下方但不在右侧。我的造型错了，所以我也无法弄清楚如何添加按钮图标。

HTML生成：

<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.mini/css/@B3r&amp;@B3o&amp;@B3m&amp;@B3p&amp;@B3s.css">
<script type="text/javascript">var dojoConfig = {locale: 'en-us'};</script>
<script type="text/javascript" src="/xsp/.ibmxspres/dojoroot-1.9.7/dojo/dojo.js"></script>
<script type="text/javascript" src="/xsp/.ibmxspres/.mini/dojo/.en-us/@Iq.js"></script>
<script type="text/javascript">dojo.require("ibm.xsp.widget.layout.xspClientDojo")</script>
<script type="text/javascript" src="/xsp/.ibmxspres/.extlib/responsive/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/xsp/.ibmxspres/.extlib/responsive/bootstrap3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/xsp/.ibmxspres/.extlib/responsive/xpages/js/xsp-mixin.js"></script>
</head>
<body class="xsp dbootstrap bootstrap-theme">
<form id="view:_id1" method="post" action="/t_dir/myDb.nsf/TEST.xsp?bpp=1" enctype="multipart/form-data">
<div class="btn-group"><div class="btn-group"><button type="button" id="view:_id1:dropDownButton1_ab_0" data-toggle="dropdown" class="btn btn-primary btn btn-default dropdown-toggle">Open <span class="caret"></span></button>
<ul class="btn btn-primary dropdown-menu">
<li class="menu-item"><a>item1</a></li>
<li class="menu-item"><a>item2</a></li>
<li class="menu-item"><a>item3</a></li>
</ul>
</div>
</div>

<input type="hidden" name="$$viewid" id="view:_id1__VUID" value="!710qd094s9ihvkilfn1r22sda!">
<input type="hidden" name="$$xspsubmitid">
<input type="hidden" name="$$xspexecid">
<input type="hidden" name="$$xspsubmitvalue">
<input type="hidden" name="$$xspsubmitscroll">
<input type="hidden" name="view:_id1" value="view:_id1"></form>
</body>
</html>

Answer 1

为您的商品创建一个具有背景色的特定类？就像http://www.w3schools.com/css/css_dropdowns.asp

一样

如何设计dropDownButton样式？

1 个答案: