web-dev-qa-db-ja.com

Bootstrap 3現在のAngularJSと互換性があるbootstrapディレクティブ？

Will bootstrap 3リリースは現在のAngularJSと互換性がありますbootstrapディレクティブ？

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

javascriptcsstwitter-bootstrapangularjstwitter-bootstrap-3
55
Dan Kanze

そのため、 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（そしてプロジェクトに貢献してください！）

65
pkozlowski.opensource

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

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

10
Jonathan Moffatt

代替手段を提供するために、モバイル開発用にAngular JSとBoostrap 3を統合する意思がありますbootstrap.js統合を別の方法で克服しようとしました。

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

そのため、ほとんどの一般的なアプリケーションでは、bootstap 3 csとこれらのjsの行だけで、boostrap 3の機能のほとんどすべてを取得できます。

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

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>

そして、これを使用して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>

プラスとして、異なるノードから同じタブを制御することもできます。

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

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

3
mcasimir