Bootstrap UI di Angularjs: Come modificare la linguetta di Uib CSS

Question

Sto utilizzando le schede Bootstrap dell'interfaccia utente e desidero modificare il CSS per alcuni componenti, ma non sono sicuro di come accedere esattamente ai diversi elementi.

Gli elementi che vorrei modificare sono il testo per la scheda attiva, il testo per la scheda non attiva ei bordi per entrambi.

Qual è la sintassi corretta per accedere a queste schede in CSS?

Ecco l'UIB-scheda HTML sto usando:

<uib-tabset> 

    <uib-tab heading="Episodes"></uib-tab> 

    <uib-tab heading="Categories"></uib-tab> 

</uib-tabset> 

Sono abbastanza nuovo a CSS - scuse in anticipo ...

Answer 1

Si può semplicemente modificare il CSS del bootstrap per .nav-tabs

.nav-tabs > li > a { 
    border: 1px solid #000; 
} 

Per attiva scheda

.nav-tabs > li.active > a { 
    /*CSS HERE*/ 
} 

Opzionalmente è possibile lo stile della classe uib-tab aggiunto da Angular:

.uib-tab a { 
    border: 1px solid #000; 
    } 

Per attiva UIB-scheda

.uib-tab.active a { 
    /*CSS HERE*/ 
}