TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

Ejemplos de botones de Bootstrap

12

Bootstrap es un marco completo que contiene todo tipo de elementos como botones, formularios, paneles, etc. Es fácil personalizar el color y el tamaño de los elementos con las plantillas de temas de Bootstrap. En este artículo, mostraremos diferentes tipos de ejemplos de botones de Bootstrap 3. Consulte el artículo más reciente sobre los botones de Bootstrap 5.

Necesita lo siguiente para agregar los botones Bootstrap en su sitio.

  • Bootstrap CSS y JS
  • secuencia de comandos de jQuery
  • Fuente iconos impresionantes
  • Estilos CSS personalizados
  • Código HTML

Obtener el código

Los primeros tres componentes se pueden agregar utilizando enlaces CDN gratuitos. Puede descargar el código CSS y HTML personalizado usando el botón a continuación. El archivo zip contiene dos archivos: uno para CSS y otro para HTML. Puede descargar los archivos CSS y HTML utilizados en este artículo aquí.

Agregar el código en su página

Finalmente, el código completo debería verse como se muestra a continuación. Puede agregar el código CSS personalizado dentro de las etiquetas de estilo en la sección de encabezado de su página web o cargar el archivo .css y el enlace como una hoja de estilo externa. Si su sitio ya usa Bootstrap, Font Awesome y jQuery, entonces no es necesario agregar los enlaces CDN.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <style> ADD CUSTOM CSS CODE HERE /* You can also link it as an external stylesheet */ </style> ADD HTML CODE HERE <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Muestra de ejemplos

Los botones de escaparate se clasifican en diferentes grupos:

  • Botones de icono de círculo

  • Botones desplegables

  • Botones predeterminados

  • Botones de línea

  • Botones rectangulares

  • Botones circulares

  • Botones de esquina redondeados

  • Botones planos

  • Botones degradados

  • Botones de degradado y rectángulo

  • Botones planos y rectangulares

  • Botones de línea y rectángulo

  • Botones de círculo y línea

  • Botones de círculo y degradado

  • Botones redondeados y de línea

  • Grandes botones sociales con iconos y nombre de red

  • Pequeños botones sociales solo con íconos

A continuación se muestran algunos de los ejemplos de botones de Bootstrap.

Ejemplos de botones de Bootstrap

Botones circulares con iconos

Ejemplos de botones de Bootstrap

Botones Bootstrap para compartir en redes sociales

Ejemplos de botones de Bootstrap

Botones de línea simple Bootstrap

Ejemplos de botones de Bootstrap

Botones de línea redondeada Bootstrap

Ejemplos de botones de Bootstrap

Botones de color redondeado Bootstrap

Ejemplos de botones de Bootstrap

Botones de estilo predeterminado de Bootstrap

Si está utilizando los archivos CSS y JS del marco Bootstrap en el sitio que no usa la plantilla Bootstrap, asegúrese de verificar que todos los demás elementos estén bien y no se vean afectados. De lo contrario, es posible que deba extraer solo el CSS necesario y usarlo en su sitio de forma independiente mediante el personalizador de Bootstrap.

Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More