Introducción a Bootstrap (Parte 3)


Esta es la tercera y última entrada de una serie de 3, dedicada al framework de desarrollo web Bootstrap. En las 3 entradas se trata de dar una introducción a este framework, y las características básicas que nos ofrece.

 bootstrap

 

1.- Introducción a los formularios en Bootstrap

Los formularios de Bootstrap ofrecen funcionalidades avanzadas basadas en HTML 5, como por ejemplo:

  • Especificación de nuevos tipos de entrada de datos
  • “Placeholders”: o “hints”, valores de ejemplo mostrados sobre los campos cuando están vacíos.

Por defecto, los formularios son verticales, de forma que el nombre o etiqueta de un elemento se muestra sobre dicho elemento), ya que esto es habitual en los diseños de formularios para móviles, donde el espacio horizontal es muy limitado. Además, se enfatiza el elemento sobre el que está el foco.

En cualquier caso, los formularios de Bootstrap son fácilmente configurables.

 

1.1.- Elementos que forman parte de un formulario estándar en Bootstrap

La creación de un formulario empieza, como es habitual, por el elemento “form”:

<form role=“form”> … </form>

En su interior, cada unidad del formulario (formada por la etiqueta y la entrada de datos) estará basada en un “div” de la clase “form-group”:

<div class=“form-group”> … </div>

Cada una de estas unidades suelen estar formadas por una etiqueta y la entrada de datos. La etiqueta lleva la clase “control-label”, y un atributo “for” que indica el “id” de la entrada de datos a la cual corresponde esta etiqueta:

<label for=“email” class=“control-label”>Email</label>

Por último, la entrada de datos, que debe llevar la clase “form-control”, y puede indicar en el atributo “type” el tipo de datos que espera recibir (incluidos nuevos tipos de HTML5). Además, se indicará en los atributos “name” y “id” el nombre del datos de la entrada (que corresponde con el atributo “for” de su etiqueta):

<input type=“email” class=“form-control” name=“email” id=“email” placeholder=“a@c.d” />

De esta forma, podemos ver un formulario completo (con un solo campo) de ejemplo:

<form role=“form”>
 <div class=“form-group”>
  <label for=“email” class=“control-label”>Email</label>
  <input type=“email” class=“form-control” name=“email” id=“email” placeholder=“a@c.d” />
 </div>
</form>

 

1.2.- Formularios horizontales en Bootstrap

Aunque por defecto los formularios son verticales (la etiqueta va sobre cada entrada de datos), estos se pueden configurar para que no se muestren así, sino de forma horizontal, donde cada etiqueta va al lado (normalmente a la izquierda) de cada elemento.

Si se desea crear un formulario horizontal, es necesario utilizar un par de clases adicionales. Para empezar, se debe añadir la clase “form-horizontal” al elemento “form”:

<form role=“form” class="form-horizontal">
 <!-- form content here -->
</form>

Cada fila del formulario estará creada por un unidad de formularios, es decir, “div” de la clase “form-group”, igual que los formulario verticales. En esto no cambia nada:

<div class="form-group">
 <!-- label and control -->
</div>

En los formularios horizontales es muy importante decir a cada uno de los elementos de la unidad (etiqueta y entrada) lo grande que van a ser al mostrarse de forma horizontal. La etiqueta lleva la misma clase y atributos que en los formularios verticales, aunque debe indicarse el ancho que ocupará según las rejillas:

<label for="address" class="control-label col-md-3">Address:</label>

Para seleccionar el tamaño de las entradas de texto, sin embargo, es necesario incluirlas dentro de un “div” en el que se especifique su tamaño. El elemento “input” no permite especificar su tamaño mediante las clases “col-XX-YY”, por lo que debe ser una estructura superior a él la que especifique el tamaño, y este “input” ocupará todo el tamaño de dicha estructura. Al igual que antes, la entrada del formulario, que debe llevar la clase “form-control”:

<div class="col-md-6">
 <input type="text" name="address" id="address" class="form-control" />
</div>

