55

ブートストラップ 3 リリースは、現在の AngularJS ブートストラップ ディレクティブと互換性がありますか?

AngularJS で Bootstrap 2.3.1 ディレクティブを使用したい:

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

Bootstrap 3.0.0 CSS の場合:

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

なんで？

AngularJS チームはまだ v2.3.1 の JS ディレクティブに取り組んでおり、v3.0.0 に追いつくには時間がかかるでしょう。v3 CSS グリッド構文の使用を開始したいと考えています。

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

4

3 に答える 3

65

そのため、http://angular-ui.github.io/bootstrap/プロジェクトはBootstrap の JavaScript に依存しません(ラップしていない、必要としないなど)。これらは、軽量で AngularJS エコシステムに適切に統合されるようにゼロから作成されたネイティブ AngularJS ディレクティブです。

Bootstrap プロジェクトへの唯一の準拠は、Bootstrap のマークアップ (HTML) と CSS です。

「すべてのディレクティブを取得して、Bootstrap 3.0 で使用できますか」という質問をした場合、答えは「場合によります」です。それは、Bootstrap 3.0 がそのマークアップと対応する CSS クラスを変更するかどうか、およびどの程度決定するかに大きく依存します。一部のコントロールのマークアップが変更され、他の一部のマークアップは変更されていないと思います。

http://angular-ui.github.io/bootstrap/の非常に良いニュースは、ほとんどの HTML マークアップと CSS クラスが個別の AngularJS テンプレートにカプセル化されていることです。実際には、ディレクティブの JavaScript コードを取得し、Bootstrap 3.0 に適合するようにマークアップ (テンプレート) のみを変更できることを意味します。

すべてのテンプレートは https://github.com/angular-ui/bootstrap/tree/master/templateにあります。 これらを参照すると、JavaScript をいじらずにマークアップを簡単に更新できることがわかります。これは、このプロジェクトの設計目標の 1 つです。

試してみて、Bootstrap 3.0 の CSS が既存のディレクティブとテンプレートでどのように機能するかを確認することをお勧めします。問題を見つけたら、いつでもテンプレートを Bootstrap 3.0 に更新できます (そして、それらをプロジェクトに貢献してください!)

于 2013-05-02T17:08:04.700 に答える
10

Bootstrap 3.0 と AngularUi ディレクティブに関するほとんどの問題の修正を含む保留中のプル リクエストがあります。

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

于 2013-08-07T04:39:30.120 に答える
3

別の方法として、Angular JS と Boostrap 3 をモバイル開発用に統合したいと考えています。bootstrap.js の統合を別の方法で克服しようとしました。

コンポーネントごとに bootstrap.js の動作を正確に再現しようとする代わりに、基本的に、イベントを介して相互に通信する 2 つの汎用ディレクティブを作成し、2 つ以上の DOM ノードのアクティブ/非アクティブ状態を同期させました。状態トラフ クラスを反映することで、ほとんどすべての基本的な bootstrap.js コンポーネントの相互作用を再現できるようになります。

したがって、最も一般的なアプリケーションでは、bootstrap 3 css とこれらの数行の js だけで、ほとんどすべての boostrap 3 機能を利用できます。

ここでコードを取得できます。プロジェクト外でも機能し、ニーズに合わせて調整できます: https://github.com/mcasimir/mobile-angular-ui/blob/master/src/coffee/directives/toggle .コーヒー。

これは Coffeescript ですが、js2coffee.org から簡単に js に変換できます。

http://mobileangularui.com/#toc6のドキュメントも参照してください。

これは、動作の基本を示す簡単な例です。

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

これらを使用してタブ コンポーネントを作成する方法は次のとおりです。

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

さらに、異なるノードから同じタブを制御することもできます。

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

これがあなたのニーズに合うかどうかはわかりませんが、この方法で、専用ライブラリを必要とせずに、少なくともタブ、アコーディオン、折りたたみ式、モーダル、およびドロップダウンを作成できます。また、ブートストラップ マークアップにまったく依存しないため、ブートストラップ 2 と 3 のどちらでも機能することに注意してください。

于 2014-02-14T14:21:12.323 に答える