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:
Referencia: https://bulma.io/documentation/layout/hero/#sizes