Ayudantes de tipografía Bulma

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:

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

Deja una respuesta

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