2

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 !

fanf42
  • 1,828
  • 15
  • 22
  • possible duplicate of [Applying CSS styles only to certain elements](http://stackoverflow.com/questions/11831346/applying-css-styles-only-to-certain-elements) – cvrebert Aug 28 '14 at 21:00
  • @cvrebert: that works for the CSS part, thanks! But not for the JS part (which is one destroying button, tab, modal...) – fanf42 Aug 29 '14 at 14:39
  • Your JS options are `noConflict` (which isn't so bad; there are only 11 non-utility plugins) or editing the plugins' source so that they are nonconflicting by default. – cvrebert Aug 29 '14 at 17:26

1 Answers1

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>

Community
  • 1
  • 1
fanf42
  • 1,828
  • 15
  • 22