De esta forma, podemos ver un formulario horizontal completo (con un solo campo) de ejemplo, para destacar las diferencias con los formularios verticales por defecto:

<form role="form" class="form-horizontal">
 <div class="form-group">
  <label for="address" class="control-label col-md-3">Address:</label>
  <div class="col-md-6">
   <input type="text" name="address" id="address" class="form-control" />
  </div>
 </div>
</form>

 

2.- Mejora de los controles con Bootstrap

Los formularios por defecto son bastante “feos”, sobre todo comparados con los formularios que se ven hoy en día en páginas y aplicaciones móviles. Es por esto que Bootstrap permite configurarlos y mejorarlos en ciertos aspectos, como por ejemplo:

  • Mostrar iconos
  • Ofreciendo soporte en línea
  • Mostrar guías sobre el tipo de datos a introducir

 

2.1.- Entrada de datos con iconos (Glyphicons)

Bootstrap tiene la habilidad de mejorar las cajas de texto de entrada de datos, ofreciendo añadir iconos a los campos para contextualizar al usuario.

Para añadirlos, es necesario crear un “div” de la clase “input-group” en el que añadir el icono junto con la entrada de datos:

<div class="input-group">
 <!-- input controls -->
</div>

Dentro del “div” anterior, se crea uno nuevo para el icono, que será un “div” de la clase “input-group-addon”:

<div class="input-group-addon">
 <!-- addons -->
</div>

En este último grupo se introduce el icono mediante un “span” de la clase “glyphicon”:

<span class="glyphicon glyphicon-user"></span>

Por último, dentro del grupo de la clase “input-group” debe ir la entrada de datos, como ya se ha visto anteriormente.

De esta forma, podemos ver un formulario horizontal completo (con un solo campo) que incorpora un icono en la entrada de datos, de ejemplo:

<form class="form-horizontal">
 <div class="form-group">
  <label for="username" class="control-label col-md-3">Username:</label>
  <div class="col-md-6">
   <div class="input-group">
    <div class="input-group-addon">
     <span class="glyphicon glyphicon-user"></span>
    </div>
    <input type="text" class="form-control" name="username" id="username" />
   </div>
  </div>
 </div>
</form>

 

2.2.- Entrada de datos con caracteres (no iconos)

También es posible replicar lo que se ha visto para incluir un icono de “glyphicon”, y utilizarlo para incluir cualquier carácter que no sea un icono en sí. El siguiente ejemplo es similar al anterior, pero en lugar de incluir un “glyphicon” se incluye un carácter “@” muy útil para los casos donde se pide, por ejemplo, el usuario de Twitter:

<form class="form-horizontal">
 <div class="form-group">
  <label for="twitter" class="control-label col-md-3>Twitter:</label>
  <div class="col-md-6">
   <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" name="twitter" id="twitter" />
   </div>
  </div>
 </div>
</form>

 

3.- Botones

Los botones son los principales elementos de interacción del usuario con la página. Con Bootstrap los botones no tienen porque ser elementos “buttons” necesariamente, ya que se permite mostrar como botones a enlaces, o cualquier tipo de elemento, haciendo más sencillo al usuario saber donde tienen que pulsar.

Para decorar como un botón de Bootstrap un elemento “button” o un enlace “a”, basta con marcarlo con la clase “btn”. También se puede utilizar una clase modificadora para elegir el aspecto (color, tamaño, etc).

Por ejemplo:

<button type="submit" class="btn btn-default col-md-offset-3 col-md-4">Submit form</button>
<button type="button" class="btn btn-default col-md-offset-3 col-md-4">Submit form</button>

 

3.1.- Grupos de botones

Los grupos de botones permiten que algunos elementos de entrada de datos, como los “radio buttons” o los “checkboxes”, tengan el aspecto de botones de Bootstrap.

Ya sabemos que:

  • “radio buttons”: son los controles en los que sólo se puede seleccionar uno del grupo a la vez.
  • “checkboxes”: son los controles en los que se pueden seleccionar varios del grupo a la vez.

Para crear “radio buttons” o “checkboxes” como grupos de botones, es necesario crear un “div” del tipo “btn-group”, que además debe tener el atributo “data-toggle=“buttons””. Por ejemplo:

<div class="form-group">
 <div class="col-md-offset-3 btn-group" data-toggle="buttons">
  <!-- radio buttons -->
 </div>
</div>

Después es necesario añadir en su interior los “radio buttons” o los “checkbox”. En este caso, es necesario que este tipo de entrada de datos esté “rodeado” por el elemento “label”, y es esta etiqueta la que debe ser de la clase “button”:

<label class="btn btn-primary">
 <input type="radio" id="first" name="sample" />First
</label>

Es muy importante que el nombre (“name”) de cada “input” debe coincidir para que formen parte del mismo grupo de botones. Eso sí, el “id” de cada “input” si será diferente para cada uno de ellos. Y el atributo “value” de cada “input” también será diferente y será el que identifique el valor que toma el grupo de botones.

De esta forma, podemos ver un ejemplo completo de un formulario basado en un grupo de botones:

<form class="form-horizontal">
 <div class="form-group">
  <div class="col-md-offset-3 btn-group" data-toggle="buttons">
   <label class="btn btn-primary">
    <input type="radio" id="first" name="sample" />First
   </label>
   <label class="btn btn-primary">
    <input type="radio" id="second" name="sample" />Second
   </label>
  </div>
 </div>
 <div class="form-group">
  <button type="submit" class="btn btn-default col-md-offset-3 col-md-4">Submit form</button>
 </div>
</form>

 

3.2.- Colores para los botones

El color de los botones depende de la clase modificadora que se aplique junto con la clase “btn”. Respecto a los colores, estos son los que ofrece Bootstrap:

Modificador Color
btn-default Blanco
btn-primary Azul oscuro
btn-success Verde
btn-info Azul claro
btn-warning Amarillo
btn-danger Rojo

 

3.3.- Tamaños para los botones

 

Y respecto a los tamaños, existen modificadores para los 4 tamaños típicos de Bootstrap. El tamaño por defecto, si no se aplica un modificador, es el medio. Por lo tanto, se pueden aplicar los siguientes modificadores para cambiar el tamaño de los botones:

Modificador Tamaño
btn-lg Grande
btn-sm Pequeño
btn-xs Extra pequeño

En lo que respecta a los grupos de botones, el color de cada uno de los botones del grupo se puede especificar mediante la clase modificadora en cada botón, para de esta forma conseguir un grupo de botones que pueden tener un color diferente cada uno. Para el tamaño, se puede aplicar el mismo tamaño a todo el grupo de botones, mediante los siguientes modificadores aplicados al “div” de la clase “btn-group”:

Modificador Tamaño
btn-group-lg Grande
btn-group-sm Pequeño
btn-group-xs Extra pequeño

 

4.- Validación de formularios

Bootstrap como tal no ofrece validación de los datos del formulario, ya que esto debe ser hecho mediante Javascript. Pero si ofrece unas determinadas clases para mostrar los estados de los entradas del formulario, que se pueden utilizar para informar al usuario de la calidad de los datos introducidos. Sin el uso de Javascript, estas clases que ofrece Bootstrap solo pueden añadirse de forma estática, por lo que para hacer una verdadera validación de los datos que el usuario va introduciendo, será necesario utilizar Javascript para modificar las clases de los elementos de forma dinámica.

 

4.1.- Clases para estados de los elementos

Bootstrap permite indicar mediante clases el estado de un “form-group” (la etiqueta y la entrada de datos correspondiente), marcando esta unidad de formulario con una determinada clase:

  • has-success” -> se muestra en verde
  • has-warning” -> se muestra en amarillo
  • has-error” -> se muestra en rojo

Por ejemplo, para marcar un “form-group” como erróneo, se haría así:

<div class="form-group has-error">
 <!-- label and input group here -->
</div>

 

4.2.- Icono adicional de estado para las entradas de datos

