How to use

thednp edited this page May 12, 2018 · 11 revisions

npm, Bower

This package can be installed using npm or Bower by using either of the commands below. You'll then be able to use the assets from the provided directory.

# Via bower:
$ bower install --save bootstrap.native

# Via NPM:
$ npm install --save bootstrap.native
You can also create custom builds, check the README for more info.

RequireJS, CommonJS

The Native JavaScript for Bootstrap 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.

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

Additionally, to use V4, you can do the following:

// reference the V4 version of the library as dependency
var bsn = require('bootstrap.native/dist/bootstrap-native-v4');

// Create a Carousel instance
var myCarousel = new bsn.Carousel(element,options);

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

Custom Builds

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.

Usage:

$ node build.js --help
node build.js [--minify] [--ignore=<modules>...|--only=<modules>...]

Options:
  --minify, -m       Minify output                         [boolean] [default: false]
  --autoInitDataAPI  Automatically initialize the Data API  [boolean] [default: true]
  --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

A quick use case when you pack specific components:

// include only Alert and Modal for Bootstrap 3
node build.js --minify --only alert modal

// include only Alert and Modal for Bootstrap 4
node build-v4.js --minify --only alert modal

Another use case for developers who need control over the initialization, it is possible to exclude utils-init.js/utils-init-v4.jsfrom the custom build:

// do not include the `initializeDataAPI` into the Bootstrap 3 build
node build.js --minify --autoInitDataAPI false

// do not include the `initializeDataAPI` into the Bootstrap 4 build
node build-v4.js --minify --autoInitDataAPI false

*nix users can run ./build.js as well as node build.js.

Load from CDN

To load the library from CDN, drop one of these lines below before your ending </body> tag. With version 2.0.18 you can also link the library in your site <head>, so you should check this tip here.

jsdelivr repository

<!-- V3 version -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap.native@2.0.15/dist/bootstrap-native.min.js"></script>

<!-- V4 version -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap.native@2.0.15/dist/bootstrap-native-v4.min.js"></script>

cdnjs repository

<!-- V3 version -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.15/bootstrap-native.min.js"></script>

<!-- V4 version -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.15/bootstrap-native-v4.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.

<!-- V3 version -->
<script type="text/javascript" src="../assets/js/bootstrap-native.min.js"></script>

<!-- V4 version -->
<script type="text/javascript" src="../assets/js/bootstrap-native-v4.min.js"></script>

The /lib folder contains the source for JavaScript components and cannot be used right away, they depend on the utility functions from the utils.js file. You need to create a custom build, so check npm/bower section above.

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.