Contenedores de interfaz de usuario de Blaze

Posted on by Rudeus Greyrat

Blaze UI es un conjunto de herramientas de interfaz de usuario gratuito y de código abierto para crear un excelente sitio web. Le proporciona varias características como capacidad de respuesta, componentes personalizados, etc. Hay varios tamaños de contenedores disponibles en el marco de Blaze UI que los usuarios pueden usar en sus aplicaciones web para organizar los párrafos o artículos, etc. Los contenedores proporcionan la consulta de medios restricciones de ancho de pantalla en nuestro contenido.

En este artículo, aprenderemos sobre los contenedores en la interfaz de usuario de Blaze. 

Clases de contenedor de interfaz de usuario de Blaze:

  • o-container: Esta clase se utiliza para crear un contenedor.
  • o-container–xsmall: esta clase se usa para crear un contenedor extra pequeño.
  • o-container–small: Esta clase se usa para crear un contenedor de tamaño pequeño.
  • o-container–medium: esta clase se utiliza para crear un contenedor de tamaño mediano.
  • o-container–large: Esta clase se utiliza para crear un contenedor de gran tamaño.
  • o-container–xlarge: esta clase se utiliza para crear un contenedor de tamaño extragrande.
  • o-container–super: esta clase se usa para crear un contenedor de gran tamaño.

Tamaños de contenedores de la interfaz de usuario de Blaze :  a continuación se muestran los tamaños de los contenedores que usa el marco de la interfaz de usuario de Blaze para crear un contenedor. Los tamaños dados son los anchos de los contenedores.

  • $ancho-de-pantalla-xpequeño:  20em
  • $ancho de pantalla pequeño:   30em
  • $ancho de pantalla medio:  48em
  • $ancho de pantalla grande:   64em
  • $ancho de pantalla extra grande:   78em
  • $ancho de pantalla-super:   116em

Sintaxis:

<div class="o-container o-container--xsmall">
    ...
</div>

Ejemplo 1: el siguiente ejemplo muestra todos los tamaños de contenedores en la interfaz de usuario de Blaze.

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" />
    <link rel="stylesheet"
          href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" />
</head>
 
<body>
    <h1 style="text-align:center; color:green;">
        GeeksforGeeks
    </h1>
 
    <h2 style="text-align: center;">
        Containers in Blaze UI
    </h2>
     
    <div class="o-container o-container--xsmall">
        <h3>x-small Container</h3>
         
<p>
            GeeksforGeeks is a portal for geeks.
            It is a place where you can learn,
            share and get help from other geeks.
            Find various things on the portal
            like Jobs, Hackathons, Programming
            Competitions, Coding Questions, etc.
        </p>
 
    </div>
    <div class="o-container o-container--small">
        <h3>small Container</h3>
         
<p>
            GeeksforGeeks is a portal for geeks.
            It is a place where you can learn,
            share and get help from other geeks.
            Find various things on the portal
            like Jobs, Hackathons, Programming
            Competitions, Coding Questions, etc.
        </p>
 
    </div>
    <div class="o-container o-container--medium">
        <h3>medium Container</h3>
         
<p>
            GeeksforGeeks is a portal for geeks.
            It is a place where you can learn,
            share and get help from other geeks.
            Find various things on the portal
            like Jobs, Hackathons, Programming
            Competitions, Coding Questions, etc.
        </p>
 
    </div>
    <div class="o-container o-container--large">
        <h3>large Container</h3>
         
<p>
            GeeksforGeeks is a portal for geeks.
            It is a place where you can learn,
            share and get help from other geeks.
            Find various things on the portal
            like Jobs, Hackathons, Programming
            Competitions, Coding Questions, etc.
        </p>
 
    </div>
    <div class="o-container o-container--xlarge">
        <h3>x-large Container</h3>
         
<p>
            GeeksforGeeks is a portal for geeks.
            It is a place where you can learn,
            share and get help from other geeks.
            Find various things on the portal
            like Jobs, Hackathons, Programming
            Competitions, Coding Questions, etc.
        </p>
 
    </div>
    <div class="o-container o-container--super">
        <h3>super Container</h3>
         
<p>
            GeeksforGeeks is a portal for geeks.
            It is a place where you can learn,
            share and get help from other geeks.
            Find various things on the portal
            like Jobs, Hackathons, Programming
            Competitions, Coding Questions, etc.
        </p>
 
    </div>
</body>
 
</html>

Producción:

 

Ejemplo 2: el siguiente ejemplo muestra el botón en la interfaz de usuario de Blaze.

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" />
    <link rel="stylesheet"
          href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" />
</head>
 
<body>
    <h1 style="text-align:center; color:green;">
        GeeksforGeeks
    </h1>
 
    <h2 style="text-align:center;">
        Containers in Blaze UI
    </h2>
     
    <div class="o-container o-container--xsmall"
        style="background-color:blanchedalmond;">
        <h3>x-small Container</h3>
         
<p>
            GeeksforGeeks is a portal for geeks.
            It is a place where you can learn,
            share and get help from other geeks.
            Find various things on the portal
            like Jobs, Hackathons, Programming
            Competitions, Coding Questions, etc.
        </p>
 
    </div>
 
    <div class="o-container o-container--small"
        style="background-color:yellowgreen ;">
        <h3>small Container</h3>
         
<p>
            GeeksforGeeks is a portal for geeks.
            It is a place where you can learn,
            share and get help from other geeks.
            Find various things on the portal
            like Jobs, Hackathons, Programming
            Competitions, Coding Questions, etc.
        </p>
 
    </div>
 
    <div class="o-container o-container--medium"
        style="background-color:steelblue;">
        <h3>medium Container</h3>
         
<p>
            GeeksforGeeks is a portal for geeks.
            It is a place where you can learn,
            share and get help from other geeks.
            Find various things on the portal
            like Jobs, Hackathons, Programming
            Competitions, Coding Questions, etc.
        </p>
 
    </div>
 
    <div class="o-container o-container--large"
        style="background-color:indianred;">
        <h3>large Container</h3>
         
<p>
            GeeksforGeeks is a portal for geeks.
            It is a place where you can learn,
            share and get help from other geeks.
            Find various things on the portal
            like Jobs, Hackathons, Programming
            Competitions, Coding Questions, etc.
        </p>
 
    </div>
    <div class="o-container o-container--xlarge"
        style="background-color:aqua;">
        <h3>x-large Container</h3>
         
<p>
            GeeksforGeeks is a portal for geeks.
            It is a place where you can learn,
            share and get help from other geeks.
            Find various things on the portal
            like Jobs, Hackathons, Programming
            Competitions, Coding Questions, etc.
        </p>
 
    </div>
    <div class="o-container o-container--super"
        style="background-color:palegreen;">
        <h3>super Container</h3>
         
<p>
            GeeksforGeeks is a portal for geeks.
            It is a place where you can learn,
            share and get help from other geeks.
            Find various things on the portal
            like Jobs, Hackathons, Programming
            Competitions, Coding Questions, etc.
        </p>
 
    </div>
</body>
 
</html>

Producción:

 

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

Publicación traducida automáticamente

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