En este artículo, veremos la cuadrícula básica de contenedores en la interfaz de usuario de Blaze. 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 funciones como capacidad de respuesta, componentes personalizados, etc. Una cuadrícula es una forma muy popular de crear un diseño receptivo y es muy fácil de usar y flexible. Para crear una cuadrícula básica de contenedores, se utilizan dos clases en la interfaz de usuario de Blaze, que se analizan a continuación.
Clases de cuadrícula básica de Blaze UI Containers:
- .o-grid: esta clase se utiliza para crear una cuadrícula en la interfaz de usuario de Blaze.
- .o-grid__cell: esta clase se usa para crear una celda de cuadrícula en la interfaz de usuario de Blaze.
Sintaxis:
<div class="o-container o-container--medium
o-grid o-grid--demo">
<div class="o-grid__cell">
<div class="o-grid-text">....</div>
</div>
<div class="o-grid__cell">
<div class="o-grid-text">....</div>
</div>
<div class="o-grid__cell">
<div class="o-grid-text">....</div>
</div>
</div>
Ejemplo 1: El siguiente ejemplo demuestra la cuadrícula básica en un contenedor.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Blaze UI</title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body> <div class="u-centered"> <h1 style="color: green">GeeksforGeeks</h1> <h2>Container Basic Grid in Blaze UI</h2> </div> <div class="o-container o-container--xlarge o-grid o-grid--demo"> <div class="o-grid__cell" style="background-color: aqua;"> <div class="o-grid-text">Courses</div> </div> <div class="o-grid__cell" style="background-color: yellow;"> <div class="o-grid-text">Jobs</div> </div> <div class="o-grid__cell" style="background-color: tomato;"> <div class="o-grid-text"> Coding Competitions </div> </div> </div> </body> </html>
Producción:
Cuadrícula básica de Blaze UI Containers
Ejemplo 2: El siguiente ejemplo demuestra la cuadrícula básica en un contenedor usando componentes de entrada y botón.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Blaze UI</title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body> <div class="u-centered"> <h1 style="color: green">GeeksforGeeks</h1> <h2>Container Basic Grid in Blaze UI</h2> </div> <div class="o-container o-container--xlarge o-grid o-grid--demo"> <div class="o-grid__cell" style= "background-color: tomato; padding: 10px;"> <h2 class="o-grid-text">Email</h2> <input class="c-field" placeholder= "Enter your Email" type="text" /> </div> <div class="o-grid__cell" style= "background-color: lightgreen; padding: 10px;"> <h2 class="o-grid-text">Password</h2> <input class="c-field" placeholder= "Enter your password" type="password" /> </div> <div class="o-grid__cell o-grid--bottom" style="background-color: lightcyan; padding: 10px;"> <h2 class="o-grid-text">Sign Up</h2> <button type="button" class="c-button c-button--rounded c-button--ghost c-button--success"> Sign Up </button> </div> </div> </body> </html>
Producción:
Cuadrícula básica de Blaze UI Containers
Referencia: https://www.blazeui.com/objects/grid
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA