Sistema de tamaño de 12 columnas Bulma

Posted on by Rudeus Greyrat

Bulma es un marco CSS de código abierto que proporciona componentes prediseñados que se pueden combinar para crear sitios web y aplicaciones web receptivos. En este artículo, veremos el sistema de 12 columnas proporcionado por Bulma.

Bulma nos proporciona un sistema de grilla receptivo en el que un contenedor se divide en 12 columnas y podemos cambiar el tamaño de nuestro contenido de acuerdo con las clases CSS proporcionadas por Bulma.

Clases del Sistema Bulma 12 Columnas:

  • is-1: esta clase se usa para hacer que un elemento ocupe el ancho de 1 columna de 12 columnas.
  • is-2: esta clase se usa para hacer que un elemento ocupe el ancho de 2 columnas de 12 columnas.
  • is-3: esta clase se usa para hacer que un elemento ocupe el ancho de 3 columnas de 12 columnas.
  • is-4: esta clase se usa para hacer que un elemento ocupe el ancho de 4 columnas de 12 columnas.
  • is-5: esta clase se usa para hacer que un elemento ocupe el ancho de 5 columnas de 12 columnas.
  • is-6: esta clase se usa para hacer que un elemento ocupe el ancho de 6 columnas de 12 columnas.
  • is-7: esta clase se usa para hacer que un elemento ocupe el ancho de 7 columnas de 12 columnas.
  • is-8: esta clase se usa para hacer que un elemento ocupe el ancho de 8 columnas de 12 columnas.
  • is-9: esta clase se usa para hacer que un elemento ocupe el ancho de 9 columnas de 12 columnas.
  • is-10: esta clase se usa para hacer que un elemento ocupe el ancho de 10 columnas de 12 columnas.
  • is-11: esta clase se usa para hacer que un elemento ocupe el ancho de 11 columnas de 12 columnas.
  • is-12: esta clase se usa para hacer que un elemento ocupe el ancho de 12 columnas de 12 columnas.

Sintaxis:

<div class="columns">
    <div class="column is-2">...</div>
    ...
</div>

Ejemplo: El siguiente ejemplo ilustra el uso de las clases del sistema de 12 columnas proporcionadas con Bulma.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma 12 Column System</title>
    <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 class="is-size-4">
        Bulma 12 Column System
    </b>
  
    <div class="container">
          
        <!-- is-12 -->
        <div class="columns">
            <div class="column is-12">
                <div class="notification is-link">
                    <code>is-12</code>
                </div>
            </div>
        </div>
  
        <!-- is-11 -->
        <div class="columns">
            <div class="column is-11">
                <div class="notification is-link">
                    <code>is-11</code>
                </div>
            </div>
  
            <div class="column">
                <div class="notification is-link">
                    1
                </div>
            </div>
        </div>
  
        <!-- is-10 -->
        <div class="columns">
            <div class="column is-10">
                <div class="notification is-link">
                    <code>is-10</code>
                </div>
            </div>
  
            <div class="column">
                <div class="notification is-link">
                    2
                </div>
            </div>
        </div>
  
        <!-- is-9 -->
        <div class="columns">
            <div class="column is-9">
                <div class="notification is-link">
                    <code>is-9</code>
                </div>
            </div>
  
            <div class="column">
                <div class="notification is-link">
                    3
                </div>
            </div>
        </div>
  
        <!-- is-8 -->
        <div class="columns">
            <div class="column is-8">
                <div class="notification is-link">
                    <code>is-8</code>
                </div>
            </div>
  
            <div class="column">
                <div class="notification is-link">
                    4
                </div>
            </div>
        </div>
  
        <!-- is-7 -->
        <div class="columns">
            <div class="column is-7">
                <div class="notification is-link">
                    <code>is-7</code>
                </div>
            </div>
  
            <div class="column">
                <div class="notification is-link">
                    5
                </div>
            </div>
        </div>
  
        <!-- is-6 -->
        <div class="columns">
            <div class="column is-6">
                <div class="notification is-link">
                    <code>is-6</code>
                </div>
            </div>
  
            <div class="column">
                <div class="notification is-link">
                    6
                </div>
            </div>
        </div>
  
        <!-- is-5 -->
        <div class="columns">
            <div class="column is-5">
                <div class="notification is-link">
                    <code>is-5</code>
                </div>
            </div>
  
            <div class="column">
                <div class="notification is-link">
                    7
                </div>
            </div>
        </div>
  
        <!-- is-4 -->
        <div class="columns">
            <div class="column is-4">
                <div class="notification is-link">
                    <code>is-4</code>
                </div>
            </div>
  
            <div class="column">
                <div class="notification is-link">
                    8
                </div>
            </div>
        </div>
  
        <!-- is-3 -->
        <div class="columns">
            <div class="column is-3">
                <div class="notification is-link">
                    <code>is-3</code>
                </div>
            </div>
  
            <div class="column">
                <div class="notification is-link">
                    9
                </div>
            </div>
        </div>
  
        <!-- is-2 -->
        <div class="columns">
            <div class="column is-2">
                <div class="notification is-link">
                    <code>is-2</code>
                </div>
            </div>
              
            <div class="column">
                <div class="notification is-link">
                    10
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>

Producción:

Referencia: https://bulma.io/documentation/columns/sizes/#12-columns-system

Publicación traducida automáticamente

Artículo escrito por vpsop 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 *