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 su uso 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. Veamos algunos ejemplos de encabezados de interfaz de usuario semántica.
Ejemplo 1: En este ejemplo, veremos los diferentes tipos de encabezados de página.
<!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 container"> <h1 class="ui header">First header</h1> <h2 class="ui header">Second header</h2> <h3 class="ui header">Third header</h3> <h4 class="ui header">Fourth header</h4> <h5 class="ui header">Fifth header</h5> <h6 class="ui header">Sixth header</h6> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, veremos el icono como encabezado.
<!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 container"> <h1>Icon Header</h1> <h2 class="ui center aligned icon header"> <i class="circular users icon"></i> Users </h2> <h2 class="ui center aligned icon header"> <i class="circular chess icon"></i> Chess </h2> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Ejemplo 3: En este ejemplo, veremos encabezado con descripción
.
<!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 container"> <h2 class="ui header"> GeeksforGeeks <div class="sub header"> A Computer Science portal for Geeks. </div> </h2> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Ejemplo 4: En este ejemplo, veremos encabezado con imagen.
<!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 container"> <h2>Image as Header</h2> <div class="ui compact menu"> <h2 class="ui header"> <img class="ui image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200506112031/image211.jpg" /> <div class="content"> geeksforgeeks </div> </h2> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Ejemplo 5: En este ejemplo, veremos encabezado con icono.
<!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 container"> <h2>Header with Icon</h2> <h2 class="ui header"> <i class="users icon"></i> <div class="content"> Friend List <div class="sub header"> Only Private ones. </div> </div> </h2> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Ejemplo 6: En este ejemplo, veremos encabezado de bloque.
<!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 container"> <h2>Block Header</h2> <h3 class="ui block header"> Geeksforgeeks </h3> Learn anything related to computer Science. </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Ejemplo 7: En este ejemplo, veremos un encabezado flotante.
<!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 container"> <h2>Floating Header</h2> <div class="ui clearing segment"> <h3 class="ui right floated header"> Previous </h3> <h3 class="ui left floated header"> Next </h3> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Nota: También puede invertir el encabezado agregando la clase invertida a su segmento y encabezado. 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