Anchos de los contenedores de la interfaz de usuario de Blaze

Blaze UI es un marco de código abierto de CSS. Es un conjunto de herramientas de interfaz de usuario liviano y proporciona excelentes herramientas para crear aplicaciones personalizadas y escalables. Puede funcionar con cualquier framework que exista. Puede adaptarse a cualquier ecosistema. Todos los diseños o CSS son móviles primero y, por lo tanto, receptivos. Su proyecto está disponible en código abierto, por lo que una gran comunidad lo mantiene.

Blaze UI Containers proporciona una pantalla multimedia de diferentes anchos para colocar el contenido dentro de ella según los diferentes requisitos. Los contenedores tienen tamaños que van desde pequeños hasta súper grandes.

Clases utilizadas para configurar los anchos de los contenedores de la interfaz de usuario de Blaze:

o-container–xsmall: El tamaño es de 20em.
o-contenedor–pequeño : El tamaño es de 30em.
o-contenedor–medio : El tamaño es 48em
o-contenedor–grande : El tamaño es 64em
o-container–xlarge: El tamaño es 78em
o-container–super: El tamaño es 116em

Sintaxis: defina un contenedor con un tamaño fijo de la siguiente manera:

<div class="o-container o-container--large">
    GeeksforGeeks
</div>

Ejemplo 1: En el siguiente ejemplo, tenemos contenedores con diferentes anchos.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0" />
    <title>GeeksforGeeks | BlazeUI</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"/>
    <script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
    </script>
    <script nomodule="" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
    </script>
</head>
<body>
    <div class="o-container">
        <center>
            <div>
                <h1 style="color: green;">GeeksforGeeks</h1>
            </div>
            <strong>Blaze UI Containers</strong>
            <br />
            <br />
        </center>
        <div style="background-color: lightgreen; 
                    margin-bottom: 2rem;" 
            class="o-container o-container--xsmall">
            Data Structures
        </div>
        <div style="background-color: lightgreen; 
                    margin-bottom: 2rem;" 
            class="o-container o-container--small">
            Algorithms
        </div>
        <div style="background-color: lightgreen; 
                    margin-bottom: 2rem;" 
            class="o-container o-container--medium">
            Machine Learning
        </div>
        <div style="background-color: lightgreen; 
                    margin-bottom: 2rem;" 
            class="o-container o-container--large">
            Competitive Programming
        </div>
        <div style="background-color: lightgreen; 
                    margin-bottom: 2rem;" 
            class="o-container o-container--xlarge">
            Java
        </div>
        <div style="background-color: lightgreen; 
                    margin-bottom: 2rem;" 
            class="o-container o-container--super">
            Python3
        </div>
    </div>
</body>
</html>

Producción:

Ejemplo 2: En el siguiente ejemplo, tenemos diferentes botones para cambiar el tamaño del contenedor.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0"/>
    <title>GeeksforGeeks | BlazeUI</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"/>
    <script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
    </script>
    <script nomodule="" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
    </script>
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
</head>
<body>
    <div class="o-container">
        <center>
            <div>
                <h1 style="color: green;">GeeksforGeeks</h1>
            </div>
            <strong>Blaze UI Containers</strong>
            <br />
            <br />
            <button onclick="changeSize('o-container--xsmall')">
                XSmall
            </button>
            <button onclick="changeSize('o-container--small')">
                Small
            </button>
            <button onclick="changeSize('o-container--medium')">
                Medium
            </button>
            <button onclick="changeSize('o-container--large')">
                Large
            </button>
            <button onclick="changeSize('o-container--xlarge')">
                XLarge
            </button>
            <button onclick="changeSize('o-container--super')">
                Super
            </button>
        </center>
        <div id="container" style="background-color: lightgreen; 
                margin-bottom: 2rem;"
            class="o-container o-container--xsmall">
            Data Structures
        </div>
    </div>
    <script>
        let currentSize = 'o-container--xsmall'
        function changeSize(size) {
            $('#container').toggleClass(currentSize)
            currentSize = size
            $('#container').toggleClass(currentSize)
        }
    </script>
</body>
</html>

Producción:

Referencia: https://www.blazeui.com/objects/containers

Publicación traducida automáticamente

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

HTML

HTML

Deja una respuesta Cancelar la respuesta