Add bootstrap JS/CSS in a subparty of a page or use a global no conflic or namespace?

Question

We have an historical application on which we would want to add bootstrap.

The problem is that if we just add bootstrap.(css, js) in our application that uses jQuery and lots of old plugins and custom js/css, everything is broken (button, tabs, modal, alignment, etc etc etc).

We want to integrate bootstrap in an iterative way, starting with just some little elements (bootstrap progress bar in particular) and refactoring code step after step (for example switch to bootstrap buttons, then tab, etc).

I read http://getbootstrap.com/javascript/#js-noconflict but it seems that with that solution, I will have to explictly disable each bootstrap components one by one.

Is there a way to do the opposite, i.e add namespace for bootstrap components, or globally disable bootstrap (and only enable it on preciselly scoped places ?)

Thanks !

Answer 1

So, I get it complettly working, and for the posterity:

• the CSS part is correctly handled by using LESS with a prefix and then, with an online LESS->CSS generator, get back the modified CSS. The detailled procedure is explained in css framework for an app with existing stylesheet

• for the JS part, I added the 11 "no-conflict" directives and nothing seems to break anymore, and so now I'm going to be able to add them one be one:

  <script type="text/javascript" src="/bootstrap-3.2.0-dist/js/bootstrap.js" />
  <script type="text/javascript">
  // <![CDATA[
  var bootstrapButton = $.fn.button.noConflict();
  var bootstrapAlert = $.fn.alert.noConflict();
  var bootstrapCarousel = $.fn.carousel.noConflict();
  var bootstrapCollapse = $.fn.collapse.noConflict();
  var bootstrapDropdown = $.fn.dropdown.noConflict();
  var bootstrapModal = $.fn.modal.noConflict();
  var bootstrapTooltip = $.fn.tooltip.noConflict();
  var bootstrapPopover = $.fn.popover.noConflict();
  var bootstrapScrollspy = $.fn.scrollspy.noConflict();
  var bootstrapTab = $.fn.tab.noConflict();
  var bootstrapAffix = $.fn.affix.noConflict();
  // ]]>
  </script>