Skip to content

How to use

Jump to bottom Edit New page
thednp edited this page Jun 18, 2020 · 57 revisions

Load from CDN

To load the library from CDN, drop one of these lines below before your ending <head> or </body> tag.

jsdelivr repository

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-native.min.js"></script>

cdnjs repository

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/3.0.0/bootstrap-native.min.js"></script>

Latest releases come here on jsdelivr and here on cdnjs. Other CDN links are also available.

Working locally

If you have to host the library in your project folders, download the package at Github, unpack it, copy the minified/un-minified file from dist/ folder into your application's assets folder, then simply drop this line (according to your application assets folders) before your ending </body> tag. You can also link the library in the <head>, check this out.

<script src="../assets/js/bootstrap-native.min.js"></script>

The /src folder contains the ES6/ES7 JavaScript components and cannot be used right away, except select modern browsers can load them as modules or other ES6/ES7 applications.

ES5 Basic example

You've loaded the library and you're ready to go:

// your script
var myModal = new BSN.Modal('[data-toggle="modal"]', options);

ES6/ES7 Basic Example

You can import the entire library into your application and roll it out:

import BSN from "/bootstrap.native/dist/bootstrap-native.esm.min.js";

let myBtnInit = new BSN.Button('#myBtnID');

Alternatively you can use individual components as modules:

import Button from './bootstrap.native/dist/components/button-native.esm.js'

let myBtnInit = new Button('#myBtnID');

Notice the notation, we're not using new BSN.Button() in these case.

npm

This package can be installed using npm by using the command below. You'll then be able to use the components from the src/components folder.

$ npm install --save bootstrap.native

You can also create custom builds, check the guide below for more info.

Custom Builds

You can make a custom build of bootstrap.native, including only the components you need, by using the build scripts.

Usage

  • create a new file path-to-BSN/src/index-custom.js
  • drop this code, see /src/index.js and /src/util/init.js for a full reference:
import initCallback from './util/initCallback.js'  // OPTIONAL if you use your own init scripting
import removeDataAPI from './util/removeDataAPI.js'  // OPTIONAL if you use your own init scripting
import componentsInit from './util/componentsInit.js' // OPTIONAL if you use your own init scripting
import {version as Version} from './../package.json'
import one from 'shorter.js'

import Alert from './components/alert-native.js'
// add more components you need HERE

// OPTIONAL if you use your own init scripting
componentsInit.Alert = [ Alert, '[data-dismiss="alert"]']  
// add other components similarly here

// bulk initialize all components
// OPTIONAL if you use your own init scripting
document.body ? initCallback() : one( document, 'DOMContentLoaded', initCallback );  

export default {
  Alert,

  initCallback, // OPTIONAL if you use your own init scripting
  removeDataAPI, // OPTIONAL if you use your own init scripting
  componentsInit, // OPTIONAL if you use your own init scripting
  Version // OPTIONAL as well
}
  • Next you can run the following CLI command, in the /trunk folder:
npm run custom INPUTFILE:src/index-custom.js,OUTPUTFILE:dist/bootstrap-native-custom.js,MIN:false,FORMAT:cjs

Build Options

  • INPUTFILE - allows you to specify the source file path
  • OUTPUTFILE - allows you to specify the output file path
  • MIN - when true, it will compress the output
  • FORMAT - umd|cjs|esm and any format you specify or configure your rollup for

Dynamic Content

Go the the demo page, open the console and type in BSN and hit Enter, you get the following object:

BSN = {
  Alert,
  Button,
  Carousel,
  Collapse,
  Dropdown,
  Modal,
  Popover,
  ScrollSpy,
  Tab,
  Toast,
  Tooltip,
  version: '3.x',
  initCallback: function(lookup){},
  supports: [ /* an array with supported components */ ]
}

You can now use the initCallback in combination with various events, like so:

document.addEventListener('eventName', function(){
  BSN.initCallback(document.getElementById('myContainer'));
}, false);

You might want to use events like turbolinks:load (discussed here) or events triggered by AJAX loading content.

In other cases you may want to remove components from your elements, there is another callback removeDataAPI (not exported to global by default, but you can easily include it in own custom builds).

document.addEventListener('eventName', function(){
  BSN.removeDataAPI(document.getElementById('myContainer'));
}, false);

RequireJS, CommonJS

The Native JavaScript for Bootstrap is compatible with anything you want to build for, thanks to its ES6/ES7 sources and tools like rollup. It will work correctly in CommonJS and AMD environments, but falls back to exporting to window in a normal <script> tag environment.

The library can be loaded easily via RequireJS or CommonJS, so if you are using a module loader, you can also use this library via require() as well. Here's how to do it:

// reference the library as dependency
var BSN = require("bootstrap.native");

// Create a Button instance:
var btn = new BSN.Button(element,option);

Alternatively you can use individual components as modules:

var Button = require("bootstrap.native/dist/components/button-native.js");

var myBtnInit = new Button('#myBtnID');

Important 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.

Note About the Factory Methods

As mentioned before, 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 behavior.

Was this helpful or you want to report an error?

How To Direct Links

Clone this wiki locally