Bootstrap Native: Using Bootstrap Components without jQuery — SitePoint
- Bootstrap Native Usage – The usage is similar to the original Bootstrap scripts, except we’ll remove jQuery, replace the Bootstrap scripts with the ones supplied by the Bootstrap Native project, and, if necessary, include the polyfills.
- So, before the end /body tag we include the script for the Bootstrap Native components: – – script CDN URLs are available and listed on the Bootstrap Native documentation page.
- Other Differences – If we perform a side-by-side comparison of the components, it’s clear how Bootstrap Native is not a literal port, and in some cases removes functionality, while in others it adds something new.
- In Bootstrap, we need to use some jQuery code to modify the value hardcoded in the = 2000; – Bootstrap Native, on the other hand, exposes a data-duration attribute on the component root element and so the process is easier: – – div id=”carousel” class=”carousel slide” data-ride=”carousel” data-interval=”false” data-duration=”2000″ -…
Why use Bootstrap Native?
The motivations of such a port are mostly related to performance.
Another performance advantage is the reduced page weight. Let’s make a quick comparison. All the numbers below refer to minified gzipped files and are expressed in KBs. bootstrap.js refers to the original Bootstrap scripts, bsn.js to the Bootstrap Native scripts, and jq to jQuery. Here we’re looking at the bundled files that gather together all the components, but it should be noted that both libraries have a modular structure that allows the loading of only the needed components and their dependencies.
jQuery 3.3.1 + Bootstrap.js = 30.0 + 12.9 = 42.9
jQuery 3.1.0 slim + bootstrap.js = 23.6 + 12.9 = 36.5
jQuery 2.2.4 + bootstrap.js = 34.3 + 11.2 = 45.5
jQuery 1.12.4 + bootstrap.js = 38.8 + 11.2 = 50.0