jueves, 24 de octubre de 2019

Bootstrap 4 - La etiqueta kbd

Bootstrap 4 - La etiqueta kbd

etiqueta kbd bootstrap 4

Utilizando la etiqueta <kbd></kbd> puedes modificar los estilos de entradas para teclado. Bootstrap 4 nos brinda un magnífico diseño.




<body>
 
  <p>Utiliza <kbd>ctrl + c</kbd> para copiar y <kbd>ctrl + v</kbd> para pegar.</p>

</body>

Resultado


kbd bootstrap 4

Este es el estilo básico, pero con los colores de fondo de Bootstrap podemos añadir más colores:




<kbd>Sin clase</kbd>

<kbd class="bg-danger">Danger</kbd>
<kbd class="bg-dark">Dark</kbd>
<kbd class="bg-info">Info</kbd>
<kbd class="bg-light" style="color: black">Light</kbd>
<kbd class="bg-primary">Primary</kbd>
<kbd class="bg-secondary">Secondary</kbd>
<kbd class="bg-success">Success</kbd>
<kbd class="bg-transparent">Transparent</kbd>
<kbd class="bg-warning">Warning</kbd>
<kbd class="bg-white" style="color: black">White</kbd>

Resultado


Estilos kbd Bootstrap 4

Puedes añadir más estilos como por ejemplo bordes:




<kbd class="bg-danger" style="border: medium">Danger</kbd>
<kbd class="bg-dark" style="border: thick">Dark</kbd>
<kbd class="bg-info" style="border: dotted">Info</kbd>
<kbd class="bg-primary" style="border: double">Primary</kbd>
<kbd class="bg-secondary" style="border: solid">Secondary</kbd>
<kbd class="bg-success" style="border: dashed">Success</kbd>
<kbd class="bg-transparent" style="border: groove">Transparent</kbd>
<kbd class="bg-warning" style="border: inset">Warning</kbd>

Resultado

bordes kbd Bootstrap 4



0 comentarios:

Publicar un comentario

Si te a gustado o necesitas ayuda, tus comentarios son agradecidos :D