Bulma es un marco CSS de código abierto que facilita el desarrollo de interfaces receptivas. Está basado en flexbox. En este artículo, veremos las tres partes del héroe de altura completa.
El héroe de altura completa ocupa toda la altura de la ventana gráfica. Se puede dividir en tres partes: héroe-cabeza , héroe-cuerpo y héroe-pie .
Clases CSS de héroe de altura completa:
- cabeza de héroe: esta clase se usa para deformar la cabeza (parte superior) del héroe.
- hero-body: Esta clase se utiliza para envolver el cuerpo del héroe. El contenido siempre está centrado verticalmente.
- hero-foot: esta clase se usa para deformar el pie (parte inferior) del héroe.
Sintaxis:
<section class="hero is-link is-fullheight">
<!-- Hero head: At the top -->
<div class="hero-head">
...
</div>
<!-- Hero content: In the middle -->
<div class="hero-body">
...
</div>
<!-- Hero footer: At the bottom -->
<div class="hero-foot">
...
</div>
</section>
Ejemplo: El siguiente ejemplo muestra el uso de las clases cabeza de héroe, cuerpo de héroe y pie de héroe proporcionadas por Bulma.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet'
href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
<style>
.hero{
margin-top: 25px;
}
.hero-body{
justify-content: center;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b>Bulma Fullheight Hero 3 parts</b>
<div class="container">
<section class="hero is-link is-fullheight">
<!-- Hero head: At the top -->
<div class="hero-head">
<b class="is-size-4">Hero Head</b>
</div>
<!-- Hero content: In the middle -->
<div class="hero-body">
<b class="is-size-3">Hero Body</b>
</div>
<!-- Hero footer: At the bottom -->
<div class="hero-foot">
<b class="is-size-4">Hero Foot</b>
</div>
</section>
</div>
</body>
</html>
Producción:
Bulma Fullheight heroe en 3 partes
Referencia: https://bulma.io/documentation/layout/hero/#fullheight-hero-in-3-parts