使用Yii引导程序了解htmlOptions


understanding htmlOptions with Yii-bootstrap

我正在使用Yii引导程序小部件来创建我的网站。

Yii框架:引导程序扩展

Yii引导程序演示

我正在尝试理解htmlOptions,它可以用来覆盖小部件的默认外观。从我读到的内容中,我了解到htmloptions不能随机给定,应该根据小部件的类型以数组或层次数据的形式给定,但当我尝试实现相同的数据时,它无法正常工作。

例如,我正在尝试为"英雄单元"容器自定义"标题字体大小"answers"背景颜色"。为此,我修改了"css"文件,添加了一个名为"hero-unit1"的样式类(默认样式类是"hero-unit")。我保留了剩下的东西。

在代码中,我实现了如下小部件:

        <?php $this->beginWidget('bootstrap.widgets.BootHero', array(
            'heading' => "Test Header !!",
            'htmlOptions' => array('class' => 'hero-unit1'),
        )); ?>
           <p>Test content. Try it now.</p>
           <p><?php $this->widget('bootstrap.widgets.BootButton', array(
                'type'=>'primary',
                'size'=>'large',
                'label'=>'Action',
            )); ?>
           </p>
        <?php $this->endWidget(); ?>

然而,当我看到为此生成的相应"html代码"时,我会看到以下内容:

<div class="hero-unit1 hero-unit"><h1> Test Header !!</h1> 
   <p>Test content. Try it now.</p>
   <p><a class="btn btn-primary btn-large">Action</a></p>
</div>

正如我所看到的,罪魁祸首是class="hero-unit1-hero-unit"部分,即类设置不正确。我认为应该通过提供htmlOptions来覆盖它,但它并没有发生。任何建议都会有所帮助。。。。。谢谢

正如Skatox所提到的,Bootstrap小部件似乎应用了一些默认类。我会坚持使用你的代码,然后修改你的CSS以使用表单的选择器(注意类之间缺乏空间):

.hero-unit1.hero-unit{
    //css code here
}

或者,如果你有两个CSS项(听起来就是这样),例如:

.hero-unit{
    //css code here
    color: yellow;
}
.hero-unit1{
    //more css code here
    color: red;
}

这两者都应该应用于具有多个类的项。如果存在重叠元素,最后加载的元素将优先加载,即在上面的示例中,颜色将是红色,而不是黄色。

根据您修改的CSS文件,它可能会在Bootstrap CSS之前加载,这就是我建议使用多类选择器的原因。

这取决于开发人员如何创建小部件的htmlOptions,在Bootstrap小部件上有一些默认类,因为它们的外观和功能取决于它们:CSS类、Javascript选择器等。

所以你不应该删除它,如果你想做其他事情,那么就使用你的类和默认类的组合。

这对OP来说可能有点晚了,但我会在这里发布给其他可能想知道Yii Bootstrap设置的默认类的人。

Yii引导程序总是设置一些默认类,因为引导程序本身需要它们。通过这种方式,我们可以确保它们始终得到应用。

您应该在自己的样式表中覆盖它们,而不是删除默认类。

我希望这能解决问题。