Bulma es un marco CSS gratuito y de código abierto basado en Flexbox. Es rico en componentes, compatible y está bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño.
lista de clases auxiliares de espaciado que se pueden utilizar para modificar el tamaño y el color del texto para uno o varios anchos de ventana gráfica, lo que a su vez ayuda a alinear y organizar el contenido de las páginas web. Para agregar espaciado en forma de márgenes y relleno (desde la parte superior, izquierda, inferior, derecha u horizontal/verticalmente), Bulma proporciona 112 clases auxiliares de espaciado. Se pueden agregar márgenes usando m clases como m-4, my-3, mx-6, mt-3, mb-1, mr-2, ml-4, m-auto y Padding se puede agregar usando p-4, py -3, px-6, pt-3, pb-1, pr-2, pl-4 y p-auto. Los valores de las clases pueden incluir de 0 a 6, como mt-3, mb-6 o p-5, pr-1, etc.
Bulma Lista de clases de ayudantes de espaciado:
- m-*: esta clase se usa para agregar margen desde los cuatro lados.
- mt-*: esta clase se usa para agregar margen desde la parte superior.
- ml-*: Esta clase se usa para agregar un margen desde la izquierda.
- mb-*: esta clase se usa para agregar margen desde la parte inferior.
- mr-*: Esta clase se usa para agregar margen desde la derecha.
- mx-*: esta clase se usa para agregar margen tanto desde la izquierda como desde la derecha
- my-*: esta clase se usa para agregar un margen desde arriba y desde abajo.
- p-*: esta clase se usa para agregar relleno desde los cuatro lados.
- pr-*: esta clase se usa para agregar relleno desde la derecha.
- pb-*: esta clase se usa para agregar relleno desde la parte inferior.
- pl-*: esta clase se usa para agregar relleno desde la izquierda.
- pt-*: esta clase se usa para agregar relleno desde la parte superior.
- px-*: esta clase se usa para agregar un margen tanto desde la izquierda como desde la derecha.
- py-*: esta clase se usa para agregar un margen desde arriba y desde abajo.
Sintaxis:
<p class="Spacing-helpers-Classes"> ... </p>
Ejemplo 1: El siguiente ejemplo ilustra la lista de ayudantes de espaciado en una Bulma.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bulma Spacing Helpers Class</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> </head> <body> <div class="content container has-text-centered"> <h1 class="title has-text-success"> GeeksforGeeks </h1> <h1 class="subtitle"> Bulma Spacing Helpers class </h1> <!-- Margin helpers --> <div class="container"> <div class="container has-background-success"> <button class="button is-danger m-4">m-4</button> </div> <div class="container has-background-success"> <button class="button is-dark mt-4">mt-4</button> </div> <div class="container has-background-success"> <button class="button is-light ml-4">ml-4</button> </div> <div class="container has-background-success"> <button class="button is-dark mx-3">mx-3</button> </div> <div class="container has-background-success"> <button class="button is-warning my-5">my-5</button> </div> </div> <br /> <!-- Padding helpers --> <div class="container"> <div class="container has-background-success"> <button class="button is-danger p-4">p-4</button> </div> <div class="container has-background-success"> <button class="button is-dark pt-4">pt-4</button> </div> <div class="container has-background-success"> <button class="button is-light pl-6">pl-6</button> </div> <div class="container has-background-success"> <button class="button is-dark px-3">px-3</button> </div> <div class="container has-background-success"> <button class="button is-warning py-5">py-5</button> </div> </div> </div> </body> </html>
Producción:
Bulma Lista de todos los ayudantes de espaciado
Ejemplo 2: Este ejemplo ilustra la lista de asistentes de espaciado en una etiqueta <img> y una etiqueta <span>.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bulma Spacing Helpers List</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> </head> <body> <div class="content container has-text-centered"> <h1 class="title has-text-success"> GeeksforGeeks </h1> <h1 class="subtitle"> Bulma Spacing Helpers List </h1> <!-- Margin helpers --> <div class="container has-background-success"> <div class="container is-4by3"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220228115106/gfg.png" alt="GFG_logo" class="m-5" /> </div> <div class="container is-4by3"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220228115106/gfg.png" alt="GFG_logo" class="mt-6" /> </div> <div class="container is-4by3"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220228115106/gfg.png" alt="GFG_logo" class="ml-4" /> </div> <div class="container is-4by3"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220228115106/gfg.png" alt="GFG_logo" class="mx-4" /> </div> <div class="container"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220228115106/gfg.png" alt="GFG_logo" class="my-5" /> </div> </div> <br /> <!-- Padding helpers --> <div class="container"> <span class="tag is-primary is-dark px-1"> PX-1 </span> <span class="tag is-primary is-dark pt-4"> PT-4 </span> <span class="tag is-primary is-dark pl-6"> PL-6 </span> <span class="tag is-primary is-dark px-3"> PX-3 </span> <span class="tag is-primary is-dark py-5"> PY-5 </span> </div> </div> </body> </html>
Producción:
Bulma Lista de todos los ayudantes de espaciado
Referencia: https://bulma.io/documentation/helpers/spacing-helpers/#list-of-all-spacing-helpers
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA