Interfaz de usuario semántica | Comentario

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *