Semantic UI es el marco de código abierto que utilizó CSS y jQuery para hacer que nuestros sitios web se vean hermosos y receptivos. Tiene clases predefinidas como bootstrap para usar para hacer que nuestro sitio web sea más interactivo. Tiene algunos componentes semánticos preconstruidos y podemos usar estos componentes para crear un sitio web receptivo.
El mensaje de interfaz de usuario semántica se utiliza para mostrar un mensaje que puede explicar el contenido cercano. La variación de información se utiliza para mostrar cualquier tipo de información al usuario con la ayuda de la clase de información . En este artículo, discutiremos la variación de información del mensaje en la interfaz de usuario semántica.
Clase de variación de información de mensaje de interfaz de usuario semántica:
- info : Se utiliza para crear el bloque de información para mostrar el mensaje.
Sintaxis:
<div class="ui info message"> ...... </div>
Ejemplo 1: el siguiente código demuestra el uso de la variación de información de mensaje de interfaz de usuario semántica con algo de contenido .
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/> </head> <body> <center> <h2 style="color: green"> GeeksforGeeks </h2> <h3> Semantic UI Message Info Variation </h3> </center> <div class="ui info message"> <div class="header"> About GeeksforGeeks </div> <ul class="list"> <li> A Computer Science portal. </li> <li> A Complete Guide for SDE Preparation </li> </ul> </div> </body> </html>
Producción:
Variación de información de mensaje de interfaz de usuario semántica
Ejemplo 2: el siguiente código demuestra la variación de información de mensaje de interfaz de usuario semántica con contenido e imagen .
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/> </head> <body> <center> <h2 style="color: green"> GeeksforGeeks </h2> <h3> Semantic UI Message Info Variation </h3> </center> <div class="ui info message"> <div class="header"> About GeeksforGeeks </div> <ul class="list"> <li> A Computer Science portal. </li> <li> A Complete Guide for SDE Preparation </li> <li> It contains well written, well thought and well explained computer science and programming articles </li> <li> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" alt="geeksforgeeks" > </li> </ul> </div> </body> </html>
Producción:
Variación de información de mensaje de interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/message.html#info
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA