Documentation

Forms

There are four general styles available to style forms: .form-horizontal, .form-condensed, .label-left and no style for horizontal placed inputs, decreased margins, labels aligned to left and default form accordingly. You can combine any of them together.

Inputs

Bootstrap styles input by default, so there is no need to add any classes to inputs. Just use them. Don't forget to include input type.

Bootstrap has a great documentation about forms.

Prepended and appended inputs

Again Bootstrap helps. It has everything we need to prepend and append inputs.

Textareas

Auto-growing textarea uses Grab Bag autogrow plugin to increase area size dynamically. Files:

lib/jquery.autogrow-textarea.js

Wysiwyg editor is based on bootstrap-wysihtml5 plugin. Files:

lib/bootstrap-wysihtml5/bootstrap-wysihtml5.js

Selects

Two different type of selects avaiables in Light Blue template:

• Select2 - is a really powerful tool used to convert default selects to interactive search-enabled widgets.
• Bootstrap Select - is Bootstrap based custom select, designed to behave like regular Bootstrap selects. This one can be colored as any button.

Required files:

lib/select2.js
lib/bootstrap-select/bootstrap-select.js

Checkboxes and Radio

To style default checkboxes and radio buttons iCheck library is used. Files:

lib/icheck.js/jquery.icheck.js

Button-like checkboxes

Bootstrap has a great api to handle button states - bootstrap-button.js, so using it to imitate checkbox or radio buttons.

You also can add data-toggle-class attribute to your buttons so they change their class depending on state. For example:

<div class="btn-group" data-toggle="buttons-radio">
    <button class="btn" data-toggle-class="btn-success">One</button>
    <button class="btn btn-success active" data-toggle-class="btn-success">Two</button>
</div>

On-Off Switches

There is a special plugin to do that - Bootstrap switch. Include following files:

lib/bootstrap-switch.js

Pickers

Any field may have either Datepicker or Colorpicker attached. Required files:

lib/bootstrap-datepicker.js
lib/bootstrap-colorpicker.js

Input Sizing

Any input can be sized by adding .span* class or .input-block-level if 100% width required.

Masked Inputs

To make any input accept only formatted values there is a great plugin to use - Masked Input Plugin. Files:

lib/jquery-maskedinput/jquery.maskedinput.js