En este artículo, veremos los anchos de cuadrícula 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 características como capacidad de respuesta, componentes personalizados, etc. La cuadrícula permite a los usuarios crear un diseño flexible con un método sencillo. La cuadrícula se puede crear de cualquier tamaño y también se puede crear de ancho completo.
Clases de anchos de cuadrícula de Blaze UI:
- .o-grid__cell–width-xx: esta clase se usa para aplicar un ancho específico a su celda y una vez que agrega un ancho específico a una celda, otras celdas ocuparán automáticamente el resto del espacio por igual. En «xx», puede agregar su ancho específico.
- .o-grid–full: Esta clase se usa para hacer la celda de ancho completo.
Sintaxis:
<div class="o-grid o-grid--demo">
<div class="o-grid__cell o-grid__cell--width-xx">
<div class="o-grid-text">.....</div>
</div>
........
</div>
<div class="o-grid o-grid--full o-grid--demo">
<div class="o-grid__cell">
<div class="o-grid-text">......</div>
</div>
........
</div>
Ejemplo 1: el siguiente ejemplo muestra el ancho de la cuadrícula en la interfaz de usuario de Blaze.
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>Grid Width in Blaze UI</h2> <h2>.o-grid__cell--width-xx class</h2> </div> <div class="o-container o-container--xlarge o-grid o-grid--demo"> <div class="o-grid__cell o-grid__cell--width-40" style="background-color: tomato;"> <div class="o-grid-text">Cell 1</div> </div> <div class="o-grid__cell" style="background-color: lightgreen;"> <div class="o-grid-text">Cell 2</div> </div> <div class="o-grid__cell" style="background-color: black;"> <div class="o-grid-text" style="color: white;">Cell 3</div> </div> </div> </body> </html>
Producción:
Anchos de cuadrícula de la interfaz de usuario de Blaze
Ejemplo 2: el siguiente ejemplo muestra el ancho completo de la cuadrícula en la interfaz de usuario de Blaze.
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>Grid Width in Blaze UI</h2> <h3>.o-grid--full class</h3> </div> <div class="o-container o-container--xlarge o-grid o-grid--full o-grid--demo"> <div class="o-grid__cell o-grid__cell--width-40" style="background-color: orange; padding: 20px;"> <h2 class="o-grid-text">Premium Job Portal</h2> </div> <div class="o-grid__cell" style="padding: 20px;"> <h2 class="o-grid-text">Coding Competitions</h2> </div> <div class="o-grid__cell" style= "background-color: green; padding: 20px;"> <h2 class="o-grid-text" style="color: white;"> Online courses </h2> </div> </div> </body> </html>
Producción:
Anchos de cuadrícula de la interfaz de usuario de Blaze
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