Bootstrap 3 kompatibel mit aktuellen AngularJS Bootstrap-Direktiven?

So, die http://angular-ui.github.io/bootstrap/ Projekt nicht hängt von Bootstrap-JavaScript (es wird nicht wickeln Sie es, die nicht erfordern, etc.). Das sind native AngularJS-Direktiven geschrieben vom Boden-oben, um leicht und gut integriert in die AngularJS-ökosystem.

Die nur die Einhaltung der Bootstrap-Projekt Bootstrap - markup (HTML) und CSS.

Wenn Sie eine Frage stellen "kann ich greifen Sie alle Richtlinien und verwenden Sie Sie mit Bootstrap 3.0" die Antwort ist "es hängt". Es ist wirklich hängt davon ab, ob und wie viel Bootstrap 3.0 entscheiden, ändern sich seine markup und die entsprechenden CSS-Klassen. Ich würde davon ausgehen, dass markup von einigen Steuerelementen geändert wurden, und nicht für einige andere.

Nun die sehr gute Nachricht mit http://angular-ui.github.io/bootstrap/ ist, dass die meisten HTML-Auszeichnungen und CSS-Klassen sind gekapselt in getrennten AngularJS Vorlagen. In der Praxis bedeutet es, dass Sie schnappen Sie sich den JavaScript-code, der Richtlinien und nur ändern markup (templates) passen in Bootstrap 3.0.

Alle Vorlagen finden Sie hier:
https://github.com/angular-ui/bootstrap/tree/master/template
und durchsuchen Sie Sie bekommen sollten, eine Idee, es ist ziemlich einfach zu aktualisieren-markup ohne messing mit JavaScript. Dies ist eines der design-Ziele von diesem Projekt.

Ich möchte Sie ermutigen, geben Sie ihm einfach einen Versuch und sehen Sie, wie CSS von Bootstrap 3.0 arbeitet mit der vorhandenen Richtlinien und Vorlagen. Wenn Sie vor Ort alle Fragen können Sie jederzeit aktualisieren Vorlagen Bootstrap 3.0 (und tragen Sie zurück zum Projekt!)

InformationsquelleAutor der Antwort pkozlowski.opensource

Nur, um Ihnen eine alternative: die Bereitschaft zur Integration Angular JS und Boostrap 3 für die mobile Entwicklung, die ich ausprobiert habe, zu überwinden, die bootstrap.js integration in einer anderen Weise.

Anstatt zu versuchen, zu reproduzieren bootstrap.js Verhalten genau, Komponente für Komponente, die ich im Grunde aus zwei Mehrzweck-Richtlinien kommunizieren untereinander durch Ereignisse synchronisieren der aktive/inaktive Zustand von zwei oder mehr DOM-Knoten. Reflektierenden Zustand Trog Klassen macht Sie fähig, sich zu reproduzieren fast alle der grundlegenden bootstrap.js Komponenten der Interaktion.

Also für die meisten Anwendungen müssen Sie nur die bootstap 3 css-und diese paar Zeilen js zu bekommen, fast alle von boostrap 3-Funktionalitäten.

Du kannst dir den code hier, es funktioniert auch außerhalb der Projekt-und Sie können passen Sie an Ihre Bedürfnisse: https://github.com/mcasimir/mobile-angular-ui/blob/master/src/coffee/directives/toggle.coffee.

Es ist Coffeescript aber Sie können ganz einfach übersetzen Sie in js durch js2coffee.org.

Können Sie auch wollen, Lesen Sie die Dokumentation hier: http://mobileangularui.com/#toc6.

Dies ist ein einfaches Beispiel, um zu zeigen, die Grundlagen, wie es funktioniert:

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

Und das ist, wie Sie Sie verwenden können, um Register zu erstellen-Komponente:

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

Als ein plus-Sie können auch Steuern, die gleichen Registerkarten von verschiedenen Knoten:

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

Weiß nicht, ob das passen kann Ihr benötigt aber auf diese Weise können Sie erstellen, mindestens: tabs, Akkordeons, collapsibles, modals und dropdowns, ohne die Notwendigkeit einer eigenen Bibliothek. Beachten Sie auch, dass es funktionieren wird, entweder mit bootstrap 2 und 3, da es nicht hängt davon ab, bootstrap markup überhaupt.

InformationsquelleAutor der Antwort mcasimir