9

I am using bootstrap UI with AngularJS directives and I want to change the default styles bootstrap applies for its elements.

Should I target the HTML contents from the template?

Based on the examples given in the documentation I want to use the accordion.

When I define it in HTML, it has the following structure:

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

But when the directive processes the template it turns it into the following 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>

As you can see, it changes it quite significantly. If I wanted to change how the panel title is displayed, should I write this in my css files?

div.panel {}

and hope that the template doesn't change in the future?

What is the best approach to changing styles for HTML elements generated by a directive's templates?

4

1 回答 1

6

如果您在 Bootstrap (bootstrap.css) 之后包含您的 css (site-specific.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 回答