Boostrap también permite añadir un icono a la caja de texto correspondiente al “form-group”, para enfatizar el estado de dicho dato al usuario.

Para ello, es necesario añadir la clase “has-feedback” al “div” del “form-group”:

<div class="form-group has-error has-feedback">
 <!-- label and input group here -->
</div>

Además, es necesario añadir el icono que queremos introducir mediante un elemento “span”. Esto se hace de forma distinta si la entrada de datos es un simple “input”, o si se trata de un “input-group” porque ya lleve un icono de información a su izquierda.

Por ejemplo, para una entrada de datos sencilla, sin icono a su izquierda, se introduce el “span” con la clase “form-control-feedback” tras el elemento “input”:

<span class="glyphicon glyphicon-remove form-control-feedback"></span>

Mientras que si se trata de añadirlo a un “input-group” porque el elemento del formulario tiene un icono de contexto, el nuevo “span” no se añade tras el elemento “input”, sino tras el “input-group”.

Por ejemplo, vemos un formulario completo, con 2 campos diferentes marcados como error y con icono de estado, siendo uno de los campos una entrada normal y el otro con icono de contexto:

<form class="form-horizontal">
 <!-- Primer elemento - Input - Glyphicon tras el input -->
 <div class="form-group has-error has-feedback">
  <label for="address" class="control-label col-md-3">Address:</label>
  <div class="col-md-6">
   <input type="text" name="address" id="address" class="form-control" />
   <span class="glyphicon glyphicon-remove form-control-feedback"></span>
  </div>
 </div>
 <!-- Segundo elemento - Input group - Glyphicon tras el input-group -->
 <div class="form-group has-error has-feedback">
  <label for="username" class="control-label col-md-3">Username:</label>
  <div class="col-md-6">
   <div class="input-group">
    <div class="input-group-addon">
     <span class="glyphicon glyphicon-user"></span>
    </div>
    <input type="text" class="form-control" name="username" id="username" />
   </div>
   <span class="glyphicon glyphicon-remove form-control-feedback"></span>
  </div>
 </div>
</form>

 

5.- Alertas

En algunas ocasiones es necesario mostrar el estado al usuario de una forma que acapare más su atención. Las alertas son clases que muestran secciones coloridas en una página, para captar la atención del usuario.

Al igual que el control de los estados de un formulario, las alertas de Bootstrap no son dinámicas, aunque se podrían dinamizar mediante las clases “visible” y “hidden” y el uso de Javascript. Es decir, si se crea una alerta en el HTML con Bootstrap, esta aparecerá por defecto, aunque se puede cerrar mediante un botón. Si queremos que esta alerta aparezca solo en determinadas circunstancias, tenemos que controlar su visibilidad mediante Javascript, o bien crearla directamente con Javascript cuando algo pase.

 

5.1.- Creación de una alerta

Una alerta se crea simplemente mediante un “div” de la clase “alert”:

<div class="alert">
 <!-- content -->
</div>

 

5.2.- Modificadores de alerta

Las alertas ofrecen una serie de modificadores para su aspecto, que básicamente cambian el color de la misma:

Modificador Color
alert-success Verde
alert-info Azul claro
alert-warning Amarillo
alert-danger Rojo

 

5.3.- Cerrar una alerta

Si se quiere hacer que las alertas se puedan cerrar (que es lo más lógico), es necesario asignar la clase “alert-dimissable” a la alerta, e incluir en su interior un botón para permitir cerrarla:
<div class="alert alert-warning alert-dismissable">
 <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
 <!-- content -->
</div>

 

5.4.- Contenido de una alerta

El contenido de las alertas puede ser cualquiera, y se pueden utilizar todo tipo de clases HTML en su interior. Solo hay una excepción: si se quieren incluir enlaces en la alerta, es necesario asignarles la clase adicional “alert-link”.

A continuación se muestra un ejemplo de una alerta completa de color amarillo, con un botón que permite cerrarla, y que incluye un enlace en su interior:

<div class="container">
 <div class="alert alert-warning alert-dismissable">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
  <h3>Warning</h3>
  <div>
   It appears that something has gone wrong. Click <a href="some_url" class="alert-link"> here</a> to show more info.
  </div>
 </div>
</div>

 

6.- Diálogos modales

Un diálogo o ventana modal es un componente que se muestra (aparece) sobre el resto del contenido de la página, y hace que esta sea inaccesible hasta que el diálogo modal no se haya cerrado. Son el tipo de componente que más consigue atraer la atención de un usuario, porque aparece sobre todo lo demás, e inhabilita todo lo demás hasta que se ha cerrado este componente.

Los diálogos modales pueden mostrar cualquier contenido HTML, como mensajes de estado, formularios o incluso vídeos.

 

6.1.- Construcción de un diálogo modal desde cero

Un diálogo modal está formado por un “div” de la clase “modal”, al que se le puede añadir la clase “fade” para crear el efecto de aparecer de la nada. Es necesario asignarlo un “id”, y puede llevar otros atributos que pueden resultar útiles:

  • tabindex=“-1” : permite que si un usuario está usando el tabulador para moverse por un formulario, el propio diálogo modal no se pueda seleccionar en sí como un elemento más.
  • role=“dialog” : es importante para la accesibilidad, ya que permite el uso de lectores de pantalla.

Interno al “div” de clase “modal” se crea otro “div” de la clase “modal-dialog”, y dentro de este otro “div” de la clase “modal-content”.

Finalmente, dentro del contenido del diálogo van 3 secciones:

  • Un “div” de la clase “modal-header”: dentro de este va la sección superior (cabecera) del diálogo, que suele incluir el botón para cerrar el diálogo, y puede llevar un título con la clase “modal-title”.
  • Un “div” de la clase “modal-body”: dentro de este va la sección central (cuerpo) del diálogo, que puede incluir cualquier cosa que se quiera (texto, vídeos, formulario…).
  • Un “div” de la clase “modal-footer”: dentro de este va la sección inferior (pie) del diálogo, que suele incluir botones para cerrar el diálogo, ejecutar una acción, etc.

A continuación, se muestra un ejemplo de un diálogo modal completo, que se puede utilizar como base para construir uno con la estructura que se desee:

<div id="myModal" class="modal fade” tabindex=“-1">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">Confirmation</h4>
   </div>
   <div class="modal-body">
    <p>Do you want to save changes you made to document before closing?</p>
    <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
   </div>
  </div>
 </div>
</div>

 

6.2.- Mostrar un diálogo modal

Para mostrar un diálogo modal, no es necesaria la utilización de Javascript, aunque igualmente podría hacerse así. Mientras que la validación de formularios y las alertas son elementos completamente estáticos, y o bien se muestran o no (mediante el uso de clases de visibilidad), los diálogos modales pueden no mostrarse por defecto y hacerlo mediante la pulsación de un botón o enlace.
Para crear un botón o enlace que muestre un diálogo modal, es necesario que tenga los atributos “data-toggle=“modal”” y “data-target=“#myModal”” (“data-target” debe ser el ID que se le haya asignado al diálogo modal):
<button type=“button” class=“btn btn-success” data-toggle=“modal” data-target=“#myModal”>Show modal</button>

 

7.- ANEXO – Dinamización de Bootstrap: Javascript + jQuery

Aunque no es objetivo de esta serie de 3 tutoriales, ya que el Javascript en sí no lo es en este caso, incluiré un último apartado en el que se explica, de forma básica, como utilizar Javascript y jQuery para dinamizar las clases de Bootstrap para validar un formulario o mostrar u ocultar elementos de la página.

Como se ha visto antes, Bootstrap ofrece muchas clases y tipos de contenidos que se pueden utilizar en una aplicación web, pero en muchos casos, es necesario utilizar Javascript para poder hacer un correcto uso de estas clases:

  • Cambiar la clase de algún elemento para mostrar un estado o un color específico (validaciones de formularios).
  • Asignar la clase “visible” o “hidden” a un elemento para hacer que este se muestre o no (alertas).
  • Lanzar determinados elementos (diálogo modales, si se quiere hacer de alguna forma que no sea mediante un botón manual).

