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/autosize/dist/autosize.min.js"></script>

Elementos básicos de formulario

Input Text Text Inputs con tamaños diferentes por altura y columna.

Campos de texto básicos con tamaños diferentes por altura y columna.


Etiqueta Flotante - Animación flotante para etiqueta cuando el campo de entrada está activo.


Estatus de Entrada - Enfocada y Deshabilitada


<div class="form-group">
    <div class="fg-line">
        <input type="text" class="form-control input-sm" placeholder="Input Small">
    </div>
</div>

<div class="form-group">
    <div class="fg-line">
        <input type="text" class="form-control" placeholder="Input Default">
    </div>
</div>

<div class="form-group">
    <div class="fg-line">
        <input type="text" class="form-control input-lg" placeholder="Input Large">
    </div>
</div>

<div class="row">
    <div class="col-sm-4">
        <div class="form-group">
            <div class="fg-line">
                <input type="text" class="form-control" placeholder="col-sm-4">
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="form-group">
            <div class="fg-line">
                <input type="text" class="form-control" placeholder="col-sm-4">
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="form-group">
            <div class="fg-line">
                <input type="text" class="form-control" placeholder="col-sm-4">
            </div>
        </div>
    </div>

    <div class="col-sm-3">
        <div class="form-group">
            <div class="fg-line">
                <input type="text" class="form-control" placeholder="col-sm-3">
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="form-group">
            <div class="fg-line">
                <input type="text" class="form-control" placeholder="col-sm-3">
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="form-group">
            <div class="fg-line">
                <input type="text" class="form-control" placeholder="col-sm-3">
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="form-group">
            <div class="fg-line">
                <input type="text" class="form-control" placeholder="col-sm-3">
            </div>
        </div>
    </div>

    <div class="col-sm-6">
        <div class="form-group">
            <div class="fg-line">
                <input type="text" class="form-control" placeholder="col-sm-6">
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
            <div class="fg-line">
                <input type="text" class="form-control" placeholder="col-sm-6">
            </div>
        </div>
    </div>

Floating Label
<div class="form-group fg-float">
    <div class="fg-line">
        <input type="text" class="input-sm form-control fg-input">
    </div>
    <label class="fg-label">Input Small</label>
</div>

<div class="form-group fg-float">
    <div class="fg-line">
        <input type="text" class="form-control fg-input">
    </div>
    <label class="fg-label">Input Default</label>
</div>

<div class="form-group fg-float">
    <div class="fg-line">
        <input type="text" class="input-lg form-control fg-input">
    </div>
    <label class="fg-label">Input Large</label>
</div>

Focused
<div class="form-group">
    <div class="fg-line fg-toggled">
        <input type="text" class="form-control" value="This is Focused">
    </div>
</div>

Disabled
<div class="form-group">
    <div class="fg-line disabled">
        <input type="text" class="form-control" value="This is Disabled" disabled>
    </div>
</div>

Textarea Control de forma que soporta múltiples líneas de texto. Se pueden cambiar los atributos de las filas como sea necesario.

Ejemplo Básico

Altura que Crece Automáticamente

Estado Deshabilitado


Textarea
<div class="form-group">
    <div class="fg-line">
        <textarea class="form-control" rows="5" placeholder="Let us type some lorem ipsum...."></textarea>
    </div>
</div>

<div class="form-group">
    <div class="fg-line">
        <textarea class="form-control auto-size" placeholder="Start pressing Enter to see growing..."></textarea>
    </div>
</div>

<div class="form-group">
    <div class="fg-line disabled">
        <textarea class="form-control" disabled>This is disabled</textarea>
    </div>
</div>

Select Usa la opción default, o agrega multiple para mostrar múltiples opciones al mismo tiempo.

Ejemplo Básico

Deshabilitado


Select
<div class="form-group">
    <div class="fg-line">
        <div class="select">
            <select class="form-control">
                <option>Select an Option</option>
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
                <option>Option 4</option>
                <option>Option 5</option>
            </select>
        </div>
    </div>
</div>

Disabled
<div class="form-group">
    <div class="fg-line">
        <div class="select">
            <select class="form-control" disabled>
                <option>Select an Option</option>
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
                <option>Option 4</option>
                <option>Option 5</option>
            </select>
        </div>
    </div>
</div>

Checkbox y Radio Los checkboxes son para seleccionar una o varias opciones en una lista, mientras que los radios son para seleccionar una opción de varias.

Ejemplo Básico



Inline Checkboxes y Radios - Utiliza las clases '.checkbox-inline' o '.radio-inline' en una serie de checkboxes o radios para que los controles aparezcan en la misma línea.




<div class="checkbox m-b-15">
    <label>
        <input type="checkbox" value="">
        <i class="input-helper"></i>
        Option one is this and that-be sure to include why it's great
    </label>
</div>

<div class="checkbox disabled">
    <label>
        <input type="checkbox" value="" disabled="">
        <i class="input-helper"></i>
        Option two is disabled
    </label>
</div>

<div class="radio m-b-15">
    <label>
        <input type="radio" name="sample" value="">
        <i class="input-helper"></i>
        Option one is this and that-be sure to include why it's great
    </label>
</div>

<div class="radio m-b-15">
    <label>
        <input type="radio" name="sample" value="">
        <i class="input-helper"></i>
        Option two can be something else and selecting it will deselect option one
    </label>
</div>

<div class="radio disabled">
    <label>
        <input type="radio" value="" disabled="">
        <i class="input-helper"></i>
        Option three is disabled
    </label>
</div>

Inline Checkbox
<label class="checkbox checkbox-inline m-r-20">
    <input type="checkbox" value="option1">
    <i class="input-helper"></i>
    1
</label>
<label class="checkbox checkbox-inline m-r-20">
    <input type="checkbox" value="option2">
    <i class="input-helper"></i>
    2
</label>
<label class="checkbox checkbox-inline m-r-20">
    <input type="checkbox" value="option3">
    <i class="input-helper"></i>
    3
</label>


<label class="radio radio-inline m-r-20">
    <input type="radio" name="inlineRadioOptions" value="option1">
    <i class="input-helper"></i>
    1
</label>

<label class="radio radio-inline m-r-20">
    <input type="radio" name="inlineRadioOptions" value="option2">
    <i class="input-helper"></i>
    2
</label>

<label class="radio radio-inline m-r-20">
    <input type="radio" name="inlineRadioOptions" value="option3">
    <i class="input-helper"></i>
    3
</label>