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.
Un comentario es como un foro donde puedes dar tu opinión.
Ejemplo 1: este ejemplo crea la sección de comentarios usando 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" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div style="margin-top: 20px" class="ui container"> <div class="ui comments"> <h3 class="ui dividing header">Comments</h3> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200509221352/image30.png"> </a> <div class="content"> <a class="author">Geeksforgeeks</a> <div class="metadata"> <span class="date">Yesterday at 3:32PM</span> </div> <div class="text"> Good Work </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200509221352/image30.png"> </a> <div class="content"> <a class="author">Rahul</a> <div class="metadata"> <span class="date">Yesterday at 12:30AM</span> </div> <div class="text"> <p>Nice Job, I wish I could do that.</p> </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> <div class="comments"> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200509221352/image30.png"> </a> <div class="content"> <a class="author">Rishab</a> <div class="metadata"> <span class="date">2 Minutes ago</span> </div> <div class="text"> Just need some practice. </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> </div> </div> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200509221352/image30.png"> </a> <div class="content"> <a class="author">Nitin</a> <div class="metadata"> <span class="date">3 days ago</span> </div> <div class="text"> Loved it! </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> <form class="ui reply form"> <div class="field"> <textarea spellcheck="false"></textarea> </div> <div class="ui blue labeled submit icon button"> <i class="icon edit"></i> Add Reply </div> </form> </div> </div> </body> </html>
Producción:
Ejemplo 2: este ejemplo crea la sección de comentarios usando Semantic-ui.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Comment Types</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>
<style>
body{
margin:20px;
}
</style>
</head>
<body>
<div class="ui container">
<hr>
<br>
<div class="ui comments">
<h2 class="ui dividing header">Comments</h2>
<div class="comment">
<a class="avatar">
<img src=
"https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg">
</a>
<div class="content">
<a class="author">GeeksforGeeks</a>
<div class="text">
Welcome to GeeksforGeeks.
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src=
"https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg">
</a>
<div class="content">
<a class="author">Krishna</a>
<div class="text">
Thank you so much.
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
</div>
<form class="ui reply form">
<div class="field">
<textarea spellcheck="false"></textarea>
</div>
<div class="ui blue labeled submit icon button">
<i class="icon edit"></i> Add Reply
</div>
</form>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por iamsahil1910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA