Blaze UI es un marco CSS de código abierto. Es un kit de herramientas de interfaz de usuario liviano que proporciona excelentes herramientas para crear aplicaciones personalizadas y escalables. Puede funcionar con cualquier framework que exista. Puede adaptarse a cualquier ecosistema. Todos los diseños o CSS son móviles primero y, por lo tanto, receptivos.
Los contenedores de Blaze UI proporcionan una pantalla multimedia de diferentes anchos para colocar el contenido dentro de ella de acuerdo con los diferentes requisitos. Use la clase o-grid__cell–offset-xx para empujar una celda horizontalmente a lo largo de la cuadrícula.
Clases de compensaciones de Blaze UI Containers:
- .o-grid__cell–offset-xx: esta clase se utiliza para establecer el desplazamiento de la cuadrícula del contenedor. En esta clase, xx representa el tamaño del ancho del contenedor.
Sintaxis:
<div class="o-grid o-grid--demo">
...
<div class="o-grid__cell o-grid__cell--width-xx
o-grid__cell--offset-xx">
...
</div>
</div>
Ejemplo: El siguiente código demuestra la clase o-grid__cell–offset-xx utilizando el desplazamiento como 40.
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" />
<style>
.o-container {
margin: 0 40px;
}
.o-grid {
border: 1px solid green;
}
.o-grid__cell {
border: 1px solid blue;
}
</style>
</head>
<body>
<h1 style="text-align:center; color:green;">
GeeksforGeeks
</h1>
<h2 style="text-align: center;">
Blaze UI Containers Offsets
</h2>
<div class="o-grid o-container">
<div class="o-grid__cell o-grid__cell--width-30">
<div class="o-grid-text">
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.
</div>
</div>
<div class="o-grid__cell o-grid__cell--width-30
o-grid__cell--offset-40">
<div class="o-grid-text">
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.
</div>
</div>
</div>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/objects/grid
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA