我正在使用带有 AngularJS 指令的 bootstrap UI，我想更改 bootstrap 应用于其元素的默认样式。
我应该定位模板中的 HTML 内容吗？
根据文档中给出的示例，我想使用 accordion .
当我在 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 元素样式的最佳方法是什么？
最佳答案
如果您在 Bootstrap 的 (bootstrap.css) 之后包含您的 css (site-specific.css)，您可以通过重新定义它们来覆盖规则。
例如，如果这是您在 <head> 中包含 CSS 的方式
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />
您可以简单地覆盖面板(在您的站点特定的 .css 文件中):
.panel {
//your code here
}
并且以后不用再费心修改模板了。当您使用特定版本时，更新不会影响您。他们正在生成一个具有新版本名称的新模板。
关于css - AngularJS bootstrap ui - 如何更改 css 样式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24773025/