Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble. Utiliza una clase para agregar CSS a los elementos. Semantic-UI tiene encabezados realmente geniales que se pueden usar con texto, íconos y muchos más.
Un mensaje muestra información relacionada con algún contenido. Semantic-UI tiene un elemento de mensaje realmente genial que se puede usar con texto, íconos y muchos más. La interfaz de usuario semántica tiene diferentes tipos de variaciones de mensajes, como variaciones de tamaño, variaciones de advertencia, variaciones compactas y mensajes de variaciones de color. En este artículo, aprenderemos sobre las variaciones de tamaño de los mensajes en la interfaz de usuario semántica.
Las variaciones de tamaño de los elementos del mensaje nos ayudan a establecer el tamaño de fuente del texto del elemento del mensaje según su importancia. Para crear una variación de tamaño del mensaje de IU semántica, usamos las clases de tamaño junto con las clases de ui y de mensaje. Las siguientes son las clases de tamaño en los mensajes de la interfaz de usuario semántica:
- mini: este es el tamaño de fuente más pequeño para el elemento del mensaje.
- tiny: Este es más grande que el tamaño mini pero más pequeño que todos los demás.
- pequeño: Este es un tamaño de fuente ligeramente más pequeño de lo normal.
- grande: Este es por defecto el tamaño normal del texto del elemento del mensaje.
- grande: Este es un tamaño de letra un poco más grande de lo normal.
- enorme: este tamaño de fuente es más pequeño que masivo pero más grande que todos los demás.
- masivo: este es el tamaño de fuente más grande para el elemento del mensaje.
Sintaxis:
<div class="ui <size> message"> content.... </div>
Ejemplo 1: este ejemplo demuestra variaciones de tamaño mini, diminuto y pequeño del mensaje semántico-Ui.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Message Size Variation</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js" integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body style="padding: 30px;"> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Semantic UI Message</strong> <br /><br /> </center> <div class="ui mini message">Mini GeeksforGeeks</div> <div class="ui tiny message">Tiny GeeksforGeeks</div> <div class="ui small message">Small GeeksforGeeks</div> <div class="ui message">Default GeeksforGeeks</div> </body> </html>
Producción:
Variación del tamaño del mensaje de la interfaz de usuario semántica
Ejemplo 2: este ejemplo demuestra variaciones de tamaño grande, grande, enorme y masiva del mensaje semántico-Ui.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Message Size Variation</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js" integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body style="padding: 30px;"> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Semantic UI Message</strong> <br /><br /> </center> <div class="ui large message">large GeeksforGeeks</div> <div class="ui big message">big GeeksforGeeks</div> <div class="ui huge message">huge GeeksforGeeks</div> <div class="ui massive message">massive GeeksforGeeks</div> </body> </html>
Producción:
Variación del tamaño del mensaje de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/message.html#size
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA