Bulma es un marco de CSS gratuito y de código abierto para crear sitios web receptivos. Se basa en el Flexbox. En este artículo, discutiremos los ayudantes de tipografía. Los ayudantes de tipografía nos ayudan a cambiar las propiedades, como cambiar el tamaño, el peso, la alineación, la familia de fuentes, etc. A continuación se muestran algunas propiedades de los ayudantes de tipografía que podemos usar.
Ayudantes de tipografía:
- Tamaño: Podemos cambiar el tamaño del texto. Ej: es-talla-1
- Tamaño de respuesta: podemos especificar el tamaño de cada ventana gráfica. Ej: es-tamaño-1-móvil
- Alineación: Podemos alinear el texto. Ej: tiene-texto-centrado
- Alineación receptiva: podemos alinear el texto para diferentes ventanas gráficas. Ej: tiene-texto-izquierda-móvil
- Transformación de texto: Podemos transformar cualquier texto. Ej: está en mayúscula
- Peso del texto: Podemos cambiar el peso del texto. Ej: tiene-texto-peso-ligero
- Familia tipográfica : Podemos cambiar la familia tipográfica de cualquier texto. Ej: es-familia-sans-serif
Sintaxis:
<element class="Typography-Helpers-Class"> ... </element>
Los siguientes ejemplos ilustran los ayudantes de tipografía de Bulma:
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Typography</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <h1 class="is-size-2 has-text-success"> GeeksforGeeks </h1> <strong>Bulma Typography</strong> <hr><br> <div> <strong class="is-size-5">Size:</strong> <p class="is-size-2">Geeksforgeeks 2</p> <p class="is-size-3">Geeksforgeeks 3</p> <p class="is-size-4">Geeksforgeeks 4</p> <p>Geeksforgeeks 0</p> </div> <hr> <div> <strong class="is-size-5">Alignment</strong> <p class="has-text-centered">Geeksforgeeks 1</p> <p class="has-text-justified">Geeksforgeeks 2</p> <p class="has-text-left">Geeksforgeeks 3</p> <p class="has-text-right">Geeksforgeeks 4</p> </div> <hr> <div> <strong class="is-size-5">Transform</strong> <p class="is-capitalized">Geeksforgeeks 1</p> <p class="is-lowercase">Geeksforgeeks 2</p> <p class="is-uppercase">Geeksforgeeks 3</p> <p class="is-underlined">Geeksforgeeks 4</p> </div> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Typography</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1> <strong>Bulma Typography</strong> <hr> <div> <strong class="is-size-5">Font family</strong> <p class="is-family-sans-serif">Geeksforgeeks 1</p> <p class="is-family-monospace">Geeksforgeeks 2</p> </div> <div> <strong class="is-size-5">Font weight</strong> <p class="has-text-weight-light">Geeksforgeeks 1</p> <p class="has-text-weight-normal">Geeksforgeeks 2</p> <p class="has-text-weight-medium">Geeksforgeeks 3</p> <p class="has-text-weight-bold">Geeksforgeeks 4</p> </div> </body> </html>
Producción:
Referencia : https://bulma.io/documentation/helpers/typography-helpers/
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