Bootstrap está basado en jQuery para todos los comportamientos que realiza mediante Javascript. Y además, Bootstrap está completamente basado en la aplicación de clases. De esta forma, para el desarrollador de una aplicación web, jQuery es muy útil a la hora de dinamizar los elementos de Bootstrap, sobre todo porque ofrece 2 sencillos métodos que permiten añadir o quitar clases a un elemento de la página.

 

7.1.- Aplicación de jQuery para dinamizar un formulario

Vamos a estudiar el caso de validar un formulario mediante jQuery, aplicando los estados de los elementos mediante Bootstrap. Para ello, inicialmente preparamos el formulario para que los campos (“form-group”) puedan mostrar un error, y vemos las clases que son necesarias para ello:

  • El “form-group” se marcaba con las clases “has-error” y “has-feedback”. La clase “has-feedback” se puede mantener, ya que únicamente indica que se puede dar “feedback” al usuario con este campo, pero de por sí no muestra nada si no se añade nada más. La clase “has-error” la quitamos, y es lo que se añadirá dinámicamente mediante jQuery, puesto que si se deja, el elemento se mostrará en rojo de partida.
  • Tras el “input” o el “input-group” (dependiendo de si se había añadido un icono a la caja de texto de la entrada) se incluía un “span” con un icono de “feedback” indicando si dicho campo era erróneo o no. Este “span” tenía las clases “glyphicon”, “glyphicon-remove” y “form-control-feedback”. La primera y la tercera no muestran nada, son clases indicadoras, que podemos mantener sin efecto. Pero la clase “glyphicon-remove” indica el icono que hay que mostrar, por lo que esta clase se elimina, y se añadirá dinámicamente mediante jQuery, para que de partida no se muestre el icono de estado.

También vamos a incluir una alerta sobre el formulario para mostrar información sobre el mismo. Este componente queremos que no aparezca de inicio, y que se muestre si se dan ciertas condiciones. Para ello, simplemente tenemos que añadirle la clase “hidden” por defecto para que no se muestre en el estado inicial de la página, y esta clase puede eliminarse dinámicamente mediante jQuery si queremos mostrarlo.

Código HTML

Por lo tanto, el código HTML de nuestra página con la alerta y el formulario quedaría de la siguiente manera (se ha excluido las importaciones de los ficheros CSS y Javascript, que ya conocemos):

<body>
 <div class="container" style="padding-top: 20px; padding-bottom: 50px;">
  <!-- Alerta -->
  <div class="container">
   <div class="alert alert-warning alert-dismissable hidden" id="myAlert">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <h3>Warning</h3>
    <div>It appears that something has gone wrong.</div>
   </div>
  </div>
  <!-- Formulario -->
  <form class="form-horizontal">
   <div class="form-group has-feedback">
    <label for="address" class="control-label col-md-3">Email:</label>
    <div class="col-md-6">
     <div class="input-group">
      <div class="input-group-addon">
       <span class="glyphicon glyphicon-envelope"></span>
      </div>
      <input type="email" class="form-control" name="email" id="email" required="required" />
     </div>
     <span class="glyphicon form-control-feedback"></span>
    </div>
   </div>
   <div class="form-group has-feedback">
    <label for="username" class="control-label col-md-3">Username:</label>
    <div class="col-md-6">
     <div class="input-group">
      <div class="input-group-addon">
       <span class="glyphicon glyphicon-user"></span>
      </div>
      <input type="text" class="form-control" name="username" id="username" required="required" />
     </div>
     <span class="glyphicon form-control-feedback"></span>
    </div>
   </div>
   <a href="#" id="save" class="btn btn-default col-md-offset-4 col-md-4">Submit</a>
  </form>
 </div>
</body>

Código Javascript

