Aprendiendo a usar Bootstrap parte 4 – Elemento Span

Elemento Span.

Puedes usar el elemento span para crear elementos en línea, que serían lo opuesto a los elementos de tipo bloque, ya que con los elementos en bloque utilizaríamos una linea entera, mientras que los elementos en línea solo ocupan el espacio entre las etiquetas que los definen. Los span se usan principalmente para darle estilo a un texto en especifico, ya que por lo general contienen texto.

Anida la palabra “necesitamos” en tu primer elemento p dentro de un elemento span. Luego dale a ese elemento span el class “text-danger” para que el texto sea rojo. Aquí te dejamos un ejemplo de como hacerlo con el elemento “Cosas que debes evitar en el viaje:”.

 

<p>Cosas que debes evitar en el <span class = "text-danger">viaje:</span></p>

 

<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>
h2 {
font-family: Lobster, Monospace;
}

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

</style>

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

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

<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</button></div>
<div class=”col-xs-4″><button class=”btn btn-block btn-info”>Info</button></div>
<div class=”col-xs-4″><button class=”btn btn-block btn-info btn-danger”>Borrar</button></div></div>

<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. Tu elemento span debe estar dentro de tu elemento p.
  3. Tu elemento span debe tener el texto “necesitamos:”.
  4. Tu elemento span debe tener el class “text-danger”.
  5. Asegúrate de que tu elemento span tiene su etiqueta de cierre.
  6. No cierres la ventana de nuestro editor, seguiremos usando el código a lo largo de todo el articulo.

 

Crea un Encabezado Personalizado.

Haremos un encabezado simple para nuestra Mis Viajes App colocando el título y la imagen de los lentes en la misma linea.

Recuerda que Bootstrap usa una cuadrícula adaptativa que hace mas fácil colocar elementos en filas y especificar el ancho de cada elemento.

Anida tu primera imagen y tu elemento h2 en un elemento div con el class “row”, luego, tu elemento h2 debe estar anidado dentro de otro div con class “col-xs-8” y tu imagen dentro de otro div con class “col-xs-4” para que ambos estén en la misma línea.

Nota como la imagen se adapta para estar al lado del texto.

 

  1. Tu elemento h2 y el primer elemento img deben estar ambos anidados dentro de un elemento div con el class “row”.
  2. Anida el elemento img superior dentro de un elemento div con el class “col-xs-4”.
  3. Anida tu elemento h2 dentro de un elemento div con el class “col-xs-8”.
  4. Asegúrate de que todos los elementos div tengan sus respectivas etiquetas de cierre.

 

Con esta tarea damos por finalizada ésta entrega. En el siguiente apartado hablaremos de cómo añadir iconos a nuestra app mediante la herramienta Font Awesome Icons. 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 *