Bulma es un marco CSS de código abierto basado en flexbox que se puede usar para acelerar el desarrollo web, ya que viene con componentes y elementos prediseñados.
En este artículo, estaremos viendo Bulma Mobile Level .
Un nivel en Bulma es un nivel horizontal polivalente que puede contener cualquier elemento en su interior. Todos los elementos dentro del nivel están centrados verticalmente. En los dispositivos móviles, para una mejor legibilidad, los elementos dentro del nivel son verticales en los dispositivos móviles, pero este comportamiento se puede cambiar usando el modificador is-mobile proporcionado por Bulma.
Clases Bulma Móvil Nivel:
- is-mobile: esta clase se usa en el elemento de nivel para hacerlo horizontal en dispositivos móviles.
Sintaxis:
<nav class="level is-mobile">
...
</nav>
Ejemplo: El siguiente ejemplo muestra el elemento de nivel con y sin el modificador is-mobile .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Mobile Level</title>
<link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
<style>
.container>p {
margin-top: 25px;
margin-bottom: 10px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">GeeksforGeeks</h1>
<b>Bulma Mobile Level</b>
<div class="container is-fluid">
<p><b>Level with <i>is-mobile</i> modifier.</b></p>
<nav class="level is-mobile">
<div class="level-item">
<div class="notification is-primary">
Item 1
</div>
</div>
<div class="level-item has-text-centered">
<div class="notification is-primary">
Item 2
</div>
</div>
<div class="level-item has-text-centered">
<div class="notification is-primary">
Item 3
</div>
</div>
</nav>
<p><b>Level without <i>is-mobile</i> modifier.</b></p>
<nav class="level">
<div class="level-item">
<div class="notification is-primary">
Item 1
</div>
</div>
<div class="level-item has-text-centered">
<div class="notification is-primary">
Item 2
</div>
</div>
<div class="level-item has-text-centered">
<div class="notification is-primary">
Item 3
</div>
</div>
</nav>
</div>
</body>
</html>
Producción:
Nivel Móvil Bulma
Referencia: https://bulma.io/documentation/layout/level/#mobile-level