AngularJS bootstrap ui - jak zmienić style CSS?

Używam interfejsu użytkownika bootstrap z dyrektywami AngularJS i chcę zmienić domyślne style ładowania dla tych elementów.AngularJS bootstrap ui - jak zmienić style CSS?

Czy należy kierować zawartość HTML z szablonu?

Na podstawie przykładów podanych w dokumentacji chcę użyć accordion.

Kiedy zdefiniować go w HTML, posiada następującą strukturę:

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

Ale kiedy dyrektywa przetwarza szablon to zamienia go w następujący kod 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>

Jak widać , zmienia to dość znacząco. Jeśli chciałbym zmienić sposób wyświetlania tytułu panelu, czy powinienem zapisać to w moich plikach CSS?

div.panel {}

i mamy nadzieję, że szablon nie zmieni się w przyszłości?

Jakie jest najlepsze podejście do zmiany stylów elementów HTML generowanych przez szablony dyrektyw?

Źródło

2014-07-16 AngularInDepth.com

Nie mam dość czasu, aby dostarczyć właściwej, przemyślanej odpowiedzi. Ale tu jest Plunker zrobiłem w przypadku gdy ktoś uzna to za użyteczne: http://plnkr.co/edit/Bs9hCqCDkSmO4OtR716A?p=preview – stellarchariot

Jeśli zawierać css (site-specific.css) po Bootstrap'S (bootstrap.css), można zastąpić przez ich redefinicji zasad.

Na przykład, jeśli jest to w jaki sposób to CSS w swojej <head>

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

można po prostu zastąpić panel (w pliku site-specific.css):

.panel { 
    //your code here 
}

I zrobić nie przejmuj się zmianą szablonu w przyszłości. Podczas korzystania z określonej wersji aktualizacje nie będą miały wpływu na Ciebie. Generują nowy szablon z nową nazwą wersji.

Źródło

2014-07-16 06:07:59

używam 'UI-Bootstrap wersję 2.1.3'. Chcę stylizować '' zgodnie z moimi potrzebami. Stosując klas CSS do '' nie działa. Jak mogę to zrobić? –

AngularJS bootstrap ui - jak zmienić style CSS?

Odpowiedz

Powiązane problemy