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