Esta clase acepta más de un valor en las utilidades Spectre Display . Todas las propiedades están cubiertas como en forma de clase. Es la alternativa a la propiedad de visualización CSS . Esta clase se utiliza para definir cómo se colocarán los componentes (div, hipervínculo, encabezado, etc.) en la página web. Como sugiere su nombre, esta propiedad se utiliza para definir la visualización de las diferentes partes de una página web. Las utilidades de visualización se utilizan para mostrar y ocultar cosas.
Clase de utilidad Spectre Display:
- d-block: Se utiliza para mostrar un elemento como un elemento de bloque.
- d-inline: se utiliza para mostrar un elemento como un elemento en línea.
- d-inline-block: se utiliza para mostrar un elemento como un contenedor de bloques de nivel en línea.
- d-flex: se utiliza para mostrar un elemento como un contenedor flexible a nivel de bloque.
- d-inline-flex: se utiliza para mostrar un elemento como un contenedor flexible de nivel en línea.
- d-none: Se utiliza para desaparecer el contenedor.
- d-hide: Se utiliza para eliminar el elemento.
- d-visible: Se utiliza para hacer visible el contenedor.
- d-invisible: Se utiliza para hacer invisible el contenedor.
- text-hide: Se utiliza para ocultar el texto del elemento.
- text-assistive: Se utiliza para ayudar a los textos.
Sintaxis:
<div class="d-block"> .... </div>
Ejemplo: El siguiente ejemplo ilustra las utilidades de Spectre Display . Usaremos las primeras cinco clases de manera similar, puede usar otras clases según sus requisitos.
HTML
<!DOCTYPE html> <html> <head> <title>SPECTRE Display Class</title> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> </head> <body> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>SPECTRE Display Class</strong> <br><br> </center> <div class="container"> <strong>Display d-block Class:</strong> <br> <div class="columns d-block"> <div class="column bg-success col-4">col-4</div> <div class="column bg-primary col-4">col-4</div> <div class="column bg-warning col-4">col-4</div> </div> </div> <div class="container"> <strong>Display d-inline Class:</strong> <br> <div class="columns d-inline"> <div class="column bg-success col-4">col-4</div> <div class="column bg-primary col-4">col-4</div> <div class="column bg-warning col-4">col-4</div> </div> </div> <div class="container"> <strong>Display d-inline-block Class:</strong> <br> <div class="columns d-inline-block"> <div class="column bg-success col-4">col-4</div> <div class="column bg-primary col-4">col-4</div> <div class="column bg-warning col-4">col-4</div> </div> </div> <div class="container"> <strong>Display d-flex Class:</strong> <br> <div class="columns d-flex"> <div class="column bg-success col-4">col-4</div> <div class="column bg-primary col-4">col-4</div> <div class="column bg-warning col-4">col-4</div> </div> </div> <div class="container"> <strong>Display d-inline-flex Class:</strong> <br> <div class="columns d-inline-flex"> <div class="column bg-success col-4">col-4</div> <div class="column bg-primary col-4">col-4</div> <div class="column bg-warning col-4">col-4</div> </div> </div> </body> </html>
Producción:
Utilidades de visualización de espectros
Enlace de referencia: https://picturepan2.github.io/spectre/utilities/display.html#display
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA