Aprendiendo a usar Bootstrap parte 6 – Diseño Adaptativo en Formularios

Añade un Diseño Adaptativo a tus botones circulares.

Puedes usar los classes “col-xs-*” de Bootstrap en los elementos de los formularios también. De esta manera, nuestros botones circulares estarán esparcidos en linea recta a lo largo de la página.

Anida todos tus botones circulares dentro de un elemento div con el class “row”. Luego anida cada uno de los botones dentro de un div con el class “col-xs-6”.

 

<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css”/>

<link href=”https://fonts.googleapis.com/css?family=Lobster” rel=”stylesheet” type=”text/css”>

<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css”/>

<div class=”container-fluid”>
<style>
h2 {
font-family: Lobster, Monospace;
}

.borde-verde-estrecho {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}

</style>

<div class=”row”>

<div class=”col-xs-8″>

<h2 class=”text-primary text-center”>MisViajes</h2>

</div>

<div class=”col-xs-4″>

<a href=”#”><img class=”img-responsive borde-verde-estrecho” src=”https://cryptodevelopments.com/wp-content/uploads/2017/04/travel.jpeg” alt=”Lentes sobre mapa”></a>

</div>

</div>

<img class=”img-responsive” src=”https://goo.gl/1DhMKc”>

<div class=”row”>

<div class=”col-xs-4″><button class=”btn btn-block btn-primary”>Me Gusta<i class=”fa fa-thumbs-up”></i></button></div>
<div class=”col-xs-4″><button class=”btn btn-block btn-info”>Info<i class=”fa fa-info-circle”></i></button></div>
<div class=”col-xs-4″><button class=”btn btn-block btn-info btn-danger”>Borrar<i class=”fa fa-trash”></i></button></div></div>

<p>Para viajar <span class = “text-danger”>necesitamos:</span></p>
<ul>
<li>Pasaporte</li>
<li>Dinero</li>
<li>Conocimiento del lugar </li>
</ul>
<p>Cosas que debes evitar en el viaje:</p>
<ol>
<li>Tener gastos innecesarios</li>
<li>Romper la ley</li>
<li>No preveer posibles riesgos</li>
</ol>

<form action=”/submit-cat-photo”>

<label><input type=”radio” name=”solo-acompañado” checked> Solo</label>
<label><input type=”radio” name=”solo-acompañado”> Acompañado</label>
<label><input type=”checkbox” name=”destino” checked> Ciudad</label>
<label><input type=”checkbox” name=”destino”> Selva</label>
<label><input type=”checkbox” name=”destino”> Islas</label>
<input type=”text” placeholder=”Mis viajes URL” required>
<button type=”submit”>Enviar</button>
</form>

</div>

 

  1. Copia y pega tu código en nuestro editor online (Try it editor).
  2. Anida todos tus botones circulares dentro de un elemento div con el class “row”.
  3. Anida cada uno de tus botones circulares dentro de su propio elemento div con el class “col-xs-6”.
  4. Asegúrate de que cada uno de tus elementos div tienen su respectiva etiqueta de cierre.
  5. No cierres la ventana de nuestro editor, seguiremos usando el código a lo largo de todo el articulo.

 

Añade un Diseño Adaptativo a tus casillas de verificación.

Al igual que con los botones circulares, podemos añadirle estilos de Bootstrap a nuestras casillas de verificación.

Anida todas tus casillas de verificación dentro de un elemento div con el class “row”. Luego anida cada uno de los botones dentro de un div con el class “col-xs-4”.

 

  1. Anida todos tus botones circulares dentro de un elemento div con el class “row”.
  2. Anida cada uno de tus botones circulares dentro de su propio elemento div con el class “col-xs-6”.
  3. Asegúrate de que cada uno de tus elementos div tienen su respectiva etiqueta de cierre.

 

Añade un Diseño Adaptativo a las entradas de texto.

Puedes añadirle iconos a tu botón de “Enviar” tan solo añadiendo el elemento <i class="fa fa-paper-plane"></i>.Ademas, también puedes hacer que tu elemento de entrada de texto tenga el 100% del ancho de página, sin importar los diferentes tamaños de pantallas en donde sea abierta nuestra app asignándole el class “form-control”.

Por ultimo, dale a tu botón “Enviar” los classes “btn” y “btn-primery”.

 

  1. Dale a tu botón “Enviar” los classes “btn” y “btn-primery”.
  2. Añade el elemento <i class="fa fa-paper-plane"></i> dentro de tu botón “Enviar”.
  3. Dale a tu elemento de entrada de texto el class “form-control”.
  4. Asegúrate de que tu elemento i tenga su etiqueta de cierre.

 

Alinea elementos de formulario con Bootstrap.

Ahora vamos a colocar tu entrada de texto y tu botón “Enviar” en la misma linea. Lo haremos de la misma manera en que hemos hecho anteriormente con los botones circulares y las casillas de verificación.

Anida tu elemento de entrada de texto y tu botón “Enviar” dentro de un mismo elemento div con el class “row”. Anida tu elemento de entrada de texto dentro de un div con el class “col-xs-7” y por último anida tu elemento botón “Enviar” dentro de un div con el class “col-xs-5”.

 

  1. Anida tu botón “Enviar” y tu elemento de entrada de texto dentro de un mismo elemento div con el class “row”.
  2. Anida tu elemento de entrada de texto dentro de un elemento div con el class “col-xs-7”.
  3. Anida tu elemento botón “Enviar” dentro de un elemento div con el class “col-xs-5”.

 

Este es la última modificación que le haremos a nuestra app. Esperamos que hayas disfrutado aprendiendo Font Awesome, Bootstrap y el Diseño Adaptativo.

 

 

Puedes regresar al anterior articulo aquí.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *