9

AngularJS ディレクティブでブートストラップ UI を使用しており、その要素に適用されるデフォルト スタイルのブートストラップを変更したいと考えています。

テンプレートから HTML コンテンツをターゲットにする必要がありますか?

ドキュメントに記載されている例に基づいて、アコーディオンを使用したいと考えています。

HTMLで定義すると、次の構造になります。

<accordion>
    <accordion-group heading="my heading">
      content here
    </accordion-group>

しかし、ディレクティブがテンプレートを処理すると、次の HTML に変換されます。

<accordion close-others="oneAtATime"><div class="panel-group" ng-transclude="">
    <div class="panel panel-default ng-isolate-scope" heading="my heading">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading">
                    <span ng-class="{'text-muted': isDisabled}" class="ng-binding">content here</span>
                </a>
            </h4>
        </div>
        <div class="panel-collapse collapse" collapse="!isOpen" style="height: 0px;">
        <div class="panel-body" ng-transclude=""><span class="ng-scope">some content here</span></div>
    </div>

ご覧のとおり、かなり大きく変わります。パネル タイトルの表示方法を変更したい場合、css ファイルに記述する必要がありますか?

div.panel {}

テンプレートが将来変更されないことを願っていますか?

ディレクティブのテンプレートによって生成された HTML 要素のスタイルを変更する最良の方法は何ですか?

4

1 に答える 1

6

Bootstrap の (bootstrap.css) の後に CSS (site-specific.css) を含めると、ルールを再定義してオーバーライドできます。

たとえば、このように CSS を<head>

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />

パネルをオーバーライドするだけです (site-specific.css ファイル内):

.panel {
    //your code here
}

また、将来的にテンプレートを変更する必要はありません。特定のバージョンを使用しているため、更新は影響しません。新しいバージョン名で新しいテンプレートを生成しています。

于 2014-07-16T06:07:59.403 に答える