Bootstrap 3 compatible avec les directives actuelles AngularJS bootstrap?

Ainsi, le projet http://angular-ui.github.io/bootstrap/ ne dépend pas du JavaScript de Bootstrap (il ne l'enroule pas, ne nécessite pas d'autres). Ce sont des directives indigènes AngularJS rédigées à partir des bases pour être légères et bien intégrées dans l'écosystème AngularJS.

La seule adhésion au projet Bootstrap est le marquage de Bootstrap (HTML) et CSS.

Si vous posez une question, puis-je saisir toutes les directives et les utiliser avec Bootstrap 3.0? La réponse est "cela dépend". Cela dépend vraiment si et combien Bootstrap 3.0 décide de modifier son balisage et les classes CSS correspondantes. Je présume que le marquage de certains contrôles a changé et pas pour d'autres.

Maintenant, la très bonne nouvelle avec http://angular-ui.github.io/bootstrap/ est que la plupart des cours de balisage HTML et CSS sont encapsulés dans des modèles AngularJS distincts. En pratique, cela signifie que vous pouvez saisir le code JavaScript des directives et modifier uniquement les balises (modèles) pour entrer dans Bootstrap 3.0.

Tous les modèles sont situés ici: https://github.com/angular-ui/bootstrap/tree/master/template et en les parcourant, vous devriez avoir l'idée qu'il est assez simple de mettre à jour les balises sans faire de gestes avec JavaScript. C'est l'un des objectifs de conception de ce projet.

Je vous encourage à essayer simplement de voir comment CSS de Bootstrap 3.0 fonctionne avec les directives et les modèles existants. Si vous rencontrez des problèmes, vous pouvez toujours mettre à jour les modèles vers Bootstrap 3.0 (et les remettre au projet!)

Il y a une demande de tirage en attente qui contient des corrections pour la plupart des problèmes avec Bootstrap 3.0 et les directives AngularUi:

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

Juste pour vous donner une alternative: disposé à intégrer Angular JS et Boostrap 3 pour le développement mobile J'ai essayé de surmonter l'intégration bootstrap.js d'une manière différente.

Au lieu de tenter de reproduire le comportement bootstrap.js exactement par composant, j'ai fondamentalement deux directives générales qui se communiquent à travers des événements pour synchroniser l'état actif / inactif de deux nœuds DOM ou plus. Les classes de niveaux d'état réfléchissantes les rend capables de reproduire presque toutes les interactions basiques bootstrap.js.

Donc, pour les applications les plus courantes, vous n'aurez besoin que de la boottap 3 css et de ces quelques lignes de js pour obtenir presque toutes les fonctionnalités Boostrap 3.

Vous pouvez saisir le code ici, il fonctionnera en dehors du projet et vous pourrez l'adapter en fonction de vos besoins: https://github.com/mcasimir/mobile-angular-ui/blob/master/src/coffee/directives/toggle .coffee .

C'est Coffeescript, mais vous pouvez le traduire facilement à js2coffee.org.

Vous pouvez également lire les documents ici: http://mobileangularui.com/#toc6 .

C'est un exemple simple pour montrer les bases de la façon dont cela fonctionne:

<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> 

Et c'est ainsi que vous pouvez les utiliser pour créer un composant Tabs:

 <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> 

En plus, vous pouvez également contrôler les mêmes onglets à partir de différents nœuds:

 <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> 

Ne sait pas si cela peut correspondre à vos besoins, mais de cette façon, vous pouvez créer au moins: des onglets, des accordéons, des collapsibles, des modales et des menus déroulants sans avoir besoin d'une bibliothèque dédiée. Notez également qu'il fonctionnera soit avec bootstrap 2 et 3 car il ne dépend pas du marquage bootstrap du tout.