bootstrap.native

What is bootstrap.native?

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.

What are bootstrap.native's main functionalities?

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);
});

Other packages similar to bootstrap.native

bootstrap

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

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

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.

README

Native Javascript for Bootstrap

This is a set of scripts developed with vanilla Javascript, with superior performance compared to the original jQuery Plugins for Bootstap 3. Thanks to Ingwie Phoenix for contributing with npm/RequireJS/CommonJS compatibility. See demo for scripting examples and instructions.

CDN

New releases will be available automatically on jsdelivr CDN repositories here.

Bower and NPM

You can install this package by using either Bower or NPM.

$ npm install --save bootstrap.native
# Or
$ bower install --save bootstrap.native

Subsystem compatibility

bootstrap.native is compatible with the CommonJS/RequireJS spec (exporting itself to module.exports). It thus can fall back to adding its exports to the window object.

Browser Support

The scripts are developed with clean code mainly for modern browsers that nativelly support HTML5. When using polyfills IE8-IE9 will thank you.

Usage

You can use the scripts either using a traditional script-tag like so:

<!-- Using a CDN -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.native/0.9.6/bootstrap-native.min.js"></script>
<!-- Using a local assets folder -->
<script type="text/javascript" src="/assets/bootstrap.native.min.js"></script>
<!-- Or using Bower? -->
<script type="text/javascript" src="/bower_components/bootstrap.native/dist/bootstrap-native.min.js"></script>

But it's also possible to use any module loader that supports the RequireJS or CommonJS syntax. An example is RequireJS itself:

<script type="text/javascript">
    var bsn = require("bootstrap.native");
    // Create a button:
    var btn = new bsn.Button(...);
</script>

If you are working in a virtual browser environment, the properties of the returned exports are all functions, that expect both, a global window and a global document variable to exist before calling. An example case is during tests, where you may use NodeJS to run front-end tests. These usually will create a virtual Window and Document object. Once these exist, bootstrap.native will function properly.

An example of this would look like this:

var bsn = require("bootstrap.native");
var browser = require("mock-browser");
global.window = browser.createWindow();
global.document = browser.createDocument();

// Now it's safe to use bootstrap.native and expecting the properties to be the actual component classes.
var Button = btn.Button(); // Create the button class and return it.

var $btn = document.createElement("button");
var myButton = new Button(... $btn and options ...); // Create a button and do a test.

Note About the Factory Methods

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.

Contributors

• Ingwie Phoenix: RequireJS/CommonJS compatibility and usability with common package managers. Was glad to help!
• Full contributors list here. Thanks so much!

License

The scripts are released under the MIT license.