Skip to content
thednp edited this page Oct 3, 2017 · 21 revisions

What's different with the jQuery plugins?

Mainly you need to link the BSN library in your site <body> and some component public methods may have different names, but stay cool, for each component these details are fully explained.

An important difference however is that the jQuery version will bind events globally and delegate the handlers to elements allowing the plugins to work with later added elements, more details here.

Does it work with legacy browsers (like IE8)?

The answer is YES, please make sure to check the browser support wiki page for an in depth guide on how to enable legacy browsers to use the library.

Does it use DATA API?

The answer is YES, but it's different from the original version. The original version relies on jQuery's data() method to store functionality at the node level, while we only use the data-toggle="dropdown" or data-interval="5000" as a means of elements query and setting component additional options. The jQuery data() might be the real answer to the this question.

Does it support nesting?

The short answer is NO, except the Dropdown component. The library does not support this kind of functionality especially for complex components like Carousel. The Tab or Collapse components could work but it wasn't tested or developed with nesting in mind. For components like Tooltip and Popover it wouldn't make sense.

Can I show multiple modal elements simultaneously?

The answer is NO, however you can trigger show() for other modal elements from inside modals, closing any visible modal automatically, just as shown in the demos.

Does the Carousel support swipe?

The answer is NO, however there is a workaround here.

Does it work with CustomElements?

The answer is YES, please check this comment to learn more about a user's experiment. In addition there is a fork of this library with an interesting implementation called bs4-custom-elements you should definitely check out.

Does it work with later added elements?

The answer is NO in most cases. As discussed in this topic, and several other instances (#62, #60), the event listeners used by the components are not bound to the document and delegated to specific elements like jQuery plugins do, rather we took a more performance oriented approach and decided to bind events to elements themselves, for performance reasons.

When you add a new element to your page, you need to make sure you initialize it right away:

// grab your newly added element
var myElement = document.getElementById('myElement');

// initialize with the corresponding component
var myCarousel = new Carousel(myElement,options);

More on jQuery plugins implementation here.

More FAQs coming soon..

Clone this wiki locally