Aprendiendo a usar Bootstrap parte 3 – Cuadrícula Adaptativa

Usa la Cuadrícula Adaptativa de Bootstrap para colocar elementos uno al lado de otro.

Bootstrap usa una rejilla o cuadrícula adaptativa para que el colocar elementos en fila y especificar el ancho de cada elemento resulte mas cómodo. Aquí te dejamos un diagrama que explica como la cuadricula de 12 columnas de Bootstrap funciona:

 

cuadrícula adaptativa

 

Nota que en ésta imagen, el class “col-md-*” está siendo usado. Aquí, md significa mediano y * es un número que especifica cuántas columnas de ancho mide un elemento. En este caso está siendo especificado el ancho de la columna de un elemento en una pantalla mediana, como la de una laptop.

En Mis Viajes App que estamos construyendo, usaremos el class “col-xs-*”, donde xs significa extra pequeño (como la pantalla extra pequeña de un teléfono inteligente), y * es el numero de columnas de ancho que corresponde al elemento en cuestion.

Coloca los botones Bootstrap uno al lado del otro anidándolos dentro de un elemento div con el class “row” y luego anida cada botón dentro de un elemento div con el class “col-xs-4”.

 

<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”>

<div class=”container-fluid”>
<style>
.texto-rojo {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

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

.imagen-pequeña {
width: 100px;
}
</style>

<h2 class=”texto-rojo text-center”>MisViajes</h2>

<p>Mira más fotos de <a href=”#”>mis viajes</a>.</p>

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

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

<button class=”btn btn-block btn-primary”>Me Gusta</button>
<button class=”btn btn-block btn-info”>Info</button>
<button class=”btn btn-block btn-info btn-danger”>Borrar</button>

<p>Para viajar necesitamos:</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. Tus botones Bootstrap deben estar anidados dentro de un mismo elemento div con el class “row”.
  3. Cada uno de tus botones Bootstrap debe estar dentro de un elemento div con el class “col-xs-4”.
  4. Asegúrate de que cada uno de tus elementos tenga su etiqueta de cierre.
  5. No cierres la ventana de nuestro editor, seguiremos usando el código a lo largo de todo el artículo.

 

Reemplaza el CSS por Bootstrap.

Podemos limpiar un poco nuestro código y hacer que nuestra app luzca más convencional usando estilos incorporados de Bootstrap en vez de los estilos personalizados que creamos en la guía anterior.

Borra las declaraciones CSS .texto-rojo, p, e .imagen-pequeña de tu elemento style, dejando únicamente las declaraciones h2 y .borde-verde-estrecho.

Luego borra el elemento p que contiene el enlace muerto y quita también el class “texto-rojo” de tu elemento h2 y reemplazalo con el class “text-primary”

Finalmente, quita el class “imagen-pequeña” de tu primer elemento img y reemplázalo por el class “img-responsive”.

 

  1. Tu elemento h2 no debe tener el class “texto-rojo”.
  2. Tu elemento h2 debe tener el class “text-primary”.
  3.  Tu elemento p no debe usar la fuente Monospace.
  4. Remueve el class “imagen-pequeña” de tu imágen superior.
  5. Añade el class “img-responsive” a tu imágen superior.

 

 

Con esta tarea damos por finalizada ésta entrega. En el siguiente apartado hablaremos de los elementos span y pondremos en práctica lo aprendido en este artículo. . Puedes ingresar a la entrada aquí: Siguiente

También 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 *