Bulma es un marco CSS gratuito y de código abierto basado en flexbox que permite a los desarrolladores web crear sitios web hermosos y receptivos para todos los tamaños de pantalla. En este artículo, veremos los diferentes tamaños del componente Hero proporcionado por Bulma . El componente Hero está disponible en 5 tamaños diferentes: pequeño , mediano , grande , de media altura y de altura completa.
Clases de tamaño de Bulma Hero:
- is-small: esta clase se usa para establecer el tamaño del componente héroe en pequeño.
- is-medium: esta clase se utiliza para establecer el tamaño del componente héroe en medio.
- is-large: esta clase se usa para establecer el tamaño del componente héroe en grande.
- is-halfheight: esta clase se usa para establecer el tamaño del componente héroe en la mitad de la altura.
- is-fullheight: esta clase se utiliza para establecer el tamaño del componente héroe en altura completa.
Sintaxis:
<section class="hero Size-class">
...
</section>
Ejemplo: El siguiente ejemplo ilustra el uso de las clases de tamaño de Bulma Hero para establecer el tamaño del componente de héroe.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet'
href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
<style>
.container>.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 class="is-size-4">Bulma Hero Sizes</b>
<div class="container">
<section class="hero is-small is-link">
<div class="hero-body">
<p class="title">
GeeksforGeeks
</p>
<p class="subtitle">
Small Hero
</p>
</div>
</section>
<section class="hero is-medium is-link">
<div class="hero-body">
<p class="title">
GeeksforGeeks
</p>
<p class="subtitle">
Medium Hero
</p>
</div>
</section>
<section class="hero is-large is-link">
<div class="hero-body">
<p class="title">
GeeksforGeeks
</p>
<p class="subtitle">
Large Hero
</p>
</div>
</section>
<section class="hero is-halfheight is-link">
<div class="hero-body">
<div>
<p class="title">
GeeksforGeeks
</p>
<p class="subtitle">
Half-height Hero
</p>
</div>
</div>
</section>
<section class="hero is-fullheight is-link">
<div class="hero-body">
<div>
<p class="title">
GeeksforGeeks
</p>
<p class="subtitle">
Full-Height Hero
</p>
</div>
</div>
</section>
</div>
</body>
</html>
Producción:
Bulma Héroe Tamaños
Referencia: https://bulma.io/documentation/layout/hero/#sizes