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. En este artículo, veremos cómo anidar dos o más contenedores en la interfaz de usuario de Blaze. Anidar significa agregar un contenedor dentro de otro contenedor. Los contenedores proporcionan las restricciones de ancho de pantalla de consulta de medios en nuestro contenido.
Requisito previo: Contenedores de interfaz de usuario de Blaze
Clases de anidamiento de contenedores de Blaze UI: para anidar contenedores, no se usa una clase específica para los contenedores, sino que agregamos una clase de contenedor dentro de otra clase de contenedor usando clases de contenedor . Hay diferentes clases y tamaños de contenedores que también se analizan a continuación:
- 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.
Clases de tamaños de contenedores:
- $screen-width-xsmall: Da 20em
- $screen-width-small : Da 30em
- $screen-width-medium : Da 48em
- $screen-width-large : Da 64em
- $screen-width-xlarge : Da 78em
- $screen-width-super: Da 116em
Sintaxis:
<div class="o-container o-container--xlarge">
<div class="o-container o-container--medium">
...
</div>
</div>
Ejemplo 1: El siguiente ejemplo demuestra el anidamiento de dos contenedores.
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>Blaze UI</title> <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"> Blaze UI Containers Nesting </h2> <div class="o-container o-container--xlarge" style="background-color: green; padding: 20px;"> <div class="o-container o-container--medium" style="background-color: lightgreen; padding: 10px;"> <h3>GeeksforGeeks</h3> <p> It 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> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra el anidamiento de tres contenedores.
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>Blaze UI</title> <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"> Blaze UI Containers Nesting</h2> <div class="o-container o-container--super" style="background-color: red; padding: 30px;"> <div class="o-container o-container--xlarge" style="background-color: green; padding: 20px;"> <div class="o-container o-container--medium" style="background-color: lightgreen; padding: 10px;"> <h3>GeeksforGeeks Premium</h3> <p> GeeksforGeeks Premium is a premium portal for geeks where they get ad free articles, free access to job portal, doubt assistance. </p> </div> </div> </div> </body> </html>
Producción:
Referencia: 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