Bootstrap Essentials

Bootstrap is a great Front End development framework to create brilliant sites. However, being a developer, we need more customization options that are fast to implement. By studying different types of website, it is understood the further CSS classes are required to support a fast development experience

Example

The offcanvas plugin allows you to hide an element from sight and than show it by moving either that or any other element. It's intended to be used for off canvas navigation, like push menus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in aliquet nisl. Praesent sed leo congue, fringilla eros eu, tempus metus. Nam mollis odio ipsum, non vehicula ipsum accumsan sodales. Morbi varius vitae elit euismod cursus. Donec a dapibus justo, in facilisis nisi. Suspendisse ut turpis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui risus, tincidunt at odio ut, ultrices dignissim ipsum. Cras ultrices erat nec leo luctus varius. Nulla sollicitudin tincidunt nulla, ut porta mauris volutpat vitae. Suspendisse ornare dolor sit amet massa venenatis pulvinar.


<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
            ...
</nav>
<div class="navbar navbar-default navbar-fixed-top">
    <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
</div>

Usage

Add .offcanvas to hide an element. Alternatively add .offcanvas-* to hide an element up to a specific viewport width. Adding the .offcanvas class is not required. You may also hide an element by any other means.

The effect works best for elements positioned to the top, bottom, left or right of the window, either with absolute or fixed positioning.

When shown, the plugin adds .canvas-slid to the element that has slid.

Via data attributes

Add data-toggle="offcanvas" and a data-target to control, assigning it to show and hide the target element. The data-target attribute accepts a CSS selector to apply the collapse to.

Optionally add a data-canvas attribute to slide a canvas instead of only the target element. For a push menu set data-canvas="body".

Via JavaScript

Call the input mask via javascript:

$('.navmenu').offcanvas()

Options

Name	type	default	description
canvas	string	false	If set, the canvas will be moved on show and hide instead of the target element. This creates alternative effects.
toggle	boolean	true	Toggles the off canvas element on invocation
placement	string	'auto'	Where to position the element at the start of the animation. For example, if placement is "left", the element will slide from left to right. The default option "auto" guesses the placement based on position and dimension.
autohide	boolean	true	Hide the off canvas element if clicked anywhere other that the element.
recalc	boolean	true	Calculate if off canvas should be disabled for this viewport width on window resize. If your elements always gets hidden on window resize, try setting this to false.
disableScrolling	boolean	true	Disable scrolling when the off canvas element is shown, by setting overflow to hidden for the body.

Graceful degradation

For browsers that don't support transform (mainly IE8), the target option is ignored. In that case, the plugin will always slide the target element. In that case .canvas-slid will be added to the target element instead.

Methods

.offcanvas(options)

Initializes the off canvas element with an optional options.

.offcanvas('toggle')

Toggles an off canvas element to shown or hidden.

.offcanvas('show')

Shows an off canvas element.

.offcanvas('hide')

Hides an off canvas element.

Events

Event Type	Description
show.bs.offcanvas	This event fires immediately when the show instance method is called.
shown.bs.offcanvas	This event is fired when the target has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.offcanvas	This event is fired immediately when the hide instance method has been called.
hidden.bs.offcanvas	This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

Examples

The file input plugin allows you to create a visually appealing file or image input widgets. This plugin is essential as it provide uniform look and feel to input[type="file"] element in all browsers.

File input widgets

Select fileChange Remove


<div class="fileinput fileinput-new input-group" data-provides="fileinput">
    <div class="form-control" data-trigger="fileinput">
        <i class="glyphicon glyphicon-file fileinput-exists"></i> 
        <span class="fileinput-filename"></span>
    </div>
    <span class="input-group-addon btn btn-default btn-file">
        <span class="fileinput-new">Select file</span>
        <span class="fileinput-exists">Change</span>
        <input type="file" name="...">
    </span>
    <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>

Select fileChange ×


<div class="fileinput fileinput-new" data-provides="fileinput">
    <span class="btn btn-default btn-file">
        <span class="fileinput-new">Select file</span>
        <span class="fileinput-exists">Change</span>
        <input type="file" name="...">
    </span>
    <span class="fileinput-filename"></span>
    <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
</div>

Image upload widgets

When uploading an image, it's possible to show a thumbnail instead of the filename.

Select imageChange Remove

<div class="fileinput fileinput-new" data-provides="fileinput">
                <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
                <div>
                    <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
                    <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
                </div>
                </div>

Select imageChange Remove

<div class="fileinput fileinput-new" data-provides="fileinput">
                <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
                    <img data-src="holder.js/100%x100%" alt="...">
                </div>
                <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
                <div>
                    <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
                    <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
                </div>
                </div>

Image preview only works in IE10+, FF3.6+, Safari6.0+, Chrome6.0+ and Opera11.1+. In older browsers the filename is shown instead.

Usage

Add .fileinput to the container. Elements inside the container with .fileinput-new and .fileinput-exists are shown or hidden based on the current state. A preview of the selected file is placed in .fileinput-preview. The text of .fileinput-filename gets set to the name of the selected file.

The file input widget should be placed in a regular <form> replacing a standard <input type="file">. The server side code should handle the file upload as normal.

Via data attributes

Add data-provides="fileinput" to the .fileinput element. Implement a button to clear the file with data-dismiss="fileinput". Add data-trigger="fileinput" to any element within the .fileinput widget to trigger the file dialog.

Via JavaScript

$('.fileinput').fileinput()

Layout

Using the given elements, you can layout the upload widget the way you want, either with a fixed width and height or with max-width and max-height.

Options

Name	type	description
name	string	Use this option instead of setting the `name` attribute on the `<input>` element to prevent it from being part of the post data when not changed.

Methods

.fileinput(options)

Initializes a file upload widget.

.fileinput('clear')

Clear the selected file.

.fileinput('reset')

Reset the form element to the original value.

Events

Event Type	Description
change.bs.fileinput	This event is fired after a file is selected.
clear.bs.fileinput	This event is fired when the file input is cleared.
reset.bs.fileinput	This event is fired when the file input is reset.

Slide plugin was specifically created to support sliding navbar. This plugin will be discontinued as soon as jasny's OffCanvas is fixed. For futher support for sliding menu, please refer to offcanvas plugin

Usage

The slide plugin utilizes a few classes to handle the heavy lifting:

.slide hides the content with animation
.slide.in shows the content with animation

These classes can be found in scss/nav/_slide.scss.

Via data attributes

Just add data-toggle="slide" and a data-target to the element to automatically assign control of a sliding navbar. The data-target attribute accepts a CSS selector to apply the slide to. Be sure to add the class slide to the slideable element. Additional option of data-toggle="slide-in" allow you to just slide the navbar over the body. Refer to the demo to see this in action.

Via JavaScript

Enable manually with:

Copy

$('.slide').slide()

Options

Options can be passed via data attributes or JavaScript.

Name	type	default	description
backdrop	boolean	true	Toggles a modal like backdrop to navbar slide.
toggle	boolean	true	Toggles the sliding element on invocation

Methods

`.slide(options)`

Activates your content as a sliding element. Accepts an optional options object.

Copy

$('#navbar').slide({
  toggle: false,
  backdrop: false
})

`.slide('toggle')`

Toggles a sliding element to shown or hidden. Returns to the caller before the sliding element has actually been shown or hidden (i.e. before the shown.bs.slide or hidden.bs.slide event occurs).

`.slide('show')`

Shows a sliding element. Returns to the caller before the sliding element has actually been shown (i.e. before the shown.bs.slide event occurs).

`.slide('hide')`

Hides a sliding element. Returns to the caller before the sliding element has actually been hidden (i.e. before the hidden.bs.slide event occurs).

Events

Bootstrap's slide class exposes a few events for hooking into slide functionality.

Event Type	Description
show.bs.slide	This event fires immediately when the `show` instance method is called.
shown.bs.slide	This event is fired when a slide element has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.slide	This event is fired immediately when the `hide` method has been called.
hidden.bs.slide	This event is fired when a slide element has been hidden from the user (will wait for CSS transitions to complete).

Copy

$('#navbar').on('hidden.bs.slide', function () {
  // do something…
})

JavaScript

Overview

Off canvas offcanvas.js

Example

Usage

Via data attributes

Via JavaScript

Options

Graceful degradation

Methods

.offcanvas(options)

.offcanvas('toggle')

.offcanvas('show')

.offcanvas('hide')

Events

File input fileinput.js

Examples

File input widgets

Image upload widgets

Usage

Via data attributes

Via JavaScript

Layout

Options

Methods

.fileinput(options)

.fileinput('clear')

.fileinput('reset')

Events

Slide slide.js

Usage

Via data attributes

Via JavaScript

Options

Methods

`.slide(options)`

`.slide('toggle')`

`.slide('show')`

`.slide('hide')`

Events