Twitter bootstrap 在GWT引导中,如何为同一引导元素的不同实例分配不同的样式?

Twitter bootstrap 在GWT引导中,如何为同一引导元素的不同实例分配不同的样式?,twitter-bootstrap,gwt,Twitter Bootstrap,Gwt,对于GWT引导,我有如下定义: 我的头球 我的菜单1 我的菜单2 在同一个应用程序中,我有两种类似的组件,(1)一个作为左菜单放置在白色面板上,(2)另一个作为底部菜单放置在深绿色面板上。两者都是导航列表 因此,我有一个问题,就是给同一引导元素的不同实例分配不同的颜色。我想我可以直接在UiBinder中完成,但在尝试了所有操作后,我没有找到正确的设置。我需要在UiBinder中覆盖的引导选择器是(来自较少的nav文件): .nav list>li>a{ 填充:3x15px; 颜色:#FF00

对于GWT引导,我有如下定义:


我的头球
我的菜单1
我的菜单2
在同一个应用程序中,我有两种类似的组件,(1)一个作为左菜单放置在白色面板上,(2)另一个作为底部菜单放置在深绿色面板上。两者都是导航列表

因此,我有一个问题,就是给同一引导元素的不同实例分配不同的颜色。我想我可以直接在UiBinder中完成,但在尝试了所有操作后,我没有找到正确的设置。我需要在UiBinder中覆盖的引导选择器是(来自较少的nav文件):

.nav list>li>a{
填充:3x15px;

颜色:#FF0000;您需要做的就是添加自定义样式名称,就像您通常对任何样式所做的那样


.myCustomStyle>li>a{
颜色:你的颜色在这里;
}
...
我的头球
我的菜单1
我的菜单2

上面的例子直接在UiBinder文件中有样式。您也可以使用它。这样,您可以在应用程序中不同位置的许多小部件上使用相同的样式。

通过结合这些想法,我得到了一个干净的解决方案。解决方案只是为嵌套的锚元素使用正确的选择器,但分配给父元素因为UiBinder中没有锚,即:

<ui:style>
    .myCustomStyle > li > a {               (<---- see this selector)
        color: YOUR COLOR HERE;
    }
</ui:style>

...

<b:NavList addStyleNames="{style.myCustomStyle}">     (<---- see applied to parent and addStyleNames)
    <b:NavHeader>My Header</b:NavHeader>
    <b:NavLink href="#menu1:">My Menu1</b:NavLink>
    <b:NavLink href="#menu2:" active="true">My Menu2</b:NavLink>
</b:NavList>


.myCustomStyle>li>a{(谢谢您的回复。是的,这就是我要找的那种设置。已尝试并可以工作,但是在Bootstrap=中缺少作为公共列表呈现的.nav list类(没有引导样式)。已尝试改为AddStyleName=“{style.myCustomStyle}”添加!对CSS也很重要,但是,然后,nothing Actions=获取引导样式。一个肮脏的hack看起来重复完整的引导类,但是选择器中隐含了更多元素。nav list>li>a(实际上,负责此颜色的是嵌套锚)。在Java中这样做将是一个丑陋的修复。有没有类似的经验?Tkxyujuuuu,得到了干净的修复。上面有评论。你可以尝试使用。