Alineación receptiva de Bulma

Bulma Responsive Alignment se utiliza para hacer que su sitio web sea receptivo. Puede elegir una alineación específica para cada ancho de ventana gráfica. Simplemente agregue el ancho de la ventana gráfica al modificador de alineación.

Clases de alineación receptiva:

  • has-text-left-mobile: esta clase se usa para hacer la alineación si el ancho de la pantalla es de hasta 768px.
  • has-text-left-touch: esta clase se utiliza para realizar la alineación si el ancho de la pantalla está entre 768 px y 1023 px.
  • has-text-left-tablet-only: esta clase se usa para realizar la alineación si el ancho de la pantalla está entre 769 px y 1023 px.
  • has-text-left-tablet: esta clase se usa para realizar la alineación si el ancho de la pantalla está entre 769 px y 1408 px o más.
  • has-text-left-desktop-only: esta clase se usa para realizar la alineación si el ancho de la pantalla está entre 1024 px y 1215 px o más.
  • has-text-left-desktop: esta clase se usa para realizar la alineación si el ancho de la pantalla está entre 1024 px y 1408 px o más.
  • has-text-left-widescreen-only: esta clase se usa para realizar la alineación si el ancho de la pantalla está entre 1216 px y 1407 px o más.
  • has-text-left-widescreen: esta clase se usa para realizar la alineación si el ancho de la pantalla está entre 1216 px y 1408 px o más.
  • has-text-left-fullhd: esta clase se usa para realizar la alineación si el ancho de la pantalla es de 1408 px o más.

Nota: Puede usar la misma lógica para cada una de las 4 alineaciones, debe cambiar el valor del lado de la izquierda y eso puede ser cualquier cosa a la izquierda, a la derecha, justificado y centrado.

Ejemplo: El siguiente ejemplo ilustra la clase de Alineación receptiva en Bulma

HTML

<!DOCTYPE html>
<html>
<head>    
    <link rel='stylesheet'
          href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css'>
</head>
  
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h1>
    <b>Bulma Responsive Alignment</b>
    <br>
    <div class="container">
        <p class="has-text-left-mobile is-size-4">
           GeeksforGeeks</p>
  
        <p class="has-text-left-touch is-size-4">
           GeeksforGeeks</p>
  
        <p class="has-text-left-tablet-only is-size-4">
           GeeksforGeeks</p>
  
        <p class="has-text-left-tablet is-size-4">
           GeeksforGeeks</p>
  
        <p class="has-text-left-desktop-only is-size-4">
           GeeksforGeeks</p>
  
        <p class="has-text-left-desktop is-size-4">
           GeeksforGeeks</p>
  
        <p class="has-text-left-widescreen-only is-size-4">
           GeeksforGeeks</p>
  
        <p class="has-text-left-widescreen is-size-4">
          GeeksforGeeks</p>
  
        <p class="has-text-left-fullhd is-size-4">
          GeeksforGeeks</p>
    </div>
</body>
</html>

Producción:

Referencia: https://bulma.io/documentation/helpers/typography-helpers/#responsive-alignment

Publicación traducida automáticamente

Artículo escrito por skyridetim 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 *