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.
¿Cómo usar la interfaz de usuario semántica?
Simplemente busque la interfaz de usuario semántica de CDN en Google y obtendrá el enlace de CDN para la interfaz de usuario semántica y simplemente colóquelo en la etiqueta principal de su HTML y estará listo para comenzar.
Veamos el código sobre cómo poner CDN de interfaz de usuario semántica en HTML.
html
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <h1>This is How to integrate semantic-ui</h1> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Y puede eliminar el enlace de la cabeza para ver la diferencia.
La segunda forma de uso es descargar el archivo min.css de la interfaz de usuario semántica cuyo enlace puede encontrar en el sitio oficial de la interfaz de usuario semántica y usarlo directamente y ayuda sin conexión.
Ahora veamos un ejemplo del uso de Semantic-UI.
html
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="container"> <h1>GeeksforGeeks</h1> <p>This is a simple example of using semantic-ui</p> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Veamos otro ejemplo de cargador Semantic-UI.
html
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui inverted segment"> <div class="ui active inverted loader"></div> <br> <br> <br> <br> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Puede ejecutar directamente estos ejemplos haciendo clic en ejecutar en IDE.
Publicación traducida automáticamente
Artículo escrito por iamsahil1910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA