Bootstrap 3 compatibile con le attuali direttive Bootstrap di AngularJS?

Question

La versione di bootstrap 3 sarà compatibile con le direttive di avvio di AngularJS attuali?

voglio usare Bootstrap direttiva 2.3.1 con AngularJS:

http://angular-ui.github.io/bootstrap/

Con il Bootstrap 3.0.0 CSS:

https://github.com/twitter/bootstrap/tree/3.0.0-wip/

Perché?

Il team di AngularJS sta ancora lavorando alle direttive JS per la v2.3.1 e avrà bisogno di tempo per raggiungere la v3.0.0. Voglio iniziare a utilizzare la sintassi della griglia CSS v3 ora.

https://github.com/angular-ui/bootstrap/issues/331

Answer 1

Così, il progetto di http://angular-ui.github.io/bootstrap/non dipendono di Bootstrap JavaScript (che non è avvolgente, non richiedendo così via). Quelle sono direttive AngularJS native scritte da zero per essere leggere e ben integrate nell'ecosistema di AngularJS.

L'unica aderenza al progetto Bootstrap è markup di Bootstrap (HTML) e CSS.

Se si fa una domanda "posso prendere tutte le direttive e usarle con Bootstrap 3.0" la risposta è "dipende". Dipende veramente se e quanto Bootstrap 3.0 decide di cambiare il suo markup e le corrispondenti classi CSS. Presumo che il markup di alcuni controlli sia cambiato e non per altri.

Ora, la buona notizia con http://angular-ui.github.io/bootstrap/ è che la maggior parte del codice HTML e le classi CSS sono incapsulate in modelli AngularJS separati. In pratica significa che puoi prendere il codice JavaScript delle direttive e modificare solo i markup (template) per adattarli a Bootstrap 3.0.

Tutti i modelli si trovano qui: https://github.com/angular-ui/bootstrap/tree/master/template e da loro la navigazione si dovrebbe ottenere un'idea che è abbastanza semplice da aggiornare markup senza fare confusione con JavaScript. Questo è uno degli obiettivi di progettazione di questo progetto.

Vorrei incoraggiarvi a fare semplicemente una prova e vedere come i CSS di Bootstrap 3.0 funzionano con le direttive e i modelli esistenti. Se si individua eventuali problemi è sempre possibile aggiornare i modelli per il Bootstrap 3.0 (e di contribuire torna al progetto!)

Answer 2

C'è una richiesta di pull in attesa che contiene le correzioni per la maggior parte dei problemi con Bootstrap 3.0 e le direttive AngularUi:

https://github.com/angular-ui/bootstrap/pull/742

Answer 3

solo per darvi un'alternativa: disposto a integrare angolare JS e bootstarp 3 per lo sviluppo mobile ho provato a superare l'integrazione bootstrap.js in un modo diverso.

Invece di tentare di riprodurre il comportamento bootstrap.js esattamente componente per componente, ho fatto sostanzialmente due direttive generali che comunicano l'un l'altro attraverso gli eventi per sincronizzare lo stato attivo/inattivo di due o più nodi DOM.Le classi di stato dello stato riflettente le rendono in grado di riprodurre quasi tutta l'interazione di base dei componenti bootstrap.js.

Quindi per le applicazioni più comuni è necessario solo il css bootstap 3 e queste poche righe di js per ottenere quasi tutte le funzionalità di boostrap 3.

Qui puoi prendere il codice, funzionerà all'esterno del progetto e potrai adattarlo alle tue esigenze: https://github.com/mcasimir/mobile-angular-ui/blob/master/src/coffee/directives/toggle.coffee.

È Coffeescript ma è possibile convertirlo facilmente in js tramite js2coffee.org.

Si consiglia inoltre di leggere i documenti qui: http://mobileangularui.com/#toc6.

Questo è un semplice esempio per mostrare le basi di come funziona:

<p toggleable id="lightbulb" active-class="text-primary" class="text-default"> 
    <i class="fa fa-lightbulb-o"></i> 
</p> 

<div class="btn-group justified nav-tabs"> 
    <a toggle="toggle" target="lightbulb" active-class="active" class="btn btn-default" href> 
     Toggle 
    </a> 
    <a toggle="on" target="lightbulb" class="btn btn-default" href> 
     Turn On 
    </a> 
    <a toggle="off" target="lightbulb" class="btn btn-default" href> 
     Turn Off 
    </a>   
</div> 

e in questo modo si possono usare per creare schede componente:

<ul class="nav nav-tabs"> 
<li><a href="#Tab1" toggle="on" parent-active-class="active">Tab 1</a></li> 
    <li><a href="#Tab2" toggle="on" parent-active-class="active">Tab 2</a></li> 
    <li><a href="#Tab3" toggle="on" parent-active-class="active">Tab 3</a></li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane" toggleable active-class="active" default="active" id="Tab1" exclusion-group="myTabs"> 

    <h3 class="page-header">Tab 1</h3> 
    <p><!-- ... --></p> 
    </div> 

    <div class="tab-pane" toggleable active-class="active" id="Tab2" exclusion-group="myTabs"> 
    <h3 class="page-header">Tab 2</h3> 
    <p><!-- ... --></p> 
    </div> 

    <div class="tab-pane" toggleable active-class="active" id="Tab3" exclusion-group="myTabs"> 
    <h3 class="page-header">Tab 3</h3> 
    <p><!-- ... --></p> 
    </div> 
</div> 

Come un plus è possibile anche controllare le stesse schede da diversi nodi:

<div class="btn-group justified nav-tabs"> 
    <a class="btn btn-default" href="#Tab1" toggle="on" active-class="active">Tab 1 
    </a> 

    <a class="btn btn-default" href="#Tab2" toggle="on" active-class="active">Tab 2 
    </a> 

    <a class="btn btn-default" href="#Tab3" toggle="on" active-class="active">Tab 3 
    </a> 

</div> 

Non so se questo può soddisfare le vostre esigenze, ma questo modo in cui puoi creare almeno: schede, fisarmoniche, pieghevoli, modali e menu a discesa senza la necessità di una libreria dedicata. Si noti inoltre che funzionerà con bootstrap 2 e 3 poiché non dipende affatto dal markup di bootstrap.