Blaze UI es un marco de código abierto de CSS. Es un kit de herramientas de interfaz de usuario liviano que proporciona excelentes herramientas para crear aplicaciones personalizadas y escalables. Nos proporciona una estructura que nos ayuda a formar una base sólida y fácil de mantener para los sitios web. Puede funcionar con cualquier marco que exista, y todos los componentes se desarrollan manteniendo la capacidad de respuesta móvil como una prioridad para que funcionen en cualquier tamaño de pantalla. Puede adaptarse a cualquier ecosistema y todos los diseños o CSS son móviles primero, por lo que no tiene que preocuparse por la resolución de la pantalla.
Blaze UI Visibility nos ayuda a alternar la visibilidad y la apariencia de un elemento. El objetivo principal de usar estas clases es permitirnos alternar la visibilidad y la apariencia de los elementos en puntos de interrupción específicos, como la resolución de la pantalla. Uno de los mejores usos de esto es hacer que nuestra página web responda. Por ejemplo, la interfaz de usuario de la página web permanecerá sin cambios cuando cambiemos el tamaño de la pantalla.
Clases utilizadas:
- u-display-block@small-u-large: Esta clase se usa para hacer que la página web responda.
Sintaxis:
<div class="class_name"> ... </div>
Ejemplo: El ejemplo muestra el uso de la clase mencionada anteriormente.
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"> <title>Blaze UI Responsiveness</title> </head> <body> <center> <h1 style="color: green">GeeksforGeeks</h1> <h3>Blaze UI Responsiveness</h3> <p class="u-display-none u-display-block@small" style="color: rgb(207, 34, 141)"> Hello! I'm Visible on any screen. </p> </center> </body> </html>
Producción:
Explicación: cuando mire el ejemplo anterior, notará que después de cambiar el tamaño de la resolución, el contenido permanece sin cambios. Este comportamiento indica que la página web responde.
Referencia: https://www.blazeui.com/utils/visibility/
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA