Archivos JS Para usar este componente, se deben usar estos links antes de la etiqueta body


<script src="http://cdnitesm.azureedge.net/vendors/bower_components/moment/moment.js"></script>
<script src="http://cdnitesm.azureedge.net/vendors/bower_components/bootstrap-select/dist/js/bootstrap-select.js"></script>
<script src="http://cdnitesm.azureedge.net/vendors/bower_components/nouislider/distribute/jquery.nouislider.all.min.js"></script>
<script src="http://cdnitesm.azureedge.net/vendors/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>

Componentes del Formulario

Grupos de Input Extiende los controles de la forma agregando texto o botones antes, después, o en los dos lados de cualquier input de texto.

Ejemplo Básico

Agrega un add-on o botón de cualquier lado del input. También se puede agregar en ambos lados.












Elementos Múltiples

Puedes agregar 2 o mas elementos de input. Utiliza clases de grid para definir el ancho de cada elemento.





Diferentes Tamaños

Puedes utilizar las clases extras de tamaño para cambiar el tamaño de los campos. 





Basic Example
<div class="row">
    <div class="col-sm-4">
        <div class="input-group">
            <span class="input-group-addon"><i class="md md-person"></i></span>
            <div class="fg-line">
                    <input type="text" class="form-control" placeholder="Full Name">
            </div>
        </div>

        <br/>

        <div class="input-group">
            <span class="input-group-addon"><i class="md md-local-phone"></i></span>
            <div class="fg-line">
                <input type="text" class="form-control" placeholder="Contact Number">
            </div>
        </div>

        <br/>

        <div class="input-group">
            <span class="input-group-addon"><i class="md md-email"></i></span>
            <div class="fg-line">
                <input type="text" class="form-control" placeholder="Email Address">
            </div>
        </div>

        <br/>

        <div class="input-group">
            <span class="input-group-addon"><i class="md md-location-on"></i></span>
            <div class="fg-line">
                <input type="text" class="form-control" placeholder="Home Address">
            </div>
        </div>
    </div>

    <div class="col-sm-4">
        <div class="input-group">
            <div class="fg-line">
                <input type="text" class="form-control" placeholder="Landscape">
            </div>
            <span class="input-group-addon last"><i class="md md-landscape"></i></span>
        </div>

        <br/>

        <div class="input-group">
            <div class="fg-line">
                <input type="text" class="form-control" placeholder="Weather">
            </div>
            <span class="input-group-addon last"><i class="md md-wb-sunny"></i></span>
        </div>

        <br/>

        <div class="input-group">
            <div class="fg-line">
                <input type="text" class="form-control" placeholder="Flight">
            </div>
            <span class="input-group-addon last"><i class="md md-flight"></i></span>
        </div>

        <br/>

        <div class="input-group">
            <div class="fg-line">
                <input type="text" class="form-control" placeholder="Location">
            </div>
            <span class="input-group-addon last"><i class="md md-my-location"></i></span>
        </div>
    </div>

    <div class="col-sm-4">
        <div class="input-group">
            <span class="input-group-addon"><i class="md md-call-missed"></i></span>
            <div class="fg-line">
                <input type="text" class="form-control" placeholder="Internet">
            </div>
            <span class="input-group-addon last"><i class="md md-public"></i></span>
        </div>

        <br/>

        <div class="input-group">
            <span class="input-group-addon"><i class="md md-attach-money"></i></span>
            <div class="fg-line">
                <input type="text" class="form-control" placeholder="Notifications">
            </div>
            <span class="input-group-addon last"><i class="md md-add-circle-outline"></i></span>
        </div>

        <br/>

        <div class="input-group">
            <span class="input-group-addon"><i class="md md-send"></i></span>
            <div class="fg-line">
                <input type="text" class="form-control" placeholder="Layers">
            </div>
            <span class="input-group-addon last"><i class="md md-layers"></i></span>
        </div>

        <br/>

        <div class="input-group">
            <span class="input-group-addon"><i class="md md-wifi-tethering"></i></span>
            <div class="fg-line">
                <input type="text" class="form-control" placeholder="Messages">
            </div>
            <span class="input-group-addon last"><i class="md md-dialpad"></i></span>
        </div>
    </div>
</div>

Multiple Elements
<div class="input-group">
    <span class="input-group-addon"><i class="md md-person"></i></span>
    <div class="col-sm-4">
        <div class="fg-line">
            <input type="text" class="form-control" placeholder="First Name">
        </div>
    </div>
    <div class="col-sm-4">
        <div class="fg-line">
            <input type="text" class="form-control" placeholder="Last Name">
        </div>
    </div>
</div>

Multiple Sizes
Large
<div class="input-group input-group-lg">
    <span class="input-group-addon"><i class="md md-wb-sunny"></i></span>
    <div class="fg-line">
        <input type="text" class="form-control input-lg" placeholder="Weather">
    </div>
</div>

Medium
<div class="input-group">
    <span class="input-group-addon"><i class="md md-wb-sunny"></i></span>
    <div class="fg-line">
        <input type="text" class="form-control" placeholder="Weather">
    </div>
</div>

Small
<div class="input-group input-group-sm">
    <span class="input-group-addon"><i class="md md-wb-sunny"></i></span>
    <div class="fg-line">
        <input type="text" class="form-control input-sm" placeholder="Weather">
    </div>
</div>

Máscara de Input Una máscara de input ayuda al usuario con un formato predefinido. Esto puede ser útil para fechas, numeralia, números telefónicos, etc...


Date
<div class="form-group fg-line">
    <label>Date</label>
    <input type="text" class="form-control input-mask" data-mask="00/00/0000" placeholder="eg: 23/05/2014">
</div>

Time
<div class="form-group fg-line">
    <label>Time</label>
    <input type="text" class="form-control input-mask" data-mask="00:00:00" placeholder="eg: 23:06:55">
</div>

Date Time
<div class="form-group fg-line">
    <label>Date Time</label>
    <input type="text" class="form-control input-mask" data-mask="00/00/0000 00:00:00" placeholder="eg: 00/00/0000 00:00:00">
</div>

CEP
<div class="form-group fg-line">
    <label>CEP</label>
    <input type="text" class="form-control input-mask" data-mask="00000-000" placeholder="eg: 00000-000">
</div>

Phone Number
<div class="form-group fg-line">
    <label>Phone Number</label>
    <input type="text" class="form-control input-mask" data-mask="000-00-0000000" placeholder="eg: 000-00-0000000">
</div>

Phone With Odd
<div class="form-group fg-line">
    <label>Phone with Odd</label>
    <input type="text" class="form-control input-mask" data-mask="(00) 0000-0000" placeholder="eg: (00) 0000-0000">
</div>

CPF
<div class="form-group fg-line">
    <label>CPF</label>
    <input type="text" class="form-control input-mask" data-mask="000.000.000-00" placeholder="eg: 000.000.000-00">
</div>

Money
<div class="form-group fg-line">
    <label>Money</label>
    <input type="text" class="form-control input-mask" data-mask="000.000.000.000.000,00" placeholder="eg: 000.000.000.000.000,00">
</div>

IP Address
<div class="form-group fg-line">
    <label>IP Address</label>
    <input type="text" class="form-control input-mask" data-mask="000.000.000.000" placeholder="eg: 000.000.000.000">
</div>

Percentage
<div class="form-group fg-line">
    <label>Percentage</label>
    <input type="text" class="form-control input-mask" data-mask="00000,00%" placeholder="eg: 00000,00%">
</div>

Credit Card
<div class="form-group fg-line">
    <label>Credit Card</label>
    <input type="text" class="form-control input-mask" data-mask="0000 0000 0000 0000" placeholder="eg: 0000 0000 0000 0000">
</div>

Selección Un seleccionador customizable para Bootstrap utilizando el componente dropdown.

Ejemplo Básico

Opción de Búsqueda

Grupos de opciones

Opciones deshabilitadas

Multi Selección

Limitar Selección - Fijado a 2

Muestra Cantidad


Basic Example
<p class="f-500 m-b-15 c-black">Basic Example</p>

<select class="selectpicker">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>

Search Option
<p class="f-500 m-b-15 c-black">Serach Option</p>

<select class="selectpicker" data-live-search="true">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
    <option>Tent</option>
    <option>Flashlight</option>
    <option>Toilet Paper</option>
</select>

Option Groups
<p class="f-500 m-b-15 c-black">Option Groups</p>

<select class="selectpicker">
    <optgroup label="Picnic">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
    </optgroup>
    <optgroup label="Camping">
        <option>Tent</option>
        <option>Flashlight</option>
        <option>Toilet Paper</option>
    </optgroup>
</select>

Disable Group
<p class="f-500 c-black m-b-15">Disabled Options</p>

<select class="selectpicker">
    <option disabled="disabled">Mustard</option>
    <option>Ketchup</option>
    <option>Mustard</option>
    <option disabled="disabled">Ketchup</option>
    <option>Relish</option>
</select>

Multi Select
<p class="f-500 c-black m-b-15">Multi Select</p>

<select class="selectpicker" multiple>
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
    <option>Toasted</option>
</select>

Limit Selection
<p class="f-500 c-black m-b-15">Limit Selection - Set to 2</p>

<select class="selectpicker"  multiple data-max-options="2" title='Choose some of...'>
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
    <option>Plain</option>
    <option>Steamed</option>
    <option>Toasted</option>
</select>

Display Count
<p class="f-500 c-black m-b-15">Display Count</p>

<select class="selectpicker" multiple data-selected-text-format="count">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>

Toggle Switch Toggle Switches basados en el diseño de Material Design utilizando Radio Box.

Ejemplos Básicos

Opciones Default y Deshabilitada


Colores opcionales

Utiliza el atributo de data para cambiar el color del Toggle Switch 



<div class="toggle-switch">
    <label for="ts1" class="ts-label">Toggle Swith Default</label>
    <input id="ts1" type="checkbox" hidden="hidden">
    <label for="ts1" class="ts-helper"></label>
</div>

<div class="toggle-switch disabled">
    <label for="tsd" class="ts-label">Toggle Swith Disabled</label>
    <input id="tsd" type="checkbox" hidden="hidden" checked="checked" disabled="disabled">
    <label for="tsd" class="ts-helper"></label>
</div>

Optional Color Schemes
<div class="toggle-switch" data-ts-color="red">
    <label for="ts2" class="ts-label">Toggle Swith Red</label>
    <input id="ts2" type="checkbox" hidden="hidden">
    <label for="ts2" class="ts-helper"></label>
</div>

<div class="toggle-switch" data-ts-color="blue">
    <label for="ts3" class="ts-label">Toggle Swith Blue</label>
    <input id="ts3" type="checkbox" hidden="hidden">
    <label for="ts3" class="ts-helper"></label>
</div>

<div class="toggle-switch" data-ts-color="green">
    <label for="ts4" class="ts-label">Toggle Swith Green</label>
    <input id="ts4" type="checkbox" hidden="hidden">
    <label for="ts4" class="ts-helper"></label>
</div>

<div class="toggle-switch" data-ts-color="cyan">
    <label for="ts5" class="ts-label">Toggle Swith Cyan</label>
    <input id="ts5" type="checkbox" hidden="hidden">
    <label for="ts5" class="ts-helper"></label>
</div>

<div class="toggle-switch" data-ts-color="lime">
    <label for="ts6" class="ts-label">Toggle Swith Lime</label>
    <input id="ts6" type="checkbox" hidden="hidden">
    <label for="ts6" class="ts-helper"></label>
</div>

<div class="toggle-switch" data-ts-color="amber">
    <label for="ts7" class="ts-label">Toggle Swith Amber</label>
    <input id="ts7" type="checkbox" hidden="hidden">
    <label for="ts7" class="ts-helper"></label>
