Skip to content

How to use

Jump to bottom Edit New page
thednp edited this page Nov 18, 2024 · 57 revisions

Before you go

Highly recommended read, the TL;DR of this library is actually cool. This library doesn't require any major third party library like Popper.js.

Installation

This package can be installed using npm, pnpm, yarn, deno by using the commands below.

npm install bootstrap.native
pnpm install bootstrap.native
yarn add bootstrap.native
deno add npm:bootstrap.native@latest

Clone the package

git clone https://github.com/thednp/bootstrap.native.git

Run the tests suite

  • Download the package from Github;
  • unpack/unzip and open the folder with your editor;
  • open your terminal and navigate to the root of the unpacked folder;
  • run npm install or npm update, takes a few minutes to download the Electron browser;
  • run npm run test-ui to open the Vitest console OR npm run test to run the tests in headless mode.

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/bootstrap.native@latest/dist/bootstrap-native.js"></script>

Working locally

If you have to host the library in your project folders, download the package at Github, unpack it, copy the minified .js 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>.

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

The /src folder contains the Typescript source code and cannot be imported. Only the files specified in the exports can be imported.

HTML Basic example

You've linked the library in your page and you're ready to go:

// your script
var myModal = new BSN.Modal('#myModal', options);

Typescript/ESNext Basic Example

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

import * as BSN from "bootstrap.native";

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

Alternatively you can import and use individual components as ESNext modules:

import Button from 'bootstrap.native/button'

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

Dynamic Content

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

/* BSN for Bootstrap 5+
----------------------- */
BSN = {
  Alert,
  Button,
  Carousel,
  Collapse,
  Dropdown,
  Modal,
  Popover,
  ScrollSpy,
  Tab,
  Toast,
  Tooltip,
  initCallback: function(lookup){},
  removeDataAPI: function(lookup){},
}

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

// BSN for Bootstrap 4+
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

// BSN for Bootstrap 4+
document.addEventListener('eventName', function(){
  BSN.removeDataAPI(document.getElementById('myContainer'));
}, false);

RequireJS, CommonJS

BSN is compatible with anything you want to build for, thanks to its Typescript source and tools like Vite. It will work correctly in CommonJS.

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/button");

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