Bootstrap 3 compatible with current AngularJS bootstrap directives?

Will bootstrap 3 release be compatible with current AngularJS bootstrap directives?

I want to use Bootstrap 2.3.1 directive with AngularJS:

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

With the Bootstrap 3.0.0 CSS:

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

Why?

AngularJS team is still working on JS directives for v2.3.1 and will need time to catch up to v3.0.0. I want to start using v3 CSS grid syntax now.

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

So, the http://angular-ui.github.io/bootstrap/ project does not depend on Bootstrap's JavaScript (it is not wrapping it, not requiring etc.). Those are native AngularJS directives written from the ground-up to be lightweight and well integrated into the AngularJS ecosystem.

The only adherence to the Bootstrap project is Bootstrap's markup (HTML) and CSS.

If you ask a question "can I grab all the directives and use them with Bootstrap 3.0" the answer is "it depends". It really depends if and how much Bootstrap 3.0 decide do change its markup and corresponding CSS classes. I would presume that markup of some controls have changed and not for some others.

Now, the very good news with http://angular-ui.github.io/bootstrap/ is that most of the HTML markup and CSS classes are encapsulated in separate AngularJS templates. In practice it means that you can grab the JavaScript code of the directives and only change markup (templates) to fit into Bootstrap 3.0.

All the templates are located here: https://github.com/angular-ui/bootstrap/tree/master/template and by browsing them you should get an idea that it is pretty simple to update markup without messing with JavaScript. This is one of the design goals of this project.

I would encourage you to simply give it a try and see how CSS of Bootstrap 3.0 works with the existing directives and templates. If you spot any issues you can always update templates to Bootstrap 3.0 (and contribute them back to the project!)

There's a pull request pending that contains fixes for most of the issues with Bootstrap 3.0 and the AngularUi directives:

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

Just to give you an alternative: willing to integrate Angular JS and Boostrap 3 for mobile development I've tried to overcome the bootstrap.js integration in a different way.

Instead to attempt to reproduce bootstrap.js behaviour exactly component by component, I basically made two general purpose directives communicating each other through events to sync the active/inactive state of two or more DOM nodes. Reflecting state trough classes makes them capable to reproduce almost all of the basic bootstrap.js components interaction.

So for the most common applications you'll need only the bootstap 3 css and these few lines of js to get almost all of boostrap 3 functionalities.

You can grab the code here, it will work outside the project and you can adapt it to fit your needs: https://github.com/mcasimir/mobile-angular-ui/blob/master/src/coffee/directives/toggle.coffee.

It's Coffeescript but you can easily translate it to js through js2coffee.org.

You may also want to read the docs here: http://mobileangularui.com/#toc6.

This is a simple example to show the basics of how it works:

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

And this is how you can use them to create Tabs component:

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

As a plus you can also control the same tabs from different nodes:

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

Don't know if this can fit your needs but this way you can create at least: tabs, accordions, collapsibles, modals and dropdowns without the need of a dedicated library. Also note that it will work either with bootstrap 2 and 3 since it not depends on bootstrap markup at all.