Visibilidad de Bulma

Bulma es un framework CSS 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.

La visibilidad es una de las clases de ayuda en Bulma que puede mostrar u ocultar el contenido según la ventana gráfica. Hay tantas clases que podemos usar para mostrar u ocultar cualquier contenido.

Mostrar el contenido: Las siguientes clases se utilizan para mostrar el contenido.

  • es-bloque
  • es-flex
  • está en línea
  • es-en línea-bloque

Clases auxiliares is-flex:

  • is-flex-mobile : Flex se aplicará solo a móviles con un ancho inferior a 748 px.
  • is-flex-tablet-only : Flex se aplicará a la tableta entre 769px y 1023px
  • is-flex-desktop-only : Flex se aplicará al escritorio entre 1024px y 1215px

Ejemplo: El siguiente código demuestra la clase is-flex-mobile . Los desarrolladores pueden usar otras clases según la necesidad.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Visibility</title>
    <link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
</head>
  
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h1>
    <strong>Bulma Visibility</strong>
    <br> <br>
      
    <div class="is-flex-mobile">
        <p class="is-block">GeeksforGeeks text1 </p>
           
        <p class="is-block"> GeeksforGeeks text2</p>
    </div>
</body>
  
</html>

Producción:

  • Cuando el tamaño de la pantalla es inferior a 748 px.
  • Cuando el tamaño de la pantalla es superior a 748 px.

Ocultar clases de contenido: podemos usar las siguientes clases para ocultar el contenido de acuerdo con la ventana gráfica.

  • is-hidden-mobile : Ocultará el contenido en móviles con un ancho inferior a 748 px.
  • is-hidden-tablet-only : Ocultará el contenido en la tableta entre 769px y 1023px.
  • is-hidden-desktop-only : Ocultará el contenido en el escritorio entre 1024px y 1215px.
  • is-hidden-widescreen-only : Ocultará el contenido en pantalla ancha entre 1216px y 1407px.

Ejemplo: El siguiente código demuestra la clase is-hidden-mobile . Los desarrolladores pueden usar otras clases según la necesidad.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Visibility</title>
    <link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
</head>
  
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h1>
    <strong>Bulma Visibility</strong>
    <br> <br>
      
    <div class="is-hidden-mobile">
        <p class="is-block">GeeksforGeeks1</p>
           
        <p class="is-block">GeeksforGeeks2</p>
    </div>
</body>
  
</html>

Producción:

  • Cuando el tamaño de la pantalla es inferior a 748 px (tamaño móvil), el contenido se ocultará.

  • Cuando el tamaño de la pantalla es superior a 748 px, el contenido se mostrará a los usuarios.

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *