web-dev-qa-db-fra.com

Bootstrap 3 compatible avec les directives AngularJS actuelles bootstrap??

Est-ce que bootstrap 3 sera compatible avec les directives AngularJS bootstrap???)?

Je veux utiliser Bootstrap 2.3.1 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?

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

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

javascriptcsstwitter-bootstrapangularjstwitter-bootstrap-3
55
Dan Kanze

Donc, le projet http://angular-ui.github.io/bootstrap/ ne le fait pas dépend du code JavaScript de Bootstrap (il ne l’emballe pas, ne nécessite pas, etc.). Celles-ci sont des directives AngularJS natives écrites pour être légères et bien intégrées à l'écosystème AngularJS.

La seule adhésion au projet Bootstrap est le balisage 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 de la valeur et de la Bootstrap 3.0 décide de changer son balisage et les classes CSS correspondantes Je suppose que le balisage de certains contrôles a changé et non de certains autres.

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

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

Je vous encourage à simplement essayer et voir comment CSS de Bootstrap 3.0 fonctionne avec les directives et les modèles existants. Si vous décelez des problèmes, vous pouvez toujours mettre à jour les modèles avec Bootstrap 3.0 (et les réintroduire dans le projet!)

65
pkozlowski.opensource

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

10
Jonathan Moffatt

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

Au lieu de cela, pour tenter de reproduire exactement le comportement de bootstrap.js, composant par composant, j’ai essentiellement créé deux directives générales s’appliquant entre elles par le biais d’événements pour synchroniser l’état actif/inactif de deux ou plusieurs nœuds DOM. La réflexion des classes via l'état les rend capables de reproduire la quasi-totalité des interactions de base des composants bootstrap.js.

Donc, pour les applications les plus courantes, vous n’avez besoin que du bootstap 3 css et de ces quelques lignes de js pour obtenir la quasi-totalité des fonctionnalités de boostrap 3.

Vous pouvez récupérer le code ici, cela fonctionnera en dehors du projet et vous pourrez 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 le traduire en js via js2coffee.org.

Vous voudrez peut-être aussi lire la documentation ici: http://mobileangularui.com/#toc6 .

Ceci est un exemple simple pour montrer les bases de son fonctionnement:

<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 voici comment vous pouvez les utiliser pour créer le composant Onglets:

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

Je ne sais pas si cela peut répondre à vos besoins, mais de cette façon, vous pouvez au moins créer des onglets, des accordéons, des collapsibles, des modaux et des menus déroulants sans avoir besoin d'une bibliothèque dédiée. Notez également que cela fonctionnera avec bootstrap 2 et 3 car cela ne dépend pas du balisage bootstrap).

3
mcasimir