JavaScript
Bawa Bootstrap pikeun hirup kalawan plugins JavaScript pilihan urang diwangun dina jQuery. Diajar ngeunaan unggal plugin, data kami sareng pilihan API programmatic, sareng seueur deui.
Plugins tiasa dilebetkeun masing-masing (nganggo individu Bootstrap js/dist/*.js
), atanapi sadayana sakaligus nganggo bootstrap.js
atanapi anu diminified bootstrap.min.js
(henteu kalebet duanana).
Upami anjeun nganggo bundler (Webpack, Rollup…), anjeun tiasa nganggo /js/dist/*.js
file anu siap UMD.
Sababaraha plugins sareng komponén CSS gumantung kana plugins séjén. Upami anjeun ngalebetkeun plugin masing-masing, pastikeun pikeun pariksa katergantungan ieu dina dokumén. Catet ogé yén sadaya plugins gumantung kana jQuery (ieu hartosna jQuery kedah kalebet sateuacan file plugin). Taroskeun kamipackage.json
pikeun ningali versi jQuery mana anu dirojong.
dropdowns kami, popovers na tooltips ogé gumantung kana Popper.js .
Nearly all Bootstrap plugins can be enabled and configured through HTML alone with data attributes (our preferred way of using JavaScript functionality). Be sure to only use one set of data attributes on a single element (e.g., you cannot trigger a tooltip and modal from the same button.)
However, in some situations it may be desirable to disable this functionality. To disable the data attribute API, unbind all events on the document namespaced with data-api
like so:
Alternatively, to target a specific plugin, just include the plugin’s name as a namespace along with the data-api namespace like this:
Escaping selectors
If you use special selectors, for example: collapse:Example
, be sure to escape them, because they’ll be passed through jQuery.
Bootstrap provides custom events for most plugins’ unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. show
) is triggered at the start of an event, and its past participle form (ex. shown
) is triggered on the completion of an action.
All infinitive events provide preventDefault()
functionality. This provides the ability to stop the execution of an action before it starts. Returning false from an event handler will also automatically call preventDefault()
.
We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.
All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):
Each plugin also exposes its raw constructor on a Constructor
property: $.fn.popover.Constructor
. If you’d like to get a particular plugin instance, retrieve it directly from an element: $('[rel="popover"]').data('popover')
.
All programmatic API methods are asynchronous and returns to the caller once the transition is started but before it ends.
In order to execute an action once the transition is complete, you can listen to the corresponding event.
In addition a method call on a transitioning component will be ignored.
You can change the default settings for a plugin by modifying the plugin’s Constructor.Default
object:
Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call .noConflict
on the plugin you wish to revert the value of.
The version of each of Bootstrap’s jQuery plugins can be accessed via the VERSION
property of the plugin’s constructor. For example, for the tooltip plugin:
Bootstrap’s plugins don’t fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use <noscript>
to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.
Third-party libraries
Bootstrap does not officially support third-party JavaScript libraries like Prototype or jQuery UI. Despite .noConflict
and namespaced events, there may be compatibility problems that you need to fix on your own.
All Bootstrap’s JavaScript files depend on util.js
and it has to be included alongside the other JavaScript files. If you’re using the compiled (or minified) bootstrap.js
, there is no need to include this—it’s already there.
util.js
includes utility functions and a basic helper for transitionEnd
events as well as a CSS transition emulator. It’s used by the other plugins to check for CSS transition support and to catch hanging transitions.