Y el código Javascript, basado en jQuery, que realiza la validación del formulario y se encarga de modificar las clases de los elementos que hemos comentado, sería el siguiente:

$(function () {
 // Cuando alguien pulse sobre el botón “save"
 $('#save').click(function() {
  // Por defecto suponemos que el formulario es correcto al completo
  var formvalid = true;
  // Por cada “input” del formulario
  $('input').each(function() {
   // Obtenemos la referencia al form-group como padre del input
   var formGroup = $(this).parents('.form-group');
   // Y la referencia al glyphicon desde el form-group
   var glyphicon = formGroup.find('.glyphicon');
   // Comprobamos la validez del input usando el metodo que comprueba la validez mediante los atributos de HTML5
   if (this.checkValidity()) {
    // Si es válido añadimos las clases que marcan ok y se eliminan las que marcan error por si acaso
    formGroup.addClass('has-success').removeClass('has-error');
    glyphicon.addClass('glyphicon-ok').removeClass('glyphicon-remove');
   } else {
    // Si no es válido añadimos las clases que marcan error y se eliminan las que marcan ok por si acaso
    formGroup.addClass('has-error').removeClass('has-success');
    glyphicon.addClass('glyphicon-remove').removeClass('glyphicon-ok');
    // Ya que hay un input con error marcamos el formulario como erróneo
    formvalid = false;
   }
  });
  if (!formvalid) {
   // Mostramos la alerta
   $('#myAlert').removeClass('hidden');
  }
 });
});

La función “checkValidity” de jQuery se basa en los atributos añadidos a cada “input” del formulario:

  • type=“email” / type=“text”  : comprobará que lo escrito se adapte al tipo HTML5 especificado.
  • required=“required”  -> comprobará que se haya introducido algún valor en el campo.

Por lo tanto, gracias a que Bootstrap se basa casi al 100% en clases, hace muy sencillo añadirle un comportamiento dinámico con jQuery.

 

8.- Ejercicio de la Parte 3

Tras terminar esta tercera parte del tutorial de introducción a Bootstrap, vamos a hacer un sencillo ejercicio para poner en práctica algunos de los conceptos que se han introducido en los anteriores apartados.

El ejercicio tratará simplemente de crear una página sencilla de ejemplo, basada en un “wireframe” y una captura de pantalla de como se espera que quede.

 

8.1.- Instrucciones de la página a crear

Se trata de una página que inicialmente mostrará solo un botón, con el texto “Open dialog”. Este botón debe hacer precisamente eso, abrir un cuadro de diálogo modal, que tendrá el contenido que se muestra en las imágenes.

El botón de cerrar el cuadro y el de cancelar deben cerrar el cuadro de diálogo modal, mientras que el de confirmar no tiene porque hacer nada.

 

8.2.- Wireframe de la página a crear

wireframe

 

8.3.- Captura de pantalla de la página a crear

screenshot

 

8.4.- Código de la página

<!DOCTYPE html>
<html>
 <head>
  <title>Bootstrap Lab 2</title>
  <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css" />
 </head>
 <body>
  <div class="container">
   <div id="myModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
     <div class="modal-content">
      <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
       <h4 class="modal-title">Are you sure?</h4>
      </div>
      <div class="modal-body">
       <p>Are you sure you wish to submit this album?</p>
      </div>
      <div class="modal-footer">
       <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
       <button type="button" class="btn btn-primary">Confirm</button>
      </div>
     </div>
    </div>
   </div>
   <button type="button" class="btn btn-success col-xs-12 col-sm-offset-3 col-sm-6" data-toggle="modal" data-target="#myModal">Open dialog</button>
  </div> <!-- container -->
  <!-- JavaScript -->
  <script type="text/javascript" src="./js/jquery-2.1.3.min.js"></script>
  <script type="text/javascript" src="./js/bootstrap.min.js"></script>
 </body>
</html>

 

8.5.- Código en Github

Para todos aquellos que quieran, pueden acceder al código completo del ejercicio en Github:

https://github.com/icardenasr/bootstrap_tutorial