1

ウェブサイトの作成に Yii-bootstrap ウィジェットを使用しています。

Yii フレームワーク: ブートストラップ拡張機能

Yii ブートストラップのデモ

htmlOptionsウィジェットのデフォルトのルック アンド フィールをオーバーライドするために使用できるを理解しようとしています。私が読んだことからhtmloptions、ウィジェットのタイプに応じて、ランダムに指定することはできず、配列または階層データとして指定する必要があることがわかりましたが、同じものを実装しようとすると、正しく機能しません。

たとえば、「ヒーローユニット」コンテナの「見出しのフォント サイズ」と「背景色」をカスタマイズしようとしています。そのために、「css」ファイルを修正して、「hero-unit1」というスタイル クラスをもう 1 つ追加しました (デフォルトのスタイル クラスは「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

これはおそらく OP には少し遅れていますが、Yii-Bootstrap によって設定されたデフォルトのクラスについて疑問に思っている可能性のある他の人のためにここに投稿します。

Yii-Bootstrap は常にいくつかのデフォルト クラスを設定します。これは、ブートストラップ自体がそれらを必要とするためです。このようにして、それらが常に適用されるようにすることができます。

デフォルトのクラスを削除する代わりに、独自のスタイルシートでそれらをオーバーライドすることになっています。

これで問題が解決することを願っています。

于 2012-11-14T12:19:34.980 に答える
1

Skatox が述べたように、Bootstrap ウィジェットはいくつかのデフォルト クラスを適用しているようです。私はあなたが持っているコードに固執し、フォームのセレクターを使用するように CSS を変更します (クラス間にスペースがないことに注意してください)。

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

または、2 つの 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 に答える