Las etiquetas Spectre son etiquetas de texto formateadas para resaltar texto informativo. Estas etiquetas normalmente tienen forma de rectángulo. Sin embargo, podemos cambiar la forma de las etiquetas a redondeadas con la ayuda de Spectre Labels Etiquetas redondeadas .
Tipo de etiquetas de espectro:
- Etiquetas Spectre: Estas son etiquetas predeterminadas en forma de rectángulo.
- Etiquetas de espectro redondeadas: se trata de etiquetas redondeadas, se ha utilizado para crear píldoras/píldoras de forma redondeada.
Clases de etiquetas de espectro:
- etiqueta: esta clase se utiliza para crear las etiquetas predeterminadas en forma de rectángulo.
- label-rounded: esta clase se utiliza para dar forma a las etiquetas en forma de píldora.
Sintaxis:
<span class="label ...></span>
El siguiente ejemplo ilustra las etiquetas Spectre:
Ejemplo 1: en este ejemplo, crearemos etiquetas predeterminadas en varios colores.
HTML
<!DOCTYPE html> <html> <head> <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 labels</strong> </center> <br><br> <div> <div> <strong><u>Labels on span Elements:</u></strong> <br> <span class="label"> Default label </span> <span class="label label-primary"> Primary label </span> <span class="label label-success"> Success label </span> <span class="label label-error"> Error label </span> <span class="label label-warning"> Warning label </span> </div> <br> <div> <strong><u>Labels on small Elements:</u></strong> <br> <small class="label"> Default label </small> <small class="label label-primary"> Primary label </small> <small class="label label-success"> Success label </small> <small class="label label-error"> Error label </small> <small class="label label-warning"> Warning label </small> </div> </div> </body> </html>
Producción:
Etiquetas de espectro
Ejemplo 2: En este ejemplo, crearemos etiquetas redondeadas en varios colores.
HTML
<!DOCTYPE html> <html> <head> <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 Labels Rounded labels</strong> </center> <br><br> <div> <div> <strong><u>Labels on span Elements:</u></strong> <br> <span class="label label-rounded"> Default label </span> <span class="label label-rounded label-primary"> Primary label </span> <span class="label label-rounded label-success"> Success label </span> <span class="label label-rounded label-error"> Error label </span> <span class="label label-rounded label-warning"> Warning label </span> </div> <br> <div> <strong><u>Labels on small Elements:</u></strong> <br> <small class="label label-rounded"> Default label </small> <small class="label label-rounded label-primary"> Primary label </small> <small class="label label-rounded label-success"> Success label </small> <small class="label label-rounded label-error"> Error label </small> <small class="label label-rounded label-warning"> Warning label </small> </div> </div> </body> </html>
Producción:
Etiquetas de espectro
Referencia: https://picturepan2.github.io/spectre/elements/labels.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA