Reusable components to built the user interface.
Reusable components to built the user interface.
Navmenu is a vertical navigation component. By default it shares it look and feel with the navmenu component.
The navmenu is 300px wide by default. You can change this by customizing the
@navmenu-width variable or by setting the width of
.navmenu in your CSS.
Be sure to add a
role="navigation" to every navmenu to help with accessibility.
The fixed navmenu will overlay your other content, unless you add
padding to the left or right of the
<body>. Try out your own values or use our snippet below. Tip: By default, the navmenu is 300px wide.
Make sure to include this after the Jasny Bootstrap CSS.
With the offcanvas plugin, you can hide the navmenu off canvas. This is especially useful for screens with a small viewport.
Modify the look of the navmenu by adding
.alert-fixed-top top stick the alert on top of your page. Use
.alert-fixed-bottom for the bottom.
Give a button some extra style by adding a label. Add
.btn-labeled to any button with a label.
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.
.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.
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
Options can be placed both on control and on target menu element.
|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.|
|exclude||string||null||Set css selectors for elements, that have fixed positioning and that should not be moved when showing\hiding menu.|
|disableScrolling||boolean||true||Disable scrolling when the off canvas element is shown, by setting overflow to hidden for the body.|
|backdrop||boolean||false||If backdrop should be shown when menu is opened, in modal-like style.|
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.
If there are two (or more) menus on the page, there can be only one opened at a time. When menu attempts to be opened, already opened one will be closed first. It's almost fully automated, accept that
data-exclude option should be set for each menu, holding references to other menus. For example, if we have two menus
#menu-right, then they should have the following option set, correspondingly:
Initializes the off canvas element with an optional options.
Toggles an off canvas element to shown or hidden.
Shows an off canvas element.
Hides an off canvas element.
|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).|
This plugin turns a table row into a clickable link.
|File input||The file input plugin allows you to create a visually appealing file widgets.||Action|
|jasny.net||Shared knowledge of Arnold Daniels aka Jasny.||Action|
.rowlink and attribute
data-link="row" to a
<tbody> element. For other options append the name to
data-, as in
data-target="a.mainlink" A cell can be excluded by adding the
.rowlink-skip class to the
|target||string||'a'||A jquery selector string, to select the link element within each row.|
Makes the rows of a table or tbody clickable.
The file input plugin allows you to create a visually appealing file or image input widgets.
In first of the following examples one can easily add support for file icon, how it previously was, untill Bootstrap dropped Glyphicons. Include the link to iconic font on the page, and replace the following line
with the following (
glyphicon classes should be changed to the ones that you use):
When uploading an image, it's possible to show a thumbnail instead of the filename.
Image preview only works in IE10+, FF3.6+, Safari6.0+, Chrome6.0+ and Opera11.1+. In older browsers the filename is shown instead.
.fileinput to the container. Elements inside the container with
.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.
Multiple file uploads can be handled by adding
multiple attribute to file input element. Names of files are shown in name preview, joined by comma. In image preview only the first image is shown.
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.
data-provides="fileinput" to the
.fileinput element. Implement a button to clear the file with
data-trigger="fileinput" to any element within the
.fileinput widget to trigger the file dialog.
Using the given elements, you can layout the upload widget the way you want, either with a fixed
height or with
|name||string||Use this option instead of setting the
|clearName||boolean||Sets if file input name should be cleared when input is cleared. It's
|maxSize||float||Use this option if you want to limit file upload size. It's in
Initializes a file upload widget.
Clear the selected file.
Reset the form element to the original value.
|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 before the file input is reset.|
|reseted.bs.fileinput||This event is fired after the file input is reset.|
|max_size.bs.fileinput||This event is fired, if at least one of selected files has size greater then