Bulma Content Listas Ordenadas Alternativas

La alternativa de lista ordenada de contenido de Bulma se utiliza para especificar el tipo de orden para mostrar. Funciona como un atributo de tipo HTML ol .

Esto define qué tipo (1, A, a, I e i) del orden que desea en su lista de números numéricos, alfabéticos o romanos.

Contenido de Bulma Clase alternativa de lista ordenada:

is-lower-alpha: Define los elementos de la lista en minúsculas ordenadas alfabéticamente. (a B C,…)
is-lower-roman: Define los elementos de la lista en orden de números romanos en minúsculas. (yo, ii, iii,…)
is-upper-alpha: Define los elementos de la lista en letras mayúsculas ordenadas alfabéticamente. (A B C,…)
is-upper-roman: Define los elementos de la lista en orden de números romanos en mayúsculas. (Yo, II, III,…)

Sintaxis:

<ol class="Content Ordered list alternative Class">
    <li></li>
    <li></li>
    ....
    <li></li>
</ol>

Nota: La lista de pedidos predeterminada es una lista de pedidos numéricos.

Ejemplo: En este ejemplo, veremos todas las alternativas en una lista ordenada como minúsculas, mayúsculas, romanas y alfabéticas.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
</head>
  
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success" >
        GeeksforGeeks
    </h1>
    <b>Bulma Content Ordered list alternative</b>
        <div class="container">
            <div class="columns has-text-left ml-6">
                <div class="column content"> 
                    <ol class="is-lower-alpha">
                          <li>HTML</li>
                          <li>CSS</li>
                          <li>JS</li>
                        </ol>
                </div>
                <div class="column content"> 
                    <ol class="is-lower-roman">
                          <li>HTML</li>
                          <li>CSS</li>
                          <li>JS</li>
                        </ol>
                </div>
                <div class="column content"> 
                    <ol class="is-upper-alpha">
                          <li>HTML</li>
                          <li>CSS</li>
                          <li>JS</li>
                        </ol>
                </div>
                <div class="column content"> 
                    <ol class="is-upper-roman">
                          <li>HTML</li>
                          <li>CSS</li>
                          <li>JS</li>
                        </ol>
                </div>
            </div>
        </div>
</body>
</html>

Producción:

Bulma Content Ordered lists alternatives

Referencia: https://bulma.io/documentation/elements/content/#ordered-lists-alternatives

Publicación traducida automáticamente

Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta