Bulma es un marco CSS gratuito y de código abierto desarrollado por Jeremy Thomas. Este marco se basa en la propiedad CSS Flexbox. Es altamente receptivo, minimizando el uso de consultas de medios para un comportamiento receptivo. Utiliza clases para crear hermosos diseños.
El nivel centrado de Bulma se usa para nivelar los elementos en el centro. Para centrar el nivel, usamos una clase centrada en el texto . En este artículo, discutiremos el nivel centrado en Bulma.
Clases de nivel centrado en Bulma:
- nivel: Un nivel horizontal multipropósito. Esta clase se utiliza para crear el nivel.
- level-item: esta clase se utiliza para crear el elemento de nivel.
- has-text-centered: Esta clase se utiliza para centrar el nivel.
Sintaxis:
<nav class="level">
<div class="level-item has-text-centered">
....
</div>
....
</nav>
Ejemplo 1: el siguiente código demuestra el nivel centrado en Bulma en la pantalla grande .
HTML
<!DOCTYPE html> <html> <head> <title> Bulma Centered Level </title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <div class="has-text-centered"> <h1 class="title has-text-success"> GeeksforGeeks </h1> <h3 class="subtitle"> Bulma Centered Level </h3> </div> <br> <br> <nav class="level"> <div class="level-item "> <div> <button class='button is-success'> GeeksforGeeks 1 </button> </div> </div> <div class="level-item "> <div> <button class='button is-success'> GeeksforGeeks 2 </button> </div> </div> <div class="level-item "> <div> <button class='button is-success'> GeeksforGeeks 3 </button> </div> </div> <div class="level-item "> <div> <button class='button is-success'> GeeksforGeeks 4 </button> </div> </div> </nav> </body> </html>
Producción:
Nivel centrado en Bulma en la pantalla grande
Ejemplo 2: el siguiente código demuestra el nivel centrado en Bulma en la pantalla pequeña .
HTML
<!DOCTYPE html> <html> <head> <title> Bulma Centered Level </title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <div class="has-text-centered"> <h1 class="title has-text-success"> GeeksforGeeks </h1> <h3 class="subtitle"> Bulma Centered Level </h3> </div> <br> <br> <nav class="level"> <div class="level-item "> <div> <button class='button is-warning'> GFG 1 </button> </div> </div> <div class="level-item "> <div> <button class='button is-warning'> GFG 2 </button> </div> </div> <div class="level-item "> <div> <button class='button is-warning'> GFG 3 </button> </div> </div> <div class="level-item "> <div> <button class='button is-warning'> GFG 4 </button> </div> </div> <div class="level-item "> <div> <button class='button is-warning'> GFG 5 </button> </div> </div> <div class="level-item "> <div> <button class='button is-warning'> GFG 6 </button> </div> </div> </nav> </body> </html>
Producción:
Bulma Centered Level en la pantalla chica.
Referencia: https://bulma.io/documentation/layout/level/#centered-level
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA