Customize and download
-Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version.
- - -diff --git a/_includes/ads.html b/_includes/ads.html new file mode 100644 index 00000000..1e4a2611 --- /dev/null +++ b/_includes/ads.html @@ -0,0 +1,10 @@ +
diff --git a/customize/index.html b/_includes/customizer-variables.html similarity index 60% rename from customize/index.html rename to _includes/customizer-variables.html index f7574c4a..d0ae974b 100644 --- a/customize/index.html +++ b/_includes/customizer-variables.html @@ -1,293 +1,4 @@ - - - - - - - - - -Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version.
- - -Hooray! Your custom version of Jasny Bootstrap is now ready to be compiled. Just click the button below to finish the process.
-{{ page.lead }}
+ {% include ads.html %} +{content}in '+m+" ";var n=function(a,c,d){a.extract[c]!==b&&k.push(i.replace(/\{line\}/,(parseInt(a.line,10)||0)+(c-1)).replace(/\{class\}/,d).replace(/\{content\}/,a.extract[c]))};a.extract?(n(a,0,""),n(a,1,"line"),n(a,2,""),f+="on line "+a.line+", column "+(a.column+1)+":
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.
Add either .navmenu-fixed-left or .navmenu-fixed-right.
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.
+ +{% highlight html %} + + +{% endhighlight %} + +There is a full example for an off canvas push menu as well as examples for an off canvas navmenu with an slide in and reveal effect.
+Modify the look of the navmenu by adding .navmenu-inverse.
Add .alert-fixed-top top stick the alert on top of your page. Use .alert-fixed-bottom for the bottom.
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.
<nav class="navmenu navmenu-default" role="navigation">
- <a class="navmenu-brand" href="#">Brand</a>
-
- <ul class="nav navmenu-nav">
- <li class="active"><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
- <ul class="dropdown-menu navmenu-nav" role="menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
- <li><a href="#">Separated link</a></li>
- <li><a href="#">One more separated link</a></li>
- </ul>
- </li>
- </ul>
-</nav>
-Be sure to add a role="navigation" to every navmenu to help with accessibility.
Add either .navmenu-fixed-left or .navmenu-fixed-right.
<nav class="navmenu navmenu-default navmenu-fixed-left offcanvas-sm" role="navigation">
- ...
-</nav>
-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.
@media (min-width: 992px) {
- body {
- padding-left: 300px;
- }
-}
-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.
- -<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>
-There is a full example for an off canvas push menu as well as examples for an off canvas navmenu with an slide in and reveal effect.
-Modify the look of the navmenu by adding .navmenu-inverse.
<nav class="navmenu navmenu-inverse" role="navigation">
- ...
-</nav>
-Add .alert-fixed-top top stick the alert on top of your page. Use .alert-fixed-bottom for the bottom.
<div class="alert alert-success alert-fixed-top">
- <strong>Success!</strong> Your action has been completed succefully.
-</div>
-Added .container-smooth a container to use the same max-width for all viewport sizes. This means that the container size won't jump at media query breakpoints.
Give a button some extra style by adding a label. Add .btn-labeled to any button with a label.
Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
- - -Added .container-smooth a container to use the same max-width for all viewport sizes. This means that the container size won't jump at media query breakpoints.
Give a button some extra style by adding a label. Add .btn-labeled to any button with a label.
<!-- Standard button with label -->
-<button type="button" class="btn btn-labeled btn-default"><span class="btn-label"><i class="glyphicon glyphicon-arrow-left"></i></span>Left</button>
-
-<!-- Standard button with label on the right side -->
-<button type="button" class="btn btn-labeled btn-default">Right<span class="btn-label btn-label-right"><i class="glyphicon glyphicon-arrow-right"></i></span></button>
-
-<!-- Success button with label -->
-<button type="button" class="btn btn-labeled btn-success"><span class="btn-label"><i class="glyphicon glyphicon-ok"></i></span>Success</button>
-
-<!-- Danger button with label -->
-<button type="button" class="btn btn-labeled btn-danger"><span class="btn-label"><i class="glyphicon glyphicon-remove"></i></span>Danger</button>
-Jasny Bootstrap is an extension to Twitter Bootstrap, adding a number of features and components.
+The aim of Jasny Bootstrap is to provide all the required features for building highly interactive web applications for desktop and mobile.
+ +As of version 3.1.0 Jasny Bootstrap is no longer bundeled with Twitter Bootstrap. You should load Twitter Bootstrap's CSS before this extension.
+Jasny Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
+ +The fastest way to get Jasny Bootstrap is to download the compiled and minified versions of our CSS and JavaScript. No documentation or original source files are included.
+ + +CDNJS is a community driven CDN hosted by CloudFlare, supporting over a hundred projects. To use this CDN, swap your local instances for the CDN links listed below.
+{% highlight html %} + + + + + +{% endhighlight %} + + +Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.
+Once downloaded, unzip the compressed folder to see the structure of (the compiled) Jasny Bootstrap. You'll see something like this:
+ + +{% highlight bash %} +jasny-bootstrap/ +├── css/ +│ ├── jasny-bootstrap.css +│ ├── jasny-bootstrap.min.css +└── js/ + ├── jasny-bootstrap.js + └── jasny-bootstrap.min.js + +{% endhighlight %} + +This is the most basic form of Jasny Bootstrap. We provide compiled CSS and JS (jasny-bootstrap.*), as well as compiled and minified CSS and JS (jasny-bootstrap.min.*).
The jasny-bootstrap.* files should be loaded in conjunction with the original Twitter Bootstrap files.
Please note that all JavaScript plugins require jQuery to be included, as shown in the starter template. Consult our bower.json to see which versions of jQuery are supported.
Start with this basic HTML template, or modify these examples. We hope you'll customize our templates and examples, adapting them to suit your needs.
+ +Copy the HTML below to begin working with a minimal Bootstrap document.
+{% highlight html %} + + + +Create diverse and advanced user interfaces using Jasny's Bootstrap components. See also Customizing Bootstrap for tips on maintaining your own Bootstrap variants.
+ +
+
+ Nothing but the basics: compiled CSS and JavaScript along with a container.
+
+
+ A basic template showing the navmenu element and demonstrates usage of the offcanvas plugin.
+
+
+ A template demonstrating a reveal effect by placing the navmenu under the content.
+Folks looking to upgrade to v3 should use this section as a general upgrade guide. We've outlined some of the major changes and provided tables that highlight key changes.
+ +This table shows the style changes between v2.x and v3.0.
+| Bootstrap 2.x | +Bootstrap 3.0 | +
|---|---|
.container-semifluid |
+ .container-smooth |
+
.fileupload .fileupload-* |
+ .fileinput .fileinput-* |
+
We've added new elements and changed some existing ones. Here are the new or updated styles.
+| Element | +Description | +
|---|---|
| Navmenu | +.navmenu .navmenu-default .navmenu .navmenu-inverse .navmenu-fixed-left .navmenu-fixed-right .navmenu-brand .navmenu-nav |
+
| Fixed alerts | +.alert-fixed-top .alert-fixed-bottom |
+
| Off canvas | +.offcanvas .offcanvas-* |
+
The following elements have been dropped or changed in v3.0.
+| Element | +Removed from 2.x | +3.0 Equivalent | +
|---|---|---|
| Header actions | +.header-actions |
+ N/A | +
| Table actions | +.table-actions |
+ N/A | +
| Desktop rows | +.row-desktop |
+ .row > .col-md-* |
+
| Action links | +.act-* |
+ N/A | +
| Page alerts | +.pagealert |
+ .alert-fixed-top |
+
| Iconic icons | +.iconic-* |
+ N/A | +
| Editor textarea | +.editor |
+ N/A | +
Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach. Here's a partial list:
+For more information on upgrading to v3.0, and code snippets from the community, see Bootply.
+An overview of Jasny Bootstrap, how to download and use, basic templates and examples, and more.
- - -Jasny Bootstrap is an extension to Twitter Bootstrap, adding a number of features and components.
-The aim of Jasny Bootstrap is to provide all the required features for building highly interactive web applications for desktop and mobile.
- -As of version 3.1.0 Jasny Bootstrap is no longer bundeled with Twitter Bootstrap. You should load Twitter Bootstrap's CSS before this extension.
-Jasny Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
- -The fastest way to get Jasny Bootstrap is to download the compiled and minified versions of our CSS and JavaScript. No documentation or original source files are included.
- - -CDNJS is a community driven CDN hosted by CloudFlare, supporting over a hundred projects. To use this CDN, swap your local instances for the CDN links listed below.
-<!-- Latest compiled and minified CSS -->
-<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
-
-<!-- Latest compiled and minified JavaScript -->
-<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>
-Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.
-Once downloaded, unzip the compressed folder to see the structure of (the compiled) Jasny Bootstrap. You'll see something like this:
- - -jasny-bootstrap/
-├── css/
-│ ├── jasny-bootstrap.css
-│ ├── jasny-bootstrap.min.css
-└── js/
- ├── jasny-bootstrap.js
- └── jasny-bootstrap.min.js
-
-This is the most basic form of Jasny Bootstrap. We provide compiled CSS and JS (jasny-bootstrap.*), as well as compiled and minified CSS and JS (jasny-bootstrap.min.*).
The jasny-bootstrap.* files should be loaded in conjunction with the original Twitter Bootstrap files.
Please note that all JavaScript plugins require jQuery to be included, as shown in the starter template. Consult our bower.json to see which versions of jQuery are supported.
Start with this basic HTML template, or modify these examples. We hope you'll customize our templates and examples, adapting them to suit your needs.
- -Copy the HTML below to begin working with a minimal Bootstrap document.
-<!DOCTYPE html>
-<html>
- <head>
- <title>Bootstrap 101 Template</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <!-- Bootstrap -->
- <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
- <link href="css/jasny-bootstrap.min.css" rel="stylesheet" media="screen">
-
- <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
- <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
- <!--[if lt IE 9]>
- <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
- <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
- <![endif]-->
- </head>
- <body>
- <h1>Hello, world!</h1>
-
- <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
- <script src="https://code.jquery.com/jquery.js"></script>
- <!-- Include all compiled plugins (below), or include individual files as needed -->
- <script src="js/bootstrap.min.js"></script>
- <script src="js/jasny-bootstrap.min.js"></script>
- </body>
-</html>
-Create diverse and advanced user interfaces using Jasny's Bootstrap components. See also Customizing Bootstrap for tips on maintaining your own Bootstrap variants.
- -
-
- Nothing but the basics: compiled CSS and JavaScript along with a container.
-
-
- A basic template showing the navmenu element and demonstrates usage of the offcanvas plugin.
-
-
- A template demonstrating a reveal effect by placing the navmenu under the content.
-Folks looking to upgrade to v3 should use this section as a general upgrade guide. We've outlined some of the major changes and provided tables that highlight key changes.
- -This table shows the style changes between v2.x and v3.0.
-| Bootstrap 2.x | -Bootstrap 3.0 | -
|---|---|
.container-semifluid |
- .container-smooth |
-
.fileupload .fileupload-* |
- .fileinput .fileinput-* |
-
We've added new elements and changed some existing ones. Here are the new or updated styles.
-| Element | -Description | -
|---|---|
| Navmenu | -.navmenu .navmenu-default .navmenu .navmenu-inverse .navmenu-fixed-left .navmenu-fixed-right .navmenu-brand .navmenu-nav |
-
| Fixed alerts | -.alert-fixed-top .alert-fixed-bottom |
-
| Off canvas | -.offcanvas .offcanvas-* |
-
The following elements have been dropped or changed in v3.0.
-| Element | -Removed from 2.x | -3.0 Equivalent | -
|---|---|---|
| Header actions | -.header-actions |
- N/A | -
| Table actions | -.table-actions |
- N/A | -
| Desktop rows | -.row-desktop |
- .row > .col-md-* |
-
| Action links | -.act-* |
- N/A | -
| Page alerts | -.pagealert |
- .alert-fixed-top |
-
| Iconic icons | -.iconic-* |
- N/A | -
| Editor textarea | -.editor |
- N/A | -
Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach. Here's a partial list:
-For more information on upgrading to v3.0, and code snippets from the community, see Bootply.
-The missing components for your favorite front-end framework.
- Download - or Download source + Download + or Download source
Plugins can be included individually (using Jasny Bootstrap's individual *.js files), or all at once (using jasny-bootstrap.js or the minified jasn-bootstrap.min.js).
The Jasny Bootstrap plugins work with or without loading Twitter Bootstrap's bootstrap.js.
Both jasny-bootstrap.js and jasny-bootstrap.min.js contain all plugins in a single file.
You can use all Jasny Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.
+ +That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with data-api. This looks like this:
+{% highlight js %}
+$(document).off('.data-api')
+{% endhighlight %}
+
+
Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:
+{% highlight js %} +$(document).off('.alert.data-api') +{% endhighlight %} + +We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.
+{% highlight js %} +$(".fileinput").fileinput().addClass("fat") +{% endhighlight %} + +All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):
+{% highlight js %} +$("#myMenu").offcanvas() // initialized with defaults +$("#myMenu").offcanvas({ autohide: false }) // initialized with no autohide +$("#myMenu").offcanvas('show') // initializes and invokes show immediately +{% endhighlight %} + +Each plugin also exposes its raw constructor on a Constructor property: $.fn.popover.Offcanvas. If you'd like to get a particular plugin instance, retrieve it directly from an element: $('.navmenu').data('offcanvas').
Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call .noConflict on the plugin you wish to revert the value of.
Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. show) is triggered at the start of an event, and its past participle form (ex. shown) is trigger on the completion of an action.
As of 3.1.2, all Bootstrap events are namespaced.
+All infinitive events provide preventDefault functionality. This provides the ability to stop the execution of an action before it starts.
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 intented to be used for off canvas navigation, like push menus.
+ +{% highlight html %} + + +{% endhighlight %} + +For better understanding, have a look at the off canvas slide in menu, off canvas push menu and off canvas reveal menu exapmles.
+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.
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".
+
+
Call the input mask via javascript:
+{% highlight js %} +$('.navmenu').offcanvas() +{% endhighlight %} + +| 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. | +
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.
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.
+ +| 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). | +
This plugin turns a table row into a clickable link.
+| Name | Description | Actions |
|---|---|---|
| Input mask | Input masks can be used to force the user to enter data conform a specific format. | Action |
| jasny.net | Shared knowledge of Arnold Daniels aka Jasny. | Action |
| Launch modal | Toggle a modal via JavaScript by clicking this row. | Action |
| Name | Description | Actions |
|---|---|---|
| Input mask | Input masks can be used to force the user to enter data conform a specific format. | Action |
| jasny.net | Shared knowledge of Arnold Daniels aka Jasny. | Action |
| Launch modal | Toggle a modal via JavaScript by clicking this row. | Action |
Add class .rowlink and attribute data-link="row" to a <table> or <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 <td>.
Call the input mask via javascript:
+{% highlight js %} +$('tbody.rowlink').rowlink() +{% endhighlight %} + +| Name | +type | +default | +description | +
|---|---|---|---|
| target | +string | +'a' | +A jquery selector string, to select the link element within each row. | +
Makes the rows of a table or tbody clickable.
+Input masks can be used to force the user to enter data conform a specific format. Unlike validation, the user can't enter any other key than the ones specified by the mask.
+ +Add data attributes to register an element with inputmask functionality as shown in the example above.
+ +Call the input mask via javascript:
+{% highlight js %} +$('.inputmask').inputmask({ + mask: '999-99-999-9999-9' +}) +{% endhighlight %} + +Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-mask="999-99-999-9999-9".
| Name | +type | +default | +description | +
|---|---|---|---|
| mask | +string | +'' | +A string of formatting and literal characters, defining the input mask (see below). | +
| placeholder | +string | +'_' | +The character that is displayed where something needs to be typed. | +
Each typed character needs to match exactly one character in the mask option.
| Character | Description |
|---|---|
| 9 | Number |
| a | Letter |
| w | Alphanumeric |
| * | Any character |
| ? | Optional - any characters following will become optional |
Initializes an input element with an input mask.
+The file input plugin allows you to create a visually appealing file or image input widgets.
+ +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.
+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.
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.
$('.fileinput').fileinput()
+
+ 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.
| 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. |
+
Initializes a file upload widget.
+Clear the selected file.
+Reset the form element to the original value.
+ +| 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. | +
Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.
- - -Plugins can be included individually (using Jasny Bootstrap's individual *.js files), or all at once (using jasny-bootstrap.js or the minified jasn-bootstrap.min.js).
The Jasny Bootstrap plugins work with or without loading Twitter Bootstrap's bootstrap.js.
Both jasny-bootstrap.js and jasny-bootstrap.min.js contain all plugins in a single file.
You can use all Jasny Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.
- -That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with data-api. This looks like this:
-
$(document).off('.data-api')
-Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:
-$(document).off('.alert.data-api')
-We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.
-$(".fileinput").fileinput().addClass("fat")
-All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):
-$("#myMenu").offcanvas() // initialized with defaults
-$("#myMenu").offcanvas({ autohide: false }) // initialized with no autohide
-$("#myMenu").offcanvas('show') // initializes and invokes show immediately</p>
-Each plugin also exposes its raw constructor on a Constructor property: $.fn.popover.Offcanvas. If you'd like to get a particular plugin instance, retrieve it directly from an element: $('.navmenu').data('offcanvas').
Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call .noConflict on the plugin you wish to revert the value of.
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
-$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
-Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. show) is triggered at the start of an event, and its past participle form (ex. shown) is trigger on the completion of an action.
As of 3.1.2, all Bootstrap events are namespaced.
-All infinitive events provide preventDefault functionality. This provides the ability to stop the execution of an action before it starts.
$('#myMenu').on('show.bs.offcanvas', function (e) {
- if (!data) return e.preventDefault() // stops menu from being shown
-})
-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 intented to be used for off canvas navigation, like push menus.
- -<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
- <a class="navmenu-brand" href="#">Brand</a>
- <ul class="nav navmenu-nav">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
- </ul>
-</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>
-For better understanding, have a look at the off canvas slide in menu, off canvas push menu and off canvas reveal menu exapmles.
-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.
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".
-
-
Call the input mask via javascript:
-$('.navmenu').offcanvas()
-| 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. | -
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.
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.
- -| 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). | -
This plugin turns a table row into a clickable link.
-| Name | Description | Actions |
|---|---|---|
| Input mask | Input masks can be used to force the user to enter data conform a specific format. | Action |
| jasny.net | Shared knowledge of Arnold Daniels aka Jasny. | Action |
| Launch modal | Toggle a modal via JavaScript by clicking this row. | Action |
<table class="table table-striped table-bordered table-hover">
- <thead>
- <tr><th>Name</th><th>Description</th><th>Actions</th></tr>
- </thead>
- <tbody data-link="row" class="rowlink">
- <tr><td><a href="#inputmask">Input mask</a></td><td>Input masks can be used to force the user to enter data conform a specific format.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
- <tr><td><a href="http://www.jasny.net/" target="_blank">jasny.net</a></td><td>Shared knowledge of Arnold Daniels aka Jasny.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
- <tr><td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a></td><td>Toggle a modal via JavaScript by clicking this row.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
- </tbody>
-</table>
-Add class .rowlink and attribute data-link="row" to a <table> or <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 <td>.
Call the input mask via javascript:
-$('tbody.rowlink').rowlink()
-| Name | -type | -default | -description | -
|---|---|---|---|
| target | -string | -'a' | -A jquery selector string, to select the link element within each row. | -
Makes the rows of a table or tbody clickable.
-Input masks can be used to force the user to enter data conform a specific format. Unlike validation, the user can't enter any other key than the ones specified by the mask.
- -<input type="text" class="form-control" data-mask="999-99-999-9999-9" placeholder="ISBN">
-Add data attributes to register an element with inputmask functionality as shown in the example above.
- -Call the input mask via javascript:
-$('.inputmask').inputmask({
- mask: '999-99-999-9999-9'
-})
-Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-mask="999-99-999-9999-9".
| Name | -type | -default | -description | -
|---|---|---|---|
| mask | -string | -'' | -A string of formatting and literal characters, defining the input mask (see below). | -
| placeholder | -string | -'_' | -The character that is displayed where something needs to be typed. | -
Each typed character needs to match exactly one character in the mask option.
| Character | Description |
|---|---|
| 9 | Number |
| a | Letter |
| w | Alphanumeric |
| * | Any character |
| ? | Optional - any characters following will become optional |
Initializes an input element with an input mask.
-The file input plugin allows you to create a visually appealing file or image input widgets.
- -<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>
-<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">×</a>
-</div>
-When uploading an image, it's possible to show a thumbnail instead of the filename.
-<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>
-<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.
-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.
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.
$('.fileinput').fileinput()
-
- 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.
| 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. |
-
Initializes a file upload widget.
-Clear the selected file.
-Reset the form element to the original value.
- -| 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. | -