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

Question

我正在使用帶有AngularJS指令的bootstrap UI，我想更改默認樣式bootstrap適用於其元素。

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

Answer 1

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

例如，如果您在<head>包含CSS

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

您可以簡單地覆蓋面板（在site-specific.css文件中）：

.panel {
    //your code here
}

並且不要在將來打擾模板更改。 當您使用特定版本時，更新不會對您產生影響。 他們正在生成一個帶有新版本名稱的新模板。

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

問題描述

1 個解決方案

解決方案1
6 2014-07-16 06:07:59

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

問題描述

1 個解決方案

解決方案1 6 2014-07-16 06:07:59

解決方案1
6 2014-07-16 06:07:59