AngularJS bootstrap ui - come posso cambiare gli stili css?

Sto usando l'interfaccia utente di bootstrap con le direttive AngularJS e voglio cambiare gli stili di default che bootstrap applica ai suoi elementi.AngularJS bootstrap ui - come posso cambiare gli stili css?

Devo indirizzare i contenuti HTML dal modello?

Sulla base degli esempi forniti nella documentazione, desidero utilizzare accordion.

Quando mi definisco in HTML, ha la seguente struttura:

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

Ma quando la direttiva elabora il modello si trasforma nel seguente codice 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>

Come si può vedere , lo cambia in modo abbastanza significativo. Se volessi cambiare il modo in cui viene visualizzato il titolo del pannello, dovrei scrivere questo nei miei file css?

div.panel {}

e sperare che il modello non cambi in futuro?

Qual è l'approccio migliore per cambiare gli stili per gli elementi HTML generati dai modelli di una direttiva?

fonte

2014-07-16 AngularInDepth.com

Non ho abbastanza tempo per fornire una risposta adeguata e ponderata. Ma ecco un Plunker che ho fatto nel caso qualcuno lo trovasse utile: http://plnkr.co/edit/Bs9hCqCDkSmO4OtR716A?p=preview – stellarchariot

Se si include il css (site-specific.css) dopo Bootstrap (bootstrap.css), è possibile sovrascrivere le regole ridefinendole.

Per esempio, se questo è il modo di includere nel vostro CSS <head>

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

Si può semplicemente ignorare il pannello (nel file site-specific.css):

.panel { 
    //your code here 
}

E fare non preoccuparti di cambiare il modello in futuro. Quando si utilizza una versione specifica, gli aggiornamenti non avranno effetto. Stanno generando un nuovo modello con un nuovo nome di versione.

fonte

2014-07-16 06:07:59

Sto usando 'UI-Bootstrap versione 2.1.3'. Voglio modellare '' secondo i miei bisogni. L'applicazione delle classi CSS a '' non funziona. Come posso farlo? –

AngularJS bootstrap ui - come posso cambiare gli stili css?

risposta

Problemi correlati