Elen Adarna
Beach LoverNavigation
General Forms
Input Fields
Individual form controls automatically receive some global styling. All textual elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.
Input Groups
Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use .input-group with an .input-group-addon to prepend or append elements to a .form-control.
Enhanced Select Boxes
We are using Select2 to enhanced select boxes. Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
The Basics
Select2 can take a regular select box like this
Multi-Value Select Boxes
Select2 also supports multi-value select boxes. The select below is declared with the multiple attribute.
Hiding Search Box
You can hide search box when you have only few items in select boxes.
Templating
Various display options of the Select2 component can be changed
To know more about examples and features visit: http://ivaynberg.github.io/select2/
Checkboxes and Radios
Below are native radios and checkboxes along with enhanced checkboxes and radios made with css.
The datepicker is tied to a standard form input field. Click on the input to open an interactive calendar in a small overlay. Click elsewhere on the page or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.
Set the numberOfMonths option to an integer of 2 or more to show multiple months in a single datepicker.
Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.
Input masks allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phones, etc).
Dropzone Multi-File Upload
DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews. http://dropzonejs.com/
This is just a demo. Uploaded files are not stored. This does not handle your file uploads on the server. You have to implement the code to receive and store the file yourself.