Bootstrap Jumbotron es un componente receptivo cuyo objetivo principal es llamar la atención del visitante o resaltar una información especial. Dentro de un Jumbotron, puede utilizar casi cualquier otro código Bootstrap para aumentar aún más su valor de participación.
Usos de Jumbotron:
- Escaparate de imágenes
- Resaltar contenido
- Introducción para un tema determinado
Acercarse:
- Para crear un arranque de Jumbotron, se proporciona una clase denominada «jumbotron» .
- Bootstrap utiliza algunas propiedades predeterminadas aplicadas a Jumbotron, lo que lo convierte en un muy buen «punto de atracción».
Ejemplo 1: Crear un Jumbotron simple:
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity= "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <div class="jumbotron"> <h1>Text to catch user attention/greeting.</h1> <p class="lead">lorem ipsum.</p> <hr class="my-4"> <p>Some dummy text</p> </div> </body> </html>
Producción:
Ejemplo 2: para crear un Jumbotron de ancho completo, usamos la clase jumbotron-fluid junto con la clase Jumbotron.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity= "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <div class="jumbotron jumbotron-fluid"> <div class="container"> <h1 class="display-4">Fluid jumbotron</h1> <p class="lead"> This is a modified jumbotron that occupies the entire horizontal space of its parent. </p> </div> </div> </body> </html>
Producción
Ejemplo 3: También podemos diseñar el Jumbotron y agregar imágenes de fondo para hacerlo más atractivo, como se muestra a continuación.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<style>
.jumbotron-image {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="jumbotron text-white jumbotron-image shadow"
style="background-image: url(
https://media.geeksforgeeks.org/wp-content/uploads/20200914000601/gfg-300x200.jpg
);">
<h2 class="mb-4">
Jumbotron with background image
</h2>
<p class="mb-4">
Hey, check this out.
</p>
<a class="btn btn-primary">
Click!
</a>
</div>
</body>
</html>
Producción
Publicación traducida automáticamente
Artículo escrito por SnehashishKalamkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA