Question

我正在使用Yii-bootstrap小部件来创建我的网站。

我试图理解htmlOptions，它可以用来覆盖小部件的默认外观。根据我的阅读，我理解htmloptions不能随机给出，并且应该根据窗口小部件的类型以数组或分层数据的形式给出，但是当我尝试实现它时，它无法正常工作。

例如，我正在尝试为“Hero-unit”包装器自定义“标题字体大小”和“背景颜色”。为此，我修改了“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来覆盖，但它没有发生。任何指针肯定会有所帮助.....谢谢!!

Answer 1

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

所以你不应该删除它，如果你想做别的事情，那么玩你的班级和默认的组合。

Answer 2

正如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之前加载，这就是我建议多类选择器的原因。

Answer 3

对于OP来说这可能有点晚了，但是对于其他可能想知道由Yii-Bootstrap设置的默认类的人来说，我会发帖。

Yii-Bootstrap总是设置一些默认类，因为bootstrap本身需要它们。这样我们就可以确保始终应用它们。

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

我希望这能解决问题。

用Yii-bootstrap理解htmlOptions

3 个答案: