Bootstrap (Parte 7): Mostrar contenido destacado

Redes sociales

Logo BootstrapEn este artículo te voy a enseñar tres clases Bootstrap para mostrar contenidos de forma destacada. Estas tres clases son: .jumbotron, .page-header y .wells

Jumbotrons o pantallas gigantes

Jumbotron, podríamos traducirlo como “pantalla gigante”. La clase .jumbotron visualiza, en el navegador, un caja de color gris con esquinas redondeadas. El texto en su interior se muestra con una fuente de tamaño ampliado. Dentro del jumbotron se puede incluir casi cualquier elemento HTML válido, incluyendo otros elementos o clases Bootstrap.

Para crear un jumbotron, utilizarás un elemento <div> con la clase .jumbotron.

Por defecto, el jumbotron ocupa toda la pantalla del navegador. Si no deseas que el jumbotron ocupe toda la pantalla del navegador tendrás que colocarlo en el interior del <div class=”container”>.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ejemplo Bootstrap - Webdisenia</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <div class="jumbotron">
    <h1>Tutorial de Bootstrap</h1>
    <p>Bootstrap es el framework HTML/CSS/JS m&aacute;s popular para desarrollar proyectos responsivos en la web.</p>
  </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
   ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
   laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador:

Jumbotron - Bootstrap

Encabezamiento de páginas

Es habitual que los sitios web de blogs y publicaciones, como periódicos y revistas, muestren de forma prominente el tutlar de la página junto a alguna otra información destacada. Para obtener este resultado, puedes utilizar la clase .page-header. Esta añade una línea horizontal y algún espacio extra para separar el encabezamiento de página del resto de la misma.

Generalmente, utilizarás la clase .page-header, junto a un elemento <h1>, y a veces un elemento <small> para alguna información secundaria.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
   <title>Ejemplo Bootstrap - Webdisenia</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
 </head>
 <body>
    <div class="container">
       <div class="page-header">
          <h1>Encabezamiento de p&aacute;gina <small>con un texto secundario</small></h1>
       </div>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
       ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
       laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
 </body>
 </html>

Resultado en el navegador:

page-header - Bootstrap

Pozos

Puedes utilizar los pozos para enmarcar elementos en el interior de cajas con bordes redondeados, color de fondo gris y efecto de profundidad (inset). Para definir un pozo debes de utilizar la clase .well.

Ejemplo:

<!DOCTYPE html>
 <html>
 <head>
    <title>Ejemplo Bootstrap - Webdisenia</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
 </head>
 <body>
    <div class="container">
       <h2>Pozo</h2>
       <div class="well">Este texto se encuentra en el interior de un pozo.</div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
 </body>
 </html>

Resultado en el navegador:

well (pozos) - Bootstrap

Tamaños de pozo

Se puede cambiar el tamaño del pozo añadiendo las clases .well-sm para pozos pequeños o .well-lg para pozos grandes.

Ejemplo:

<!DOCTYPE html>
 <html>
 <head>
    <title>Ejemplo Bootstrap - Webdisenia</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
 </head>
 <body>
    <div class="container">
       <h2>Tama&ntilde;o de pozo</h2>
       <div class="well well-sm">Texto en un pozo peque&ntilde;o.</div>
       <div class="well">Texto en un pozo normal.</div>
       <div class="well well-lg">texto en un pozo grande.</div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
 </body>
 </html>

Resultado en el navegador:

well (pozos) - Bootstrap

Redes sociales

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.