1

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

Yii 框架：引导扩展

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 来覆盖它，但它没有发生。任何指针肯定会有所帮助.....谢谢！

4

3 回答 3

1

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

因此，您不应该删除它，如果您想做其他事情，请结合使用您的班级和默认班级。

于 2012-07-11T12:48:12.003 回答
1

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

于 2012-07-11T16:40:02.593 回答
1

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

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

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

我希望这能解决问题。

于 2012-11-14T12:19:34.980 回答