bootstrap.native 0,1,1 Bower npm

If you are looking for Bootstrap without jQuery or vanilla Javascript for Bootstrap, this is the place to get started.

Native Javascript for Bootstrap

This is a set of scripts developed with native Javascript for Bootstrap 3 series, and featuring superior performance compared to the original jQuery Plugins. 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 and CDNjs repositories.

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.

Usage

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

<!-- Using one of the CDN repositories-->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.native/1.0.5/bootstrap-native.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap.native/1.0.5/bootstrap-native.min.js"></script>
<!-- Using a local assets folder -->
<script type="text/javascript" src="/assets/js/bootstrap.native.min.js"></script>
<!-- Or using Bower? -->
<script type="text/javascript" src="/bower_components/bootstrap.native/dist/bootstrap-native.min.js"></script>

Note that you may not be able to use files directly from /lib folder because they are missing the utilities. These files are sources for the builds located in the /dist folder.

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 = bsn.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.

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.

Custom Builds

You can make a custom build of bootstrap-native, including only the modules you need, by using the build.js script.

Usage:

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

Contributors

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

License

The scripts are released under the MIT license.

Related Repositories

bootstrap

bootstrap

Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped), no 3rd party JS dependencies (jQuery, bootstrap JS) required. Please read the README.md file before submitting an issue! ...

ngx-bootstrap

ngx-bootstrap

Native Angular directives for Bootstrap ...

angular-bootstrap-datetimepicker

angular-bootstrap-datetimepicker

Native AngularJS datetime picker directive styled by Twitter Bootstrap ...

react-native-full-example

react-native-full-example

第一个完整的react-native项目。包括服务端和移动端两部分。服务端使用express+bootstrap进行搭建,主要功能有登录、退出、模块选择、查看、修改、删除、分页等后台管理的基本功能;移动端主要用到组件View、Text、Image、ScrollView、ListView等常用的组件,也使用了第三方的地图服务(高德地图),作为初学者。是一个很好的学习案例。 ...

bootstrap.native

bootstrap.native

If you are looking for Bootstrap without jQuery or vanilla Javascript for Bootstrap, this is the place to get started. ...


Top Contributors

thednp IngwiePhoenix RyanZim zandaqo soda0289 PaulBGD janpanschab malexdev antoligy crcastle troyk XhmikosR mgiulio HelloGravity

Dependencies

package version
dev onchange ^3.0.2
uglify-js ^2.7.3
yargs ^5.0.0

Releases

-   1.0.5 zip tar
-   1.0.4 zip tar
-   1.0.3 zip tar
-   1.0.2 zip tar
-   1.0.1 zip tar
-   1.0.0 zip tar
-   0.9.9 zip tar
-   0.9.8 zip tar
-   0.9.7 zip tar
-   0.9.6 zip tar
-   0.9.5 zip tar
-   0.9.4 zip tar
-   0.9.3 zip tar
-   0.9.2 zip tar