Semantic UI es un marco de desarrollo de código abierto que proporciona clases predefinidas para hacer que nuestro sitio web se vea hermoso, sorprendente y receptivo. Es similar a Bootstrap que tiene clases predefinidas. Utiliza jQuery y CSS para crear las interfaces. También se puede usar directamente a través de CDN como bootstrap.
La interfaz de usuario semántica proporciona a los usuarios varias clases de segmentos que hacen que los segmentos de los sitios web se vean más elegantes y hermosos. En este artículo veamos acerca de los segmentos agrupados de tipo elevado.
Los segmentos elevados dan un efecto de realce en el sitio web para los segmentos.
Clases de grupo de segmentos elevados de IU semántica:
- elevado: Esta clase proporciona el efecto de elevación para el grupo de segmentos.
- segmentos: esta clase indica que hay un grupo de segmentos de múltiples segmentos.
Sintaxis:
<div class="ui raised segments">
<div class="ui segment">
........
</div>
<div class="ui segment">
.......
</div>
</div>
Ejemplo 1: el código siguiente muestra el grupo de segmentos elevados.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Raised Segments Group</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> <center> <h1 class="ui green header">GeeksforGeeks</h1> <strong> Semantic-UI Segment Raised Segments Group </strong> <br/> <br/> </center> <div class=" ui container"> <div class="ui raised segments"> <div class="ui green segment"> <p><a href= "https://practice.geeksforgeeks.org/events"> Events </a> </p> </div> <div class="ui segment"> <p><a href= "https://www.geeksforgeeks.org/"> Tutorials </a> </p> </div> <div class="ui segment"> <p><a href= "https://practice.geeksforgeeks.org/courses/?ref=ghm"> Practice </a> </p> </div> <div class="ui segment"> <p><a href= "https://practice.geeksforgeeks.org/courses/?ref=ghm"> Courses </a> </p> </div> </div> </div> </body> </html>
Producción:
Ejemplo 2: el código siguiente muestra el grupo de segmentos elevados.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Raised Segments Group</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> <center> <h1 class="ui green header">GeeksforGeeks</h1> <strong> Semantic-UI Segment Raised Segments Group </strong> <br/> <br/> <div class=" ui container"> <div class="ui raised segments"> <div class="ui inverted green segment"> <p>GeeksforGeeks Handles</p> </div> <div class="ui segment"> <p><a href= "https://www.instagram.com/geeks_for_geeks/"> Instagram</a> </p> </div> <div class="ui segment"> <p><a href= "https://www.facebook.com/geeksforgeeks.org/"> Facebook</a> </p> </div> <div class="ui segment"> <p><a href= "https://in.linkedin.com/company/geeksforgeeks"> Linkedin</a> </p> </div> <div class="ui segment"> <p><a href= "https://twitter.com/geeksforgeeks"> Twitter</a> </p> </div> <div class="ui segment"> <p><a href= "https://www.youtube.com/geeksforgeeksvideos"> Youtube</a> </p> </div> </div> </div> </center> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción :
Grupo de segmentos elevados de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/elements/segment.html#raised-segments
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA