Blaze UI es un kit de herramientas de interfaz de usuario de código abierto gratuito que proporciona una excelente estructura para crear sitios web rápidamente con una base escalable y fácil de mantener. Todos los componentes de la interfaz de usuario de Blaze se desarrollan primero para dispositivos móviles y se basan únicamente en las funciones nativas del navegador, no en una biblioteca o marco por separado. Nos ayuda a crear un sitio web escalable y receptivo de manera rápida y eficiente con un estilo consistente.
Blaze UI viene con un excelente módulo de tipografía que cubre diferentes visualizaciones de texto. Hay varios tipos de clases de tipografía en la interfaz de usuario de Blaze, como hipervínculo, texto degradado, texto resaltado, cita en bloque y mucho más. En este artículo, analizaremos la clase de tipografía Blockquote en la interfaz de usuario de Blaze.
Una cita en bloque es una cita en un documento escrito que se separa del texto principal como un párrafo o bloque de texto junto con el nombre de la persona que la citó. Para crear una cita en bloque en la interfaz de usuario de Blaze, usamos la clase u-blockquote en el elemento <blockquote> . Para agregar un texto en el elemento <blockquote>, usamos la clase u-blockquote__body en el elemento <div> y para el nombre del cotizador, usamos la clase u-blockquote__footer en el elemento <footer> .
Tipografía Blockquote Clases utilizadas:
- .u-blockquote: esto convierte un <blockquote> básico en una cita en bloque de Blaze UI.
- u-blockquote__body: Esto se usa para diseñar el bloque de párrafo de texto de la cita en bloque.
- u-blockquote__footer: Esto se usa para diseñar el nombre de la cita en la cita en bloque.
Sintaxis:
<blockquote class="u-blockquote">
<div class="u-blockquote__body">
...
</div>
<footer class="u-blockquote__footer">...</footer>
</blockquote>
Ejemplo 1: este ejemplo demuestra el blockquote básico sin un nombre de comillas en la interfaz de usuario de Blaze usando las clases u-blockquote y u-blockquote__body .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Blaze UI</title> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <center> <h1 style="color:green">GeeksforGeeks</h1> <strong>Blaze UI Blockquote Typography</strong> <br> <blockquote class="u-blockquote"> <div class="u-blockquote__body"> Geeksforgeeks is the biggest computer science portal in the whole world. </div> </blockquote> </center> </body> </html>
Producción:
Producción
Ejemplo 2: Este ejemplo muestra las clases u-blockquote , u-blockquote__body y u-blockquote__footer .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Blaze UI</title> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <center> <h1 style="color:green">GeeksforGeeks</h1> <strong>Blaze UI Blockquote Typography</strong> <br> <blockquote class="u-blockquote"> <div class="u-blockquote__body"> Geeksforgeeks is the biggest computer science portal in the whole world. </div> <footer class="u-blockquote__footer">-Priyank </footer> </blockquote> </center> </body> </html>
Producción:
Producción
Referencia: https://www.blazeui.com/components/typography
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA