Blaze UI es un kit de herramientas de interfaz de usuario de código abierto sin marco que proporciona una excelente estructura para crear sitios web rápidamente con una base escalable y mantenible. Es de naturaleza receptiva, ya que todos los componentes se desarrollan primero para dispositivos móviles y funcionan en cualquier tamaño de pantalla.
Blaze UI Grid es un componente esencial en cualquier sitio web, ya que alinea el espacio de manera eficiente y mejora la interfaz de usuario. Blaze UI nos proporciona un componente conocido como Grid Fixed Width . En este componente, las celdas de una cuadrícula serán fluidas y receptivas. Nos permite dar un ancho fijo a cada celda de la grilla.
Blaze UI Grid Clases de ancho fijo:
- o-grid: Esta clase se usa para crear una grilla.
- o-grid__cell: Esta clase se utiliza para crear una celda de la grilla.
- o-grid-text: esta clase se utiliza para crear un texto que se muestra dentro de una celda.
Sintaxis:
<div class="o-grid">
<div class="o-grid__cell">
<div class="o-grid-text">
...
</div>
</div>
</div>
Ejemplo 1: en el siguiente programa, crearemos una cuadrícula de ancho fijo.
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 Fixed Widths</title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
<div class="c-heading__sub">
Blaze UI Fixed Widths
</div>
</h1>
<br>
<div class="o-grid o-grid--demo">
<div class="o-grid__cell o-grid__cell--width-fixed"
style={{width: '350px' }}>
<!--Fixed Width-->
<div class="o-grid-text">Width of 350px</div>
</div>
<div class="o-grid__cell o-grid__cell--width-fixed"
style={{width: '350px' }}>
<div class="o-grid-text">Width of 350px</div>
</div>
<div class="o-grid__cell o-grid__cell--width-fixed"
style={{width: '350px' }}>
<div class="o-grid-text">Width of 350px</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: En el siguiente programa, demostraremos una cuadrícula que no tiene un ancho fijo para comprender la diferencia entre ellas.
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 Fixed Widths</title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <h1 style="color:green"> GeeksforGeeks <div class="c-heading__sub"> Blaze UI Fixed Widths </div> </h1> <br> <div class="o-grid o-grid--demo"> <div class="o-grid__cell"> <!--No fixed width--> <div class="o-grid-text">first</div> </div> <div class="o-grid__cell"> <div class="o-grid-text">second</div> </div> <div class="o-grid__cell"> <div class="o-grid-text">third</div> </div> </div> </body> </html>
Producción:
Referencia: https://www.blazeui.com/objects/grid/
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA