如何更改uib-accordion-heading的風格屬性

Question

該問題的解決方案已經存在/我有。但如果我更改資源文件版本（頭標記內）從ui-bootstrap-tpls-2.5.0.js到ui-bootstrap-tpls-1.2.1.js，它不能正常工作... 。因爲我已經在ui-bootstrap-tpls-1.2.1.js中完成了90％的工作，所以對我來說不可能包含ui-bootstrap-tpls-2.5.0.js（如果我更改這些，其他功能不起作用）。

1. Plunker demo which contains ui-bootstrap-tpls-2.5.0.js

2. Plunker demo which contains ui-bootstrap-tpls-1.2.1.js

共，我需要改變的_ UIB-手風琴式標題的顏色/背景顏色__使用UI的自舉-TPLS-1.2。 1.js，誰能幫我請....

HTML

<div ng-controller="AccordionDemoCtrl"> 
    <script type="text/ng-template" id="group-template.html"> 
     <div class="panel-heading" style="background-color:blue;"> 
      <h4 class="panel-title" style="color:red;"> 
       <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"> 
        <span uib-accordion-header ng-class="{'text-muted': isDisabled}"> 
         {{heading}} 
        </span> 
       </a> 
      </h4> 
     </div> 
     <div class="panel-collapse collapse" uib-collapse="!isOpen"> 
      <div class="panel-body" style="text-align: right" ng-transclude></div> 
     </div> 
    </script> 
    <uib-accordion close-others="oneAtATime"> 
     <div uib-accordion-group class="panel-default" heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled"> 
      This content is straight in the template. 
     </div> 
     <div uib-accordion-group class="panel-default" heading="{{group.title}}" ng-repeat="group in groups"> 
      {{group.content}} 
     </div> 
     <div uib-accordion-group class="panel-default" heading="Dynamic Body Content"> 
      <p>The body of the uib-accordion group grows to fit the contents</p> 
      <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button> 
      <div ng-repeat="item in items">{{item}}</div> 
     </div> 
     <div uib-accordion-group class="panel-info" heading="Custom template" template-url="group-template.html"> 
      Hello 
     </div> 
     <div uib-accordion-group class="panel-default" is-open="status.isCustomHeaderOpen" template-url="group-template.html"> 
      <uib-accordion-heading> 
       Custom template with custom header template <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isCustomHeaderOpen, 'glyphicon-chevron-right': !status.isCustomHeaderOpen}"></i> 
      </uib-accordion-heading> 
      World 
     </div> 
    </uib-accordion> 
</div> 

Answer 1

HTML

<div ng-controller="AccordionDemoCtrl"> 
<script type="text/ng-template" id="group-template.html"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"> 
       <span uib-accordion-header ng-class="{'text-muted': isDisabled}"> 
        {{heading}} 
       </span> 
      </a> 
     </h4> 
    </div> 
    <div class="panel-collapse collapse" uib-collapse="!isOpen"> 
     <div class="panel-body" style="text-align: right" ng-transclude></div> 
    </div> 
</script> 
<uib-accordion close-others="oneAtATime"> 
    <div uib-accordion-group class="panel-default" heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled"> 
     This content is straight in the template. 
    </div> 
    <div uib-accordion-group class="panel-default" heading="{{group.title}}" ng-repeat="group in groups"> 
     {{group.content}} 
    </div> 
    <div uib-accordion-group class="panel-default" heading="Dynamic Body Content"> 
     <p>The body of the uib-accordion group grows to fit the contents</p> 
     <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button> 
     <div ng-repeat="item in items">{{item}}</div> 
    </div> 
    <div uib-accordion-group class="panel-info" heading="Custom template" template-url="group-template.html"> 
     Hello 
    </div> 
    <div uib-accordion-group class="panel-default" is-open="status.isCustomHeaderOpen" template-url="group-template.html"> 
     <uib-accordion-heading> 
      Custom template with custom header template <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isCustomHeaderOpen, 'glyphicon-chevron-right': !status.isCustomHeaderOpen}"></i> 
     </uib-accordion-heading> 
     World 
    </div> 
</uib-accordion> 

CSS

.panel-info .panel-heading { background: blue; color: red; }

如果要應用自定義風格的FO R默認值，然後使用下面的CSS

.panel-default .panel-heading { /* Css Properties */ }

Answer 2

你可以用這個css規則覆蓋JavaScript文件生成的樣式來解決問題。

.panel-default > .panel-heading { 
    color: #f00 !important; 
    background-color: #00f !important; 
}