</div>

<div class="toggle-switch" data-ts-color="purple">
    <label for="ts8" class="ts-label">Toggle Swith Purple</label>
    <input id="ts8" type="checkbox" hidden="hidden">
    <label for="ts8" class="ts-helper"></label>
</div>

<div class="toggle-switch" data-ts-color="pink">
    <label for="ts9" class="ts-label">Toggle Swith Pink</label>
    <input id="ts9" type="checkbox" hidden="hidden">
    <label for="ts9" class="ts-helper"></label>
</div>

Input Slider noUiSlider es un slider de rango sencillo.

Ejemplo Básico


Slider de Rango


Valor de Salida con clic y arrastre


Colores Opcionales

Utiliza el atributo de data para cambiar el color del Slider 







<p class="f-500 c-black m-b-20">Basic Example</p>

<div class="input-slider m-b-25" data-is-start="35"></div>

<p class="f-500 c-black m-b-20">Range Slider</p>

<div class="input-slider-range m-b-25"></div>

<p class="f-500 c-black m-b-20">Output Value with tap and drag</p>

<div class="m-b-20 clearfix">
    <div class="input-slider-values m-b-15"></div>
    <strong class="pull-left text-muted" id="value-upper"></strong>
    <strong class="pull-right text-muted" id="value-lower"></strong>
</div>

<p class="f-500 c-black m-b-5">Optional ColoR Schemes</p>
<small>Use the given data attribute to change the color scheme of the Toggle Switch</small>

<div class="input-slider m-b-25" data-is-start="35" data-is-color="red"></div>

<div class="input-slider m-b-25" data-is-color="blue" data-is-start="95"></div>

<div class="input-slider m-b-25" data-is-color="cyan" data-is-start="20"></div>

<div class="input-slider m-b-25" data-is-color="amber" data-is-start="55"></div>

<div class="input-slider m-b-25" data-is-color="green" data-is-start="70"></div>

Seleccionador de Fechas Seleccionador de fechas basado en Bootstrap.

Ejemplo Básico

Seleccionador de Fecha

Seleccionador de Hora


<p class="c-black f-500 m-b-20">Basic Example</p>

<div class="input-group form-group">
    <span class="input-group-addon"><i class="md md-event"></i></span>
        <div class="dtp-container dropdown fg-line">
        <input type='text' class="form-control date-time-picker" data-toggle="dropdown" placeholder="Click here...">
    </div>
</div>

<p class="c-black f-500 m-b-20">Date Picker</p>

<div class="input-group form-group">
    <span class="input-group-addon"><i class="md md-event"></i></span>
        <div class="dtp-container dropdown fg-line">
        <input type='text' class="form-control date-picker" data-toggle="dropdown" placeholder="Click here...">
    </div>
</div>

<p class="c-black f-500 m-b-20">Time Picker</p>

<div class="input-group form-group">
    <span class="input-group-addon"><i class="md md-access-time"></i></span>
        <div class="dtp-container dropdown fg-line">
        <input type='text' class="form-control time-picker" data-toggle="dropdown" placeholder="Click here...">
    </div>
</div>

Input de Archivo Simple Permite subir archivos o imágenes.

Ejemplo Básico

Seleccionar archivo Cambiar ×


Previsualizar Imagen

Seleccionar imagen Cambiar Quitar


La previsualización de imagen solo funciona en IE10+, FF3.6+, Safari6.0+, Chrome6.0+ y Opera11.1+. En navegadores anteriores se muestra el nombre del archivo solamente.


Basic Example
<div class="fileinput fileinput-new" data-provides="fileinput">
    <span class="btn btn-primary btn-file m-r-10">
        <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">&times;</a>
</div>

Image Preview
<div class="fileinput fileinput-new" data-provides="fileinput">
    <div class="fileinput-preview thumbnail" data-trigger="fileinput"></div>
    <div>
        <span class="btn btn-info 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-danger fileinput-exists" data-dismiss="fileinput">Remove</a>
    </div>
</div>