Aprendiendo a usar Bootstrap parte 1 – Introducción al Diseño Adaptativo

Bienvenido a la primera entrega de la guía Aprendiendo a utilizar Bootstrap. Antes de comenzar me gustaría mencionar que para ir poniendo en practica lo aprendido estaremos modificando nuestra app comenzada en la guía Aprendiendo HTML y CSS.

Bootstrap es un framework de código abierto que se usa para hacer mas fácil el diseño de sitios y aplicaciones web. Nos proporciona formularios, plantillas de diseño con tipografía, botones, cuadros, menús de navegación y demás elementos basados en HTML y CSS, así como algunas extensiones adicionales de JavaScript.

 

Requerimientos

¿Qué necesitamos para comenzar a aprender?

  • Conocimientos básicos de ofimática: saber copiar, pegar, mover y abrir archivos (estos conocimientos son recomendables, mas no imprescindibles).
  • Algún explorador web: Pueden utilizar cualquiera (Mozilla Firefox, Google Chrome, Zafari) nosotros recomendamos Chrome ya que es de los más ligeros, versátiles y que tiene mas funcionalidades interesantes, sin embargo, el explorador que estás usando para ver ésta pagina sirve.
  • Algún editor de texto: Puede ser el mismo bloc de notas que tiene Windows por defecto, pero se puede utilizar gedit o notepad++, sin embargo, para realizar las tareas propuestas para esta guía utilizaremos un editor online (try it editor) que recomendamos para mayor comodidad.

 

 

Usa Diseño Adptativo con Contenedores Fluidos Bootstrap

En la guía Aprendiendo HTML y CSS creamos nuestra app llamada “Mis Viajes”, regresemos a ella.

Esta vez, usaremos Bootstrap para terminarla. Bootstrap analizará cuán ancho es la pantalla desde donde se verá nuestra app y adaptará el tamaño de nuestros elementos HTML para que se vean bien (de aquí el nombre de diseño adaptativo). Con el diseño adaptativo, no necesitamos diseñar una versión móvil para tu página web, ya que se verá bien en cualquier pantalla de cualquier tamaño.

Puedes añadir Bootstrap a cualquier página colocando el siguiente código en la parte superior de tu HTML.

 

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

 

Para comenzar, debemos colocar el código anterior y anidar todo nuestro código HTML dentro de un elemento div con el class “container-fluid”. aquí te dejamos el progreso de tu app.

 

<link href=”https://fonts.googleapis.com/css?family=Lobster” rel=”stylesheet” type=”text/css”>
<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”>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>

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

 

  1. Copia y pega tu código en nuestro editor online (Try it editor).
  2. Coloca el código para usar Bootstrap en la parte superior del código.
  3. Anida todos los elementos HTML dentro de un elemento div con el class “container-fluid”.
  4. Asegúrate que tu elemento div tiene su etiqueta de cierre.
  5. No cierres la ventana de nuestro editor, seguiremos usando el código en breve.

 

Haz que tus imágenes tengan diseño adaptativo

Primero, añade una nueva imagen debajo de la que ya tenemos. Colócale el atributo src “https://goo.gl/1DhMKc”. Sería genial que esta imágen fuera exactamente del tamaño de la pantalla de nuestro teléfono, afortunadamente, con Bootstrap sólo necesitamos añadir el class “img-responsive” a la imágen. Has esto y la imágen debería encajar perfectamente en tu página.

 

  1. Debes tener un total de dos imágenes.
  2. Tu nueva imagen debe estar debajo de la antigua y tener el class “img-responsive”.
  3. Tu nueva imagen no debe tener el class “imagen-pequeña”.
  4. La nueva imagen debe tener el src “https://goo.gl/1DhMKc”.

 

 

Con esta tarea damos por finalizada ésta entrega. En el siguiente apartado hablaremos de cómo crear y configurar los botones bootstrap. Puedes ingresar a la entrada aquí: Siguiente

Deja un comentario

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