Tachyons es un conjunto de herramientas CSS que se utiliza para crear un sitio web receptivo muy fácilmente.
Tachyons Layout Tachyons Layout Display es una visualización que se utiliza para definir la visualización de un elemento en cualquier punto de ruptura.
Clases de visualización de diseño de taquiones:
- .db: esta clase se usa para crear el elemento en el bloque, declarando la pantalla: bloque; , que inherentemente establece el ancho al 100% de su elemento base.
- .dib: esta clase se usa para crear el elemento en bloque en línea, declarando display: bloque en línea; , que envuelven el contenido en línea.
- .di: esta clase se usa para crear el elemento en línea, al declarar display: inline;, es decir, ayuda a configurar el contenido en línea.
- .dt: esta clase se usa para crear una tabla con celdas de diferentes tamaños, declarando display: table;. Se puede combinar con display table-cell para representar una tabla sin marcado de tabla.
- .dtc : esta clase se usa para mostrar la celda de la tabla sin ninguna marca de tabla.
- .dt–fixed: Esta clase se usa para crear la tabla con celdas del mismo tamaño, es decir, se usa para establecer el diseño de la tabla como fijo.
- .dn: esta clase se usa para crear el elemento sin propiedad, declarando display: none;.
Sintaxis:
<element-name class="display-class">...</element-name>
Ejemplo 1: En el siguiente ejemplo, utilizaremos las clases de visualización para demostrar la visualización del diseño.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons/css/tachyons.min.css">
<style>
div {
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;
text-align:center;">
GeeksforGeeks
</h2>
<h3 style="text-align:center;">
Tachyons Layout Display
</h3>
<span class="db"
style="background-color:lightgreen;
text-align:center;">GFG
</span>
</body>
</html>
Producción:
Ejemplo 2: En el siguiente ejemplo, haremos uso de las clases de visualización para demostrar la visualización del diseño.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons/css/tachyons.min.css">
<style>
div {
text-align: center;
}
.dn {
display: none;
}
</style>
</head>
<body>
<h2 style="color:green;
text-align:center;">
GeeksforGeeks
</h2>
<h3 style="text-align:center;">
Tachyons Layout Display
</h3>
<span class="di"
style="background-color:lightgreen;
text-align:center;">GFG
</span>
<br>
<p class="dn">GeeksforGeeks</p>
</body>
</html>
Producción:
Referencia: https://tachyons.io/docs/layout/display/
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA