34 - Componente : jumbotron


Una forma de presentar un título y un contenido en forma muy destacada en una página se logra utilizando la clase "jumbotron".

Para hacer uso de esta herramienta que provee el Bootstrap solo debemos encerrar el título y el contenido a mostrar en un div con la clase "jumbotron".

Veamos una página que muestra el uso de la clase "jumbotron":

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Prueba de Bootstrap</title> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head> 
<body> 
  <div class="container">
    
    <div class="jumbotron">
      <h1>Tutorial de Bootstrap</h1> 
      <p>Bootstrap es un framework (librerías de CSS) que nos facilita y estandariza el desarrollo de sitios web.</p>
      <p>A partir de la versión 3.x ha sido implementado pensando que se adapte tanto a las pantallas de equipos de 
         escritorio como a móviles y tablets.</p>
      <p>Bootstrap ha sido desarrollada y es mantenida por la empresa Twitter y la ha liberado como un producto Open Source.</p>
      <form role="form">
        <div class="form-group">
          <button type="submit" class="btn btn-primary btn-lg">Ingresar</button>       
        </div> 
      </form>
    </div>

  </div> 
</body> 
</html> 

Como resultado en el navegador tenemos:

jumbotron bootstrap

Para recordar esta palabra tengamos en cuenta que un "jumbotron" es una pantalla gigante (desarrollada por sony) y que se utiliza generalmente en los estadios deportivos para mostrar información.

Ejecutar Ejemplo

Retornar