Skip to content

Commit

Permalink
V4 Documentation Updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@thednp
thednp committed Feb 14, 2017
1 parent 7f46c5b commit 8828c11
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 13 deletions.
34 changes: 28 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,30 @@ $ bower install --save bootstrap.native

`bootstrap.native` 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.

Traditional script-tag example:
**Traditional script-tag example:**

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

**Use the Bootstrap 4 version:**

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

**Warning:** Do not use files directly from `/lib` folder! These files are just sources for the builds located in the `/dist` folder.

You can also use `bootstrap.native` in a CommonJS environment:
Expand All @@ -41,7 +53,7 @@ var bsn = require("bootstrap.native");
var btn = new bsn.Button(element,'loading');
```

**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:** 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
Expand All @@ -50,7 +62,17 @@ As mentioned above, the object properties of the exported object, when using `re
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 components are developed with clean code mainly for modern browsers that nativelly support HTML5. When using polyfills, IE8-IE9 will thank you.
The components are developed with clean code mainly for modern browsers that nativelly support HTML5. When using polyfills, IE8-IE10 will thank you. The library comes with a custom polyfill you can use right away.

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

# 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.
Expand Down
10 changes: 5 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
<!-- Just use it for all browsers on production websites. -->

<!-- Native JavaScript for Bootstrap 3 Polyfill -->
<!-- <script src="https://cdn.jsdelivr.net/bootstrap.native/2.0.3/polyfill.min.js"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/bootstrap.native/2.0.4/polyfill.min.js"></script> -->
<script src="./dist/polyfill.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
Expand Down Expand Up @@ -196,9 +196,9 @@ <h3>Load from CDN</h3>
and <a href="https://cdnjs.com/libraries/bootstrap.native">here</a> on cdnjs. Other <a href="https://www.google.com/search?q=bootstrap+native+cdn" target="_blank">CDN links</a> are also available.</p>

<pre><code class="language-markup">&lt;!-- jsdelivr repo --&gt;
&lt;script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/2.0.3/bootstrap-native.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/2.0.4/bootstrap-native.min.js"&gt;&lt;/script&gt;
&lt;!-- or cdnjs repo --&gt;
&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.3/bootstrap-native.min.js"&gt;&lt;/script&gt;</code></pre>
&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.4/bootstrap-native.min.js"&gt;&lt;/script&gt;</code></pre>

<p>As most of the scripts manipulate the DOM when ready, there is no need to include a <code>document.ready</code> like statement or link the script(s) in the <code>&lt;head&gt;</code>. We don't do that
with native JavaScript unless required by a special ocasion.</p>
Expand Down Expand Up @@ -234,7 +234,7 @@ <h3>Browser support</h3>
<p>The Native JavaScript for Bootstrap comes with a dedicated <kbd>4Kb</kbd> polyfill we made called <em><a href="./assets/js/polyfill.js" target="_blank">polyfill.js</a></em> for IE8-IE11. Since most
of the legacy browsers don't cover support for the standardized <code>Event</code> the <em>polyfill.js</em> can be combined with HTML5 shims like so:</p>

<pre><code class="language-markup">&lt;script src="https://cdn.jsdelivr.net/bootstrap.native/2.0.3/polyfill.min.js"> &lt;/script>
<pre><code class="language-markup">&lt;script src="https://cdn.jsdelivr.net/bootstrap.native/2.0.4/polyfill.min.js"> &lt;/script>
&lt;!--[if lt IE 9]>
&lt;script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">&lt;/script>
&lt;![endif]-->
Expand Down Expand Up @@ -3244,7 +3244,7 @@ <h3 class="visible-xs">Navigation</h3>
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>

<!--<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/2.0.3/bootstrap-native.min.js"></script> now we have CDN -->
<!--<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/2.0.4/bootstrap-native.min.js"></script> now we have CDN -->
<!--<script type="text/javascript" src="./dist/bootstrap-native.min.js"></script>-->
<script type="text/javascript" src="./dist/bootstrap-native.js"></script>
<script type="text/javascript" src="./assets/js/scripts.js"></script>
Expand Down
33 changes: 31 additions & 2 deletions v4.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,35 @@ <h1>What's the fuzz?</h1>
</div>

<div class="container">

<h1>Using V4</h1>
<p>The Native JavaScript for Bootstrap version 4 is identical with the version 3 in terms of usage, options, methods and original events, except that version 4 does not support the <b>Affix</b> component, so please refer to <a href="index.html">V3 for documentation</a>.</p>

<h2>Quick Usage Guide </h2>

<h3>CDN</h3>

<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"//cdn.jsdelivr.net/bootstrap.native/2.0.4/bootstrap-native-v4.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
</code></pre></div>

<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"//cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.4/bootstrap-native-v4.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
</code></pre></div>

<p>Unfortunately IE10+ browsers still require <code>Event</code>, <code>CustomEvent</code> and <code>dispatchEvent</code> polyfills:</p>

<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"//cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.4/polyfill.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
</code></pre></div>

<h3>npm/Bower</h3>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript">$ npm install --save bootstrap.native
# Or
$ bower install --save bootstrap.native
</code></pre></div>

<p>In order to be able to use V4, after you have installed the package you need to edit the <code>bower.json</code> and/or <code>package.json</code> to use the V4 as main file: </p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript">"main": "dist/bootstrap-native-v4.js",</code></pre></div>

<h1>Examples</h1>
<h2>Alert</h2>
<div class="bd-example" data-example-id="">
<div class="alert alert-warning alert-dismissible fade show" role="alert">
Expand All @@ -137,7 +166,7 @@ <h2>Buttons</h2>
<div class="bd-example" data-example-id="">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked="" autocomplete="off"> Checkbox 1
<input type="checkbox" checked="" autocomplete="off"> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 2
Expand All @@ -162,7 +191,7 @@ <h2>Buttons</h2>
<div class="bd-example" data-example-id="">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked=""> Radio 1
<input type="radio" name="options" id="option1" autocomplete="off" checked=""> Radio 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
Expand Down

0 comments on commit 8828c11

Please sign in to comment.