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.
La interfaz de usuario semántica ofrece varias variaciones de tarjetas, como tarjeta fluida, tarjeta centrada, tarjeta en relieve, tarjeta de enlace, contenido flotante, alineación de texto, color, recuento de columnas, apilable, duplicación. En este artículo, aprenderemos sobre la variación del fluido de las cartas.
Variaciones de tarjeta de interfaz de usuario semántica La variante de tarjeta fluida toma el tamaño o el ancho del contenedor con el que está encerrada, ya que es libre de fluir.
Variaciones de tarjeta de interfaz de usuario semántica Clase de variante de tarjeta fluida:
- fluido: esta clase se utiliza para obligar al elemento de la tarjeta a ocupar todo el ancho del contenedor.
Nota: Puede organizar todas estas tarjetas de variación de fluidos en forma de cuadrículas
Sintaxis:
<div class="ui fluid card">
<div class="...">
<!-- image -->
</div>
<div class="...">
<!-- description -->
</div>
</div>
El siguiente ejemplo ilustra la variante de tarjeta fluida de variaciones de tarjeta de interfaz de usuario semántica
Ejemplo: El siguiente ejemplo demuestra la clase de fluido de tarjeta . Podemos observar que la imagen toma completamente la forma del contenedor ya que usamos la variación de fluido de tarjeta .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Semantic UI card</title>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<style>
body {
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<strong>Semantic UI card fluid</strong>
<br>
<div class="ui three column grid">
<div class="column">
<div class="ui fluid card">
<div class="image">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg">
</div>
<div class="content">
<a class="header">
geeksforgeeks
</a>
</div>
</div>
</div>
<div class="column">
<div class="ui fluid card">
<div class="image">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg">
</div>
<div class="content">
<a class="header">
geeksforgeeks
</a>
</div>
</div>
</div>
<div class="column">
<div class="ui fluid card">
<div class="image">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg">
</div>
<div class="content">
<a class="header">
geeksforgeeks
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Variaciones de tarjeta de interfaz de usuario semántica Variante de tarjeta fluida
Referencia: https://semantic-ui.com/views/card.html#fluid-card
Publicación traducida automáticamente
Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA