Semantic UI es un marco de código abierto disponible para crear interfaces de usuario agradables y flexibles utilizando CSS y jQuery. Es muy similar a Bootstrap que tiene diferentes elementos para la creación de sitios web. Utiliza principalmente clases para agregar estilos a diferentes elementos de HTML. Divider ayuda a dividir visualmente el contenido de la pantalla en grupos.
Ejemplo:
<!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 style="margin-top: 100px" class="ui container"> <h2>Divider</h2> <div class="ui divider"> <br> <p> Semantic UI is an open-source that uses CSS and jQuery to build great user interfaces. It is same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements. </p> </div> </div> <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> </body> </html>
Producción
Ejemplo: El siguiente ejemplo demuestra el divisor vertical.
<!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 style="margin-top: 100px" class="ui container"> <h2>Vertical Divider</h2> <div class="ui placeholder segment"> <div class="ui two column very relaxed stackable grid"> <div class="middle aligned column"> <div class="ui huge button"> Student Log In </div> </div> <div class="middle aligned column"> <div class="ui huge button"> Teacher Log In </div> </div> </div> <div class="ui vertical divider"> Or </div> </div> </div> <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> </body> </html>
Producción:
<p Ejemplo: El siguiente ejemplo demuestra el divisor horizontal.
<!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 style="margin-top: 100px" class="ui container"> <h2>Horizontal Divider</h2> <div class="ui center aligned basic segment"> <div class="ui button"> Student Log In </div> <div class="ui horizontal divider"> Or </div> <div class="ui button"> Teacher Log In. </div> </div> </div> <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> </body> </html>
Producción:
Ejemplo: El siguiente ejemplo demuestra el divisor invertido.
<!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 style="margin-top: 100px" class="ui container"> <h2>Inverted Divider</h2> <div class="ui placeholder inverted segment"> <div class="ui two column very relaxed stackable grid"> <div class="middle aligned column"> <div class="ui huge button"> Student Log In </div> </div> <div class="middle aligned column"> <div class="ui huge button"> Teacher Log In </div> </div> </div> <div class="ui inverted vertical divider"> Or </div> </div> </div> <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> </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