bootstrap.native
Advanced tools
Native Javascript for Bootstrap, the sweetest Javascript library without jQuery.
bootstrap.native is a JavaScript library that provides native JavaScript components for Bootstrap, eliminating the need for jQuery. It aims to offer the same functionality as Bootstrap's JavaScript components but in a more lightweight and efficient manner.
Modal
This code demonstrates how to create and control a Bootstrap modal using bootstrap.native. It initializes a modal and sets up an event listener to show the modal when a button is clicked.
document.addEventListener('DOMContentLoaded', function() {
var myModal = new Modal(document.getElementById('myModal'));
document.getElementById('openModal').addEventListener('click', function() {
myModal.show();
});
});Tooltip
This code demonstrates how to create a tooltip using bootstrap.native. It initializes a tooltip with a specified title and placement on a target element.
document.addEventListener('DOMContentLoaded', function() {
var tooltipTrigger = document.getElementById('tooltipTrigger');
var myTooltip = new Tooltip(tooltipTrigger, {
title: 'This is a tooltip',
placement: 'top'
});
});Dropdown
This code demonstrates how to create a dropdown menu using bootstrap.native. It initializes a dropdown on a specified element.
document.addEventListener('DOMContentLoaded', function() {
var dropdownElement = document.getElementById('myDropdown');
var myDropdown = new Dropdown(dropdownElement);
});Bootstrap is the original library that bootstrap.native aims to complement. It provides a comprehensive set of CSS and JavaScript tools for building responsive web applications. Unlike bootstrap.native, Bootstrap's JavaScript components rely on jQuery.
Popper.js is a library used to manage poppers in web applications. It is often used in conjunction with Bootstrap for positioning tooltips and popovers. While bootstrap.native provides a more integrated solution for Bootstrap components, Popper.js focuses specifically on positioning elements.
Tether is a JavaScript library for efficiently making an absolutely positioned element stay next to another element on the page. It is similar to Popper.js and can be used with Bootstrap for positioning tooltips and dropdowns. bootstrap.native, on the other hand, provides a more comprehensive set of Bootstrap components without the need for jQuery.
This is a library developed with native Javascript for both Bootstrap 3 and Bootstrap 4 series, featuring superior performance compared to the original jQuery Plugins. Thanks to Ingwie Phoenix for contributing with npm/RequireJS/CommonJS compatibility. A huge advantage is the size, this library is only 20Kb minified and 6.5Kb gZipped.
See demo for scripting examples and instructions.
New releases will be available automatically on jsdelivr CDN repositories and CDN repositories on CDNjs repositories. You may also find more Google as well.
You can install this package by using either Bower or NPM.
$ npm install --save bootstrap.native
# Or
$ bower install --save bootstrap.native
bootstrap.native is UMD (Universal Module Definition) compatible. It will work correctly in CommonJS and AMD environments, but falls back to exporting to window in a normal <script> tag environment.
Traditional script-tag example:
<!-- Using one of the CDN repositories-->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.native/2.0.6/bootstrap-native.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.6/bootstrap-native.min.js"></script>
<!-- Using a local assets folder -->
<script type="text/javascript" src="/assets/js/bootstrap-native.min.js"></script>
<!-- Using Bower -->
<script type="text/javascript" src="/bower_components/bootstrap.native/dist/bootstrap-native.min.js"></script>
Use the Bootstrap 4 version:
<!-- Using one of the CDN repositories-->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.native/2.0.6/bootstrap-native-v4.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.6/bootstrap-native-v4.min.js"></script>
<!-- Using a local assets folder -->
<script type="text/javascript" src="/assets/js/bootstrap-native-v4.min.js"></script>
<!-- Using Bower -->
<script type="text/javascript" src="/bower_components/bootstrap.native/dist/bootstrap-native-v4.min.js"></script>
Warning: Do not use files directly from /lib folder! These files are just sources for the builds located in the /dist folder.
You can also use bootstrap.native in a CommonJS environment:
var bsn = require("bootstrap.native");
// Create a button:
var btn = new bsn.Button(element,'loading');
Additionally, to use V4, you can do the following:
var bsn = require('bootstrap.native/dist/bootstrap-native-v4');
var btn = new bsn.Button(element,'loading');
Note: If you are working in a virtual browser environment (i.e. running front-end tests in NodeJS), bootstrap.native requires both window and document to be in scope. You will need to use a mock browser.
As mentioned above, the object properties of the exported object, when using require(), are actual classes when document and window are given - in which case we are sure to be facing an actual browser - and if absent, will be factory methods.
So when using bootstrap.native inside of a NodeJS app, make sure you create a proper Browser-like environment first to avoid unexpected behaviour.
The components are developed with clean code mainly for modern browsers that nativelly support HTML5. When using polyfills, IE8-IE10 will thank you. The library comes with a custom polyfill you can use right away.
<!-- Using one of the CDN repositories-->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.native/2.0.6/polyfill.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.6/polyfill.min.js"></script>
<!-- Using a local assets folder -->
<script type="text/javascript" src="/assets/js/polyfill.min.js"></script>
<!-- Using Bower -->
<script type="text/javascript" src="/bower_components/bootstrap.native/dist/polyfill.min.js"></script>
You can make a custom build of bootstrap-native, including only the modules you need, by using the build.js and build-v4.js scripts.
$ node build.js --help
node build.js [--minify] [--ignore=<modules>...|--only=<modules>...]
Options:
--minify, -m Minify output [boolean] [default: false]
--ignore, -i Omit the given module(s) from the bundle [array]
--only Only include the given module(s) in the bundle [array]
--help Show help [boolean]
Running without --ignore or --only will compile all the modules.
Writes to stdout
*nix users can run ./build.js as well as node build.js.
The library is released under the MIT license.
FAQs
Bootstrap components build with Typescript
The npm package bootstrap.native receives a total of 276,638 weekly downloads. As such, bootstrap.native popularity was classified as popular.
We found that bootstrap.native demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.