Blaze UI es un marco de código abierto de CSS. Es un conjunto de herramientas de interfaz de usuario liviano y 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. Su proyecto está disponible en código abierto, por lo que una gran comunidad lo mantiene.
Blaze UI Typography Inline y Multiline Code nos permiten diseñar el código que escribimos en nuestras páginas web. El código en línea se usa cuando queremos mencionar algunas etiquetas o nombrar una sola palabra clave en un sitio web, mientras que el código multilínea se usa para mostrar un código de ejemplo.
Blaze UI Typography Clases de código en línea y multilínea:
- u-code: este es el valor predeterminado para el código en línea y proporciona el CSS para los códigos en línea.
- u-code–multiline: esto es necesario para el código de varias líneas y los estilos correspondientes.
Sintaxis :
<!-- Inline Code --> <code class="u-code"> ... </code> <!-- Multiline Code --> <code class="u-code u-code--multiline"> ... </code>
Ejemplo 1: En el siguiente ejemplo, tenemos un texto con un código en línea.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>GeeksforGeeks | BlazeUI</title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <script nomodule="" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> </script> </head> <body> <div class="0-container"> <center> <h1 style="color: green;">GeeksforGeeks</h1> <strong>Blaze UI Typography Inline and Multiline code</strong> <br><br> <b>Inline code</b> <p>The<code class="u-code">center</code> tag is used in html for aligning the items in center </p> <p>We use<code class="u-code">style</code> attribute to style different elements in HTML. </p> </center> </div> </body> </html>
Producción
Ejemplo 2: el siguiente ejemplo demuestra el uso del código multilínea en la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>GeeksforGeeks | BlazeUI</title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <script nomodule="" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> </script> </head> <body> <div class="0-container"> <center> <h1 style="color: green;">GeeksforGeeks</h1> <strong>Blaze UI Typography Inline and Multiline code</strong> <br /> <br /> <b>Multiline code</b> <p>The following code prints hello world in python</p> <code class="u-code u-code--multiline">print('hello world')</code> <p> The <code class="u-code">print</code> function can print string,list,tuple,boolean etc. in python3. </p> </center> </div> </body> </html>
Producción
Referencia: https://www.blazeui.com/components/typography/
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA