Php 使用Yii引导了解HtmlOperation

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

我试图理解

htmlOptions

，它可以用来覆盖小部件的默认外观。通过阅读，我了解到

htmloptions

不能随机给定，应该根据小部件的类型作为数组或层次数据给定，但当我尝试实现相同的功能时，它无法正常工作

例如，我试图为“英雄单元”容器自定义“标题字体大小”和“背景色”。为此，我修改了“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覆盖，但它没有发生。任何提示都会有帮助……谢谢

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

---

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

正如Skatox所提到的，引导窗口小部件似乎应用了一些默认类。我会坚持使用您已有的代码，然后修改CSS以使用表单选择器（注意类之间缺少空格）：

或者，如果您有两个CSS项（听起来像），例如：

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

---

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

对于OP来说，这可能有点晚了，但是我会在这里发布给其他可能对Yii引导设置的默认类感到疑惑的人

Yii引导始终设置一些默认类，因为引导本身需要它们。通过这种方式，我们可以确保它们始终适用

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

---

我希望这能澄清问题。

使用chrome中的开发者工具查看正在使用的css文件，并检查该文件是否具有hero-unit1类。如果它没有转到项目中的资产文件夹并清空它。这将导致yii为widgetsHi Orlyme重新创建这些资产…感谢您指出…但我使用chrome开发者工具查看了详细信息…我发现css文件确实有“hero-unit1”类。事实上，我忘记了上面提到的…如果我在“英雄单位”类中做了更改，它们确实反映了…但我不想这样做，因为我可能在不同的地方使用相同的“英雄单位”类，设置略有不同。嗨，斯卡托克斯…对不起…我不明白你的解释。我不想移除任何东西。我只是想再添加一个类--“hero-unit1”，这样默认行为保持不变，同时我还可以在我的末尾做更多的更改。嗯，如果你想添加类，就这样做：'htmlOptions'=>array（'class'=>hero-unit1 hero unit'）。我不相信顺序会有影响，因为大多数小部件都会用参数替换class属性。这就是你想要的吗？事实上……我不想添加类……我想覆盖默认值……但我认为在这里，组件总是读取默认配置……与ernie讨论后得出的唯一方法是在css文件中对样式进行适当排序！！嗨，斯卡托克斯……我又问了一个关于yii引导的问题：如果你也能分享一些想法，那就非常感谢了！嗨，厄尼……谢谢你的回复。在您提到的两种情况中，后一种对我有效……但第一种不起作用……这意味着两种样式都得到了应用（并且按照样式表中提到的顺序）。还有，现在我明白斯卡托在说什么了。谢谢你的帮助，但我仍然有兴趣让第一个解决方案的工作以及，因为它看起来更干净。请您分享更多信息。对于第一个，将同时应用.hero单元和多类选择器.hero-unit1.hero-unit。验证CSS加载的顺序，并确保组合的CSS最后一个加载，你超越了你所需要的一切。好吧……因此，第一种方法实际上也要求事情按照特定的顺序进行……然后它与第二种方法相同……对吗？……我把它放在第一位……所以之前它对我不起作用。我有点困惑，这两个标签--“.hero-unit1.hero unit”和仅“.hero-unit1”之间的区别是什么。为什么我应该使用方法1或方法2……但非常感谢您的帮助和澄清！！阿克，我之前的评论是错误的。对于组合方法，只有组合选择器适用，因为它具有更高的特异性。我猜这两个类之间有一个句点，或者说.hero单元css实际上使用了一个更具体的选择器。是的……甚至我也这么认为，但是如果我把它放在.hero单元标记之前，它就不起作用了。如果我把它放在后面

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

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