Bootstrap 3 compatible avec les directives d'amorçage AngularJS actuelles?

Question

Va bootstrap 3 version sera compatible avec l'actuel bootstrap, AngularJS directives?

Je veux utiliser Bootstrap 2.3.1 directive avec AngularJS:

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

Avec le Bootstrap 3.0.0 CSS:

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

Pourquoi?

AngularJS équipe travaille toujours sur JS directives pour la v2.3.1 et aura besoin de temps pour rattraper v3.0.0. Je veux commencer à utiliser v3 grille CSS syntaxe maintenant.

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

Answer 1

Ainsi, l' http://angular-ui.github.io/bootstrap/ projet de ne pas dépendre de Bootstrap, JavaScript (il n'est pas d'emballage, pas exigeant, etc.). Ceux qui sont natifs AngularJS directives écrites à partir du sol jusqu'à être léger et bien intégré dans le AngularJS écosystème.

La seule adhésion à l'Amorçage du projet est de Bootstrap de balisage (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 "ça dépend". Ça dépend vraiment de si et combien de Bootstrap 3.0 décider de faire changer son marquage et correspondant à des classes CSS. Je présume que le balisage de certains contrôles ont changé et pas pour d'autres.

Maintenant, la très bonne nouvelle, avec http://angular-ui.github.io/bootstrap/ c'est que la plupart de la balise HTML et CSS classes sont encapsulées dans les séparer AngularJS modèles. Dans la pratique, cela signifie que vous pouvez récupérer le code JavaScript de directives et de ne modifier que le balisage (templates) pour l'intégrer Bootstrap 3.0.

Tous les modèles se trouvent ici: https://github.com/angular-ui/bootstrap/tree/master/template et en naviguant, vous devriez avoir une idée, il est assez simple de mettre à jour le balisage sans vous embêter avec JavaScript. C'est l'un des objectifs de la conception de ce projet.

Je vous invite à simplement lui donner un essai et voir comment CSS de Bootstrap 3.0 fonctionne avec les directives existantes et des modèles. Si vous constatez des problèmes, vous pouvez toujours mettre à jour les modèles de Bootstrap 3.0 (et de contribuer à la du projet!)

Answer 2

Une demande d'extraction en attente contient des correctifs pour la plupart des problèmes liés à Bootstrap 3.0 et aux directives AngularUi:

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

Answer 3

Juste pour vous donner une alternative: prêt à intégrer Angular JS et Bootstrap 3 pour le développement mobile, j'ai essayé de surmonter les bootstrap.js l'intégration d'une manière différente.

Au lieu de tenter de reproduire bootstrap.js comportement exactement composante par composante, en gros, j'ai fait les deux fins générales directives de communiquer les uns des autres à travers des événements de synchronisation de l'actif/inactif état de deux ou plusieurs nœuds DOM. Reflétant l'état de dépression classes les rend capables de reproduire presque toutes de la base bootstrap.js les composants d'interaction.

Donc, pour la plupart des applications courantes, vous aurez besoin seulement de la bootstap 3 css et ces quelques lignes de js pour obtenir presque tous de bootstrap 3 fonctionnalités.

Vous pouvez saisir le code ici, il va travailler à l'extérieur du projet et vous pouvez l'adapter à vos besoins: https://github.com/mcasimir/mobile-angular-ui/blob/master/src/coffee/directives/toggle.coffee.

C'est Coffeescript, mais vous pouvez facilement traduire par js js2coffee.org.

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

C'est un exemple simple pour montrer les rudiments de la façon dont il 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 ce est la façon dont vous pouvez les utiliser pour créer des Onglets de la composante:

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

De 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 sais pas si cela peut correspondre à vos besoins, mais de cette façon, vous pouvez créer au moins: des onglets, des accordéons, collapsibles, les auxiliaires modaux et des listes déroulantes, sans la nécessité d'une bibliothèque. Notez également qu'il marchera avec bootstrap 2 et 3, car il ne dépend bootstrap balisage à tous.