AngularJS bootstrap ui - 如何更改css樣式？

我正在使用引導UI和AngularJS指令，我想更改默認樣式bootstrap適用於它的元素。AngularJS bootstrap ui - 如何更改css樣式？

我應該從模板中定位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元素樣式的最佳方法是什麼？

來源

2014-07-16 AngularInDepth.com

我沒有時間提供適當的，深思熟慮的答案。但是這裏有一個我爲了防止任何人發現它有用的Plunker：http://plnkr.co/edit/Bs9hCqCDkSmO4OtR716A?p=preview – stellarchariot

如果您在Bootstrap（bootstrap.css）之後包含css（site-specific.css），則可以通過重新定義它們來覆蓋規則。

例如，如果你這是怎麼包括CSS在<head>

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

你可以簡單的覆蓋面板（在你的站點specific.css文件）：

.panel { 
    //your code here 
}

，做在將來不打擾模板更改。在您使用特定版本時，更新不會影響您。他們正在生成一個新版本的新模板。

來源

2014-07-16 06:07:59

我使用的是'UI-Bootstrap 2.1.3版本'。我想按照我的需要來設計''。將CSS類應用於''不起作用。我該怎麼做？ –

AngularJS bootstrap ui - 如何更改css樣式？

回答

相關問題