Semantic UI es el marco de código abierto que utilizó CSS y jQuery para hacer que nuestros sitios web se vean hermosos y receptivos. Tiene clases predefinidas como bootstrap para usar para hacer que nuestro sitio web sea más interactivo. Tiene algunos componentes semánticos preconstruidos y podemos usar estos componentes para crear un sitio web receptivo.
La lista de IU semántica se utiliza para agrupar contenido relacionado. Es una manera fácil de mostrar la lista de elementos que se necesitan para nuestro sitio web muchas veces. Lista de contenido flotante La variación se usa para hacer flotar el elemento a la izquierda o a la derecha.
En este artículo, discutiremos la variación de contenido flotante de la lista de IU semántica.
Clases de variación de contenido flotante de lista de interfaz de usuario semántica:
- left floated: esta clase se usa para hacer flotar el contenido a la izquierda.
- right floated: esta clase se usa para hacer flotar el contenido a la derecha.
Sintaxis:
<div class="ui List-Floated-Content-Variation-Class list">
...
</div>
Ejemplo 1: el siguiente código demuestra la variación de contenido flotante izquierdo de la lista de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI List Floated Content Variation </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 class="ui green header"> GeeksforGeeks </h2> <h3> Semantic-UI List Floated Content Variation </h3> </div> <br> <div class="ui list"> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <div class="left floated header"> <a href="#" class="ui button"> Left floated Button </a> </div> </div> <div class="item"> <a href="#" class="ui button"> Button </a> <a href="#" class="ui left floated button"> Left floated Button </a> </div> </div> </body> </html>
Producción:
Variación de contenido flotante a la izquierda
Ejemplo 2: El siguiente código demuestra la variación de contenido flotante a la derecha de la lista de IU semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI List Floated Content Variation </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 class="ui green header"> GeeksforGeeks </h2> <h3> Semantic-UI List Floated Content Variation </h3> </div> <br> <div class="ui right floated horizontal list"> <a href="#" class="ui button"> GFG Right floated 1 </a> <a href="#" class="ui button"> GFG Right floated 2 </a> <a href="#" class="ui button"> GFG Right floated 3 </a> </div> <div class="ui horizontal list"> <a class="item" href="#"> GFG Item 1 </a> <a class="item" href="#"> GFG Item 2 </a> <a class="item" href="#"> GFG Item 3 </a> <a class="item" href="#"> GFG Item 4 </a> </div> </body> </html>
Producción:
Variación de contenido flotante derecho
Referencia: https://semantic-ui.com/elements/list.html#floated
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA