我正在使用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引导程序总是设置一些默认类,因为引导程序本身需要它们。通过这种方式,我们可以确保它们始终得到应用。
您应该在自己的样式表中覆盖它们,而不是删除默认类。
我希望这能解决问题。