Aprendiendo a usar Bootstrap parte 2 – Estiliza tu Botón Bootstrap

Centra el texto con Bootstrap.

Ahora que estamos usando Bootstrap, podemos centrar nuestros elementos para hacerlos lucir mejor. Todo lo que necesitamos hacer es añadir el class “text-center” a nuestro elemento h2.

Recuerda que puedes añadir varios classes al mismo elemento separándolos entre sí por un espacio de la siguiente manera:

 

<h2 class="texto rojo text-center">tu texto</h2>

 

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

<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 h2 debe estar centrado gracias al class “text-center”.
  3. Tu elemento h2 debe tener aun el class “texto-rojo”.
  4. No cierres la ventana de nuestro editor, seguiremos usando el código a lo largo de todo el articulo.

 

Crea un botón Bootstrap.

Bootstrap tiene sus propios estilos para los botones, los cuales lucen mucho mejor que los normales de HTML.

Crea un nuevo elemento botón debajo de tu imagen más grande y dale el class “btn” y el texto “Me Gusta”.

 

  1. Crea un nuevo elemento botón con el texto “Me Gusta”.
  2. Tu nuevo botón debe tener el class “btn”.
  3. Asegúrate de que tu elemento botón tiene su respectiva etiqueta de cierre.

 

Crea un Boton Bootstrap de tipo bloque.

Normalmente, los elementos de botón con un class “btn” son sólo tan largos como el texto que contienen. Por ejemplo:

 

<button class="btn">Enviar</button>

Este botón solo sera tan largo como la palabra “Enviar”, puedes comprobarlo en una nueva ventana de nuestro editor online (Try it editor).

Haciéndolo un botón de tipo bloque con el class adicional “btn-block”, tu botón se estirará hasta rellenar por completo el espacio horizontal de la pagina y todos los elementos que lo siguen se irán a la siguiente línea debajo del bloque.

 

<button class="btn btn-block">Enviar</button>

 Este botón tomará todo el espacio disponible de la página.

Nota que estos botones necesitan el class “btn”.

Añade el class “btn-block” a tu botón Bootstrap.

 

  1. Tu botón debe conservar el class “btn”.
  2. Tu botón debe tener el class “btn-block”.
  3. Asegúrate de que todos tus elementos tengan su respectiva etiqueta de cierre.

 

Prueba el color primario de un botón Bootstrap.

El class “btn-primary” es el color principal que usarás en tu app. Es útil para resaltar acciones que quieres que el usuario haga.

Añade el class “btn-primary” a tu botón.

Nota que este botón sigue necesitando los classes “btn” y “btn-block”.

 

  1. Tu botón debe tener los classes “btn” “btn-block” y “btn-primary”.
  2. Asegúrate de que tu botón tenga su etiqueta de cierre.

 

Botón Bootstrap de informacion.

Bootstrap tiene varios colores predefinidos para los botones. El class “btn-info” es usado para llamar la atención del usuario para que tome acciones opcionales.

Crea un nuevo botón bootstrap de tipo bloque debajo de tu botón de “Me Gusta” con el texto “Info”, y añádele los classes “btn-info”, “btn” y “btn-block”.

 

  1. Crea un nuevo botón con “Info” como texto.
  2. Tus dos botones deben tener los classes “btn” y “btn-block”.
  3. Tu nuevo botón debe tener el class “btn-info”.
  4. Asegúrate de que tu nuevo botón tenga su etiqueta de cierre.

 

Botón Bootstrap para acciones peligrosas.

Bootstrap tiene varios colores predefinidos para los botones. El class “btn-danger” le da un color rojo al boton para notificarle al usuario que presionando el botón se se realizaría una acción destructiva, como borrar una foto de un viaje.

Crea un botón Bootstrap con el texto “Borrar” y dale el class “btn-danger”.

Nota que este botón también necesita de los classes “btn” y “btn-info”.

 

  1. Crea un nuevo botón Bootstrap con el texto “Borrar” y dale el class “btn-danger”.
  2. Todos tus botones Bootstrap deben tener los classes “btn” y “btn-block”.
  3. Tu nuevo botón debe tener el class “btn-danger”.
  4. Asegúrate de que todos tus botones tengan su etiqueta de cierre.

 

 

Con esta tarea damos por finalizada ésta entrega. En el siguiente apartado hablaremos de cómo funciona el sistema de rejillas o cuadrícula adaptativa en Bootstrap para especificar el ancho de un elemento y posicionarlos uno al lado del otro. 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 *