AngularJS bootstrap ui - CSS 스타일을 변경하려면 어떻게해야합니까?

AngularJS 지시어와 함께 부트 스트랩 UI를 사용 중이고 해당 요소에 부트 스트랩이 적용되는 기본 스타일을 변경하고 싶습니다.AngularJS bootstrap ui - CSS 스타일을 변경하려면 어떻게해야합니까?

템플릿의 HTML 콘텐츠를 타겟팅해야합니까?

설명서에 제공된 예제에 따라 accordion을 사용하고 싶습니다. 나는 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>

당신이 볼 수 있듯이 :

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

를하지만 지시자는 다음과 같은 HTML로 바뀝니다 템플릿을 처리 할 때 , 그것은 그것을 상당히 의미있게 바꾼다. 패널 제목이 표시되는 방식을 변경하려면이 파일을 CSS 파일에 써야합니까?

div.panel {}

템플릿이 앞으로 변경되지 않기를 바랍니다.

지시어 템플릿에 의해 생성 된 HTML 요소의 스타일을 변경하는 가장 좋은 방법은 무엇입니까?

출처

2014-07-16 AngularInDepth.com

나는 적절하고 생각 깊은 대답을 할 시간이 없다. 그러나 여기 누군가가 유용하다고 생각한 경우에 대비 한 Plunker가 있습니다 : http://plnkr.co/edit/Bs9hCqCDkSmO4OtR716A?p=preview – stellarchariot

부트 스트랩 (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 version 2.1.3'을 사용하고 있습니다. 내 필요에 따라' '스타일을 지정하고 싶습니다. CSS 클래스를''에 적용하는 것은 작동하지 않습니다. 내가 어떻게 해? –

AngularJS bootstrap ui - CSS 스타일을 변경하려면 어떻게해야합니까?

답변

관련 문제