Professional Documents
Culture Documents
Libros
Tutoriales
Eventos
Foro
Buscar
Primeros pasos
1.2. Contenidos de Bootstrap
1.3. La primera plantilla Bootstrap
1.4. La comunidad Bootstrap
1.5. Desactivando el diseo responsive
1.6. Actualizacin de Bootstrap 2.X a 3.0
1.7. Compatibilidad con los navegadores
1.8. Accesibilidad
1.9. La licencia de Bootstrap
1.10. Personalizando Bootstrap
open in browser PRO version
pdfcrowd.com
Captulo 2.
Tipografa
3.1. Titulares
3.2. Texto
3.3. nfasis
3.4. Clases CSS
3.5. Abreviaturas
3.6. Direcciones
open in browser PRO version
pdfcrowd.com
3.7. Blockquotes
3.8. Listas
3.9. Cdigo
Captulo 4.
Elementos CSS
4.1. Tablas
4.2. Imgenes
4.3. Utilidades
Captulo 5.
Formularios
5.1. Formulario bsico
5.2. Formulario en lnea
5.3. Formularios horizontales
5.4. Campos de formulario
5.5. Estados de formulario
open in browser PRO version
pdfcrowd.com
Componentes
6.1. Iconos (glyphicons)
6.2. Mens desplegables
6.3. Grupos de botones
6.4. Botones desplegables
6.5. Grupos de campos de formulario
6.6. Elementos de navegacin
6.7. Barras de navegacin
6.8. Migas de pan
6.9. Paginadores
6.10. Etiquetas
6.11. Badges
open in browser PRO version
pdfcrowd.com
6.12. Jumbotron
6.13. Encabezado de pgina
6.14. Imgenes en miniatura
6.15. Mensajes de alerta
6.16. Barras de progreso
6.17. Objetos multimedia
6.18. Listas de elementos
6.19. Paneles
6.20. Pozos
Captulo 7.
Plugins de JavaScript
pdfcrowd.com
Inicio
Libros
Tutoriales
Eventos
Foro
Buscar
Captulo 5. Formularios
Los formularios son uno de los elementos ms importantes de los sitios y aplicaciones
web. Por eso Bootstrap 3 permite disear formularios con aspectos muy variados y
define decenas de estilos para todos los campos de formulario.
Anterior
4.3. Utilidades
open in browser PRO version
Siguiente
5.1. Formulario bsico
pdfcrowd.com
Inicio
Libros
Tutoriales
Eventos
Foro
Buscar
espaciado, utiliza la clase .form-group para encerrar cada campo de formulario con su
<label> .
Ejemplo:
open in browser PRO version
pdfcrowd.com
<form role="form">
<div class="form-group">
<label for="ejemplo_email_1">Email</label>
placeholder="Introduce tu email">
<div class="form-group">
<label for="ejemplo_password_1">Contrasea</label>
placeholder="Contrasea">
<div class="form-group">
</div>
<div class="checkbox">
<label>
</label>
</div>
pdfcrowd.com
</div>
</form>
Email
Introduce tu email
Contrasea
Contrasea
Adjuntar un archivo
Choose File (None)
Ejemplo de texto de ayuda.
Activa esta casilla
Enviar
pdfcrowd.com
Anterior
Captulo 5. Formularios
Siguiente
5.2. Formulario en lnea
pdfcrowd.com
Inicio
Libros
Tutoriales
Eventos
Foro
Buscar
formulario. Ejemplo:
pdfcrowd.com
Inicio
Libros
Tutoriales
Eventos
Foro
Buscar
mediante las clases CSS utilizadas para definir las rejillas de los layouts. Para ello, aade
la clase .form-horizontal al formulario. Adems, como esta clase modifica la clase
.form-group para que se comporte como la fila de una rejilla, no es necesario que
pdfcrowd.com
<div class="form-group">
bel>
</div>
</div>
<div class="form-group">
sea</label>
<div class="col-lg-10">
</div>
placeholder="Contrasea">
</div>
<div class="form-group">
pdfcrowd.com
</label>
</div>
</div>
</div>
<div class="form-group">
</div>
</div>
</form>
pdfcrowd.com
Contrasea
Contrasea
No cerrar sesin
Entrar
pdfcrowd.com
Inicio
Libros
Tutoriales
Eventos
Foro
Buscar
5.4.1. Inputs
Los campos de tipo <input> son los ms numerosos, ya que con HTML5 la lista se ha
ADVERTENCIA
Bootstrap 3 solamente aplica los estilos a los campos <input> que definen
open in browser PRO version
pdfcrowd.com
Campo de texto
5.4.2. Textarea
Utiliza este control para escribir textos largos, modificando el valor del atributo rows
open in browser PRO version
pdfcrowd.com
pdfcrowd.com
</label>
</div>
<div class="radio">
<label>
checked>
</label>
pdfcrowd.com
</div>
<div class="radio">
<label>
</div>
pdfcrowd.com
</label>
<label class="checkbox-inline">
</label>
<label class="checkbox-inline">
</label>
pdfcrowd.com
pdfcrowd.com
<option>5</option>
</select>
</select>
1
2
3
4
5
pdfcrowd.com
control-static . Esta tcnica es til por ejemplo para mostrar el valor de los campos
pdfcrowd.com
<div class="col-lg-10">
<p class="form-control-static">email@ejemplo.com</p>
</div>
</div>
<div class="form-group">
/label>
<div class="col-lg-10">
eholder="Contrasea">
</div>
</div>
</form>
pdfcrowd.com
Email
email@ejemplo.com
Contrasea
Contrasea
Anterior
5.3. Formularios horizontales
open in browser PRO version
Siguiente
5.5. Estados de formulario
pdfcrowd.com
Inicio
Libros
Tutoriales
Eventos
Foro
Buscar
pdfcrowd.com
pdfcrowd.com
pdfcrowd.com
NOTA
Esta clase slo afecta al aspecto de los enlaces <a class="btn btn-default"> ,
ADVERTENCIA
Internet Explorer 9 y sus versiones anteriores no soportan el uso del atributo
disabled en el elemento <fieldset> , por lo que tendrs que utilizar algo de cdigo
JavaScript para deshabilitar los campos en ese navegador.
Ejemplo:
<form role="form">
<fieldset disabled>
<div class="form-group">
placeholder="Campo deshabilitado">
pdfcrowd.com
<div class="form-group">
</select>
</div>
<div class="checkbox">
<label>
</label>
</div>
</fieldset>
</form>
pdfcrowd.com
Campo deshabilitado
Campo deshabilitado
Lista deshabilitada
Lista deshabilitada
No puedes pinchar esta opcin
Enviar
pdfcrowd.com
.has-success para cuando el valor es correcto. Lo mejor es que estas clases se pueden
aplicar a cualquier elemento que contenga una de las tres siguientes clases: .controllabel , .form-control y .help-block .
Ejemplo:
<div class="form-group has-success">
do</label>
</div>
ia</label>
pdfcrowd.com
</div>
</div>
pdfcrowd.com
Anterior
5.4. Campos de formulario
Siguiente
5.6. Redimensionando campos de formulario
INDICE DE CONTENIDOS
1. Primeros pasos
2. Diseando con rejilla
open in browser PRO version
pdfcrowd.com
Inicio
Libros
Tutoriales
Eventos
Foro
Buscar
anchuras con las habituales clases .col-lg-* utilizadas para las rejillas de los layouts.
pdfcrowd.com
pdfcrowd.com
.input-lg
Campo de texto normal
.input-sm
.input-lg
Lista desplegable normal
.input-sm
pdfcrowd.com
pdfcrowd.com
<div class="col-xs-3">
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-5">
</div>
</div>
.col-xs-3
.col-xs-4
.col-xs-5
pdfcrowd.com
Anterior
5.5. Estados de formulario
Siguiente
5.7. Mensajes de ayuda
INDICE DE CONTENIDOS
1. Primeros pasos
2. Diseando con rejilla
3. Tipografa
4. Elementos CSS
Captulo 5. Formularios
5.1. Formulario bsico
5.2. Formulario en lnea
5.3. Formularios horizontales
5.4. Campos de formulario
5.5. Estados de formulario
open in browser PRO version
pdfcrowd.com
Inicio
Libros
Tutoriales
Eventos
Foro
Buscar
pdfcrowd.com
Un texto de ayuda que ocupa dos lneas porque es muy largo, pero an as se ve bien gracias a los estilos de Bootstrap.
Anterior
5.6. Redimensionando campos de formulario
Siguiente
5.8. Botones
pdfcrowd.com
Inicio
Libros
Tutoriales
Eventos
Foro
Buscar
5.8. Botones
Crea diferentes tipos de botones con ayuda de cualquiera de las clases CSS definidas
por Bootstrap 3. Ejemplo:
<!-- Botn normal -->
pdfcrowd.com
<!-- Botn pensado para los mensajes con alertas informativas -->
<button type="button" class="btn btn-info">Informacin</button>
<!-- Indica que hay que tener cuidado con la accin asociada al botn -->
<button type="button" class="btn btn-warning">Advertencia</button>
<!-- Indica una accin negativa o potencialmente peligrosa -->
<button type="button" class="btn btn-danger">Peligro</button>
Normal
Destacado
xito
Informacin
Advertencia
Peligro
Enlace
pdfcrowd.com
Ejemplo:
<p>
on>
on>
</p>
<p>
</p>
pdfcrowd.com
<p>
ton>
ton>
</p>
<p>
o</button>
o</button>
</p>
pdfcrowd.com
Botn grande
Botn normal
Botn grande
Botn normal
Botn pequeo
Botn pequeo
pdfcrowd.com
toda la anchura del elemento en el que se encuentre. Para ello, aade la clase .btnblock . Ejemplo:
loque</button>
Botn de bloque
Botn de bloque
pdfcrowd.com
si quieres forzar a que el botn muestre el aspecto presionado, aade la clase .active .
Ejemplo:
pdfcrowd.com
>
Botn principal
Botn
Ejemplo:
pdfcrowd.com
incipal</a>
>
Enlace principal
Enlace
pdfcrowd.com
no puede pulsarlo, utiliza los estilos de Bootstrap que reducen su opacidad un 50%.
Ejemplo:
Botn principal
Botn
pdfcrowd.com
Ejemplo:
principal</a>
/a>
pdfcrowd.com
Enlace principal
Enlace
pdfcrowd.com
Enlace
Botn
Campo input
Enviar
pdfcrowd.com
height en los botones creados con elementos <input> , por lo que su aspecto no
Anterior
5.7. Mensajes de ayuda
Siguiente
Captulo 6. Componentes
INDICE DE CONTENIDOS
1. Primeros pasos
open in browser PRO version
pdfcrowd.com