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 tarjeta de interfaz de usuario semántica tiene una función para mostrar el contenido web en forma de tarjeta, tal como se muestra el contenido en los naipes. El contenido del botón se usa para agregar el botón a la tarjeta que contiene algunos tipos de acciones que deben realizarse, según ciertas condiciones. Por ejemplo, para una amplia gama de usos, la interfaz de usuario semántica tiene muchos tipos de tarjetas que involucran contenido diferente en la tarjeta, es decir, imagen, enlace, botones, etc., y en muchas variaciones como tarjeta fluida, tarjeta de enlace y muchas más. En este artículo, veremos el contenido de los botones de la tarjeta donde los botones están involucrados en el contenido de la tarjeta.
Contenido de los botones de la tarjeta : esta es una tarjeta que contiene botones con el contenido. El diseño básico de la tarjeta contiene 3 partes básicas, es decir, el encabezado, la descripción y el botón.
Clase de contenido de botón de tarjeta de interfaz de usuario semántica:
- contenido : representa el contenido de la tarjeta para el encabezado y la descripción.
Sintaxis:
<div class="ui cards">
<div class="card">
<div class="content">
<div class="header">
.....
</div>
</div>
</div>
</div>
Ejemplo: este ejemplo describe el contenido de los botones de la tarjeta de interfaz de usuario semántica.
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"> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> <title>Semantic-UI Card Buttons Content</title> </head> <body> <div class="ui cards"> <div class="card"> <div class="content"> <div class="header ui green"> GeeksforGeeks </div> <div class="description"> As the placement season is back, GeeksforGeeks is here to help you crack the interview. We have selected some most commonly asked and MUST DO practice problems to crack Product-based Company Interviews. </div> </div> <div class="ui bottom attached button"> Visit Website </div> </div> </div> </body> </html>
Producción:
Contenido de los botones de la tarjeta de interfaz de usuario semántica
Referencia: https://semantic-ui.com/views/card.html#buttons
Publicación traducida automáticamente
Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA