Antes de trabajar con las clases de contorno de bootstrap, conozca un poco el contorno de los botones. Un contorno en los botones significa dar un contorno alrededor de los botones. Esta clase ‘.btn-outline’ elimina todos los colores o estilos de fondo del botón para darle al botón exterior un aspecto efectivo, más claro y resaltador. Básicamente, el botón de contorno es responsable de dibujar un borde resaltado alrededor del botón.
El contorno de los botones se utiliza para muchos propósitos, tales como:
- Para dar un aspecto efectivo a los botones.
- Para indicar una acción más allá del mecanismo de trabajo actual.
- Para dibujar contornos resaltados alrededor de los botones para dar un aspecto diferente al de los botones normales.
- Para hacer que un botón se destaque.
- Dar diferentes estilos para acciones en formularios y diálogos.
Enfoque: en Bootstrap 4 tiene las clases contextuales predeterminadas o la clase predefinida con la clase «.btn-outline» . Hay algunos botones de colores incorporados que describen las clases en bootstrap 4 que se utilizan para un propósito diferente.
Las clases de esquema de botón son:
- .btn-esquema-primario
- .btn-esquema-secundario
- .btn-esquema-éxito
- .btn-contorno-peligro
- .btn-contorno-advertencia
- .btn-esquema-info
- .btn-contorno-luz
- .btn-contorno-oscuro
Incluya Bootstrap4 y jQuery CDN en la etiqueta <head> antes que todas las demás hojas de estilo para cargar nuestro CSS.
<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” integridad=”sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm” origen cruzado=”anónimo” >
<guión src=”https://code.jquery.com/jquery-3.2.1.slim.min.js” integridad=”sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN” crossorigin=”anónimo”></script >
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js” integridad=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” crossorigin=” anónimo”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js” integridad=”sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl” crossorigin=” anónimo”></script>
Ejemplo 1: En este ejemplo, podemos ver todos los tipos de clases contextuales de esquema de botón en bootstrap y saber cómo se usa dentro de una página web.
HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content ="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity= "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity= "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity= "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity= "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"> </script> </head> <body> <div class="container"> <h1>Bootstrap Buttons Outline Examples</h1> <h5>There are some examples of buttons:-</h5> <br> <p> This is show Simple Button Outline<span> <button type="button" class="btn btn-outline-primary"> Primary </button> </span> </p> <br> <p> This is show Secondary Button Outline<span> <button type="button" class="btn btn-outline-secondary"> Secondary </button> </span> </p> <br> <p> This is show Success Button Outline<span> <button type="button" class="btn btn-outline-success"> Success </button> </span> </p> <br> <p> This is show Danger Button Outline<span> <button type="button" class="btn btn-outline-danger"> Danger </button> </span> </p> <br> <p> This is show Warning Button Outline<span> <button type="button" class="btn btn-outline-warning"> Warning </button> </span> </p> <br> <p> This is show Information Button Outline<span> <button type="button" class="btn btn-outline-info"> Info </button> </span> </p> <br> <p> This is show Light Button Outline<span> <button type="button" class="btn btn-outline-light"> Light </button> </span> </p> <br> <p> This is show Dark Button Outline<span> <button type="button" class="btn btn-outline-dark"> Dark </button> </span> </p> <br> </div> </body> </html>
Producción:
Tipos de esquema de botones en Bootstrap4
Ejemplo 2: En este ejemplo, usamos un control giratorio dentro del botón de contorno en el que los botones indican que una acción se está procesando o teniendo lugar actualmente.
HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content ="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <h1> Bootstrap Spinner Button Examples in Bootstrap </h1> <p>There are some examples of Spinner Button </p> <button type="button" class="btn btn-lg btn-outline"> <div class="spinner-border"> </div> </button> <br><br> <button type="button" class="btn btn-lg btn-outline-primary"> <div class="spinner-border"> </div> </button> <button type="button" class="btn btn-lg btn-outline-success"> <div class="spinner-border"> </div> </button> <button type="button" class="btn btn-lg btn-outline-warning"> <div class="spinner-border"> </div> </button> <button type="button" class="btn btn-lg btn-outline-danger"> <div class="spinner-border"> </div> </button> <button type="button" class="btn btn-lg btn-outline-info"> <div class="spinner-border"> </div> </button> <button type="button" class="btn btn-lg btn-outline-dark"> <div class="spinner-border"> </div> </button> <button type="button" class="btn btn-lg btn-outline-success"> <div class="spinner-border"> </div> </button> </div> </body> </html>
Producción:
Bootstrap Spinner dentro de un botón
Ejemplo 3: En este ejemplo, podemos ver clases contextuales de contorno de botón con diferentes glyphicons y tamaños.
HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity= "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> </script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity= "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"> </script> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="container"> <h1> Bootstrap Buttons Outline Examples in Different size </h1> <p> There are some examples of buttons outline with different icons and different size:- </p> <button type="button" class ="btn btn-sm btn-outline-primary"> <i class="fa fa-home"></i> </button> <button type="button" class ="btn btn-md btn-outline-primary"> <i class="fa fa-home"></i> </button> <button type="button" class= "btn btn-lg btn-outline-primary"> <i class="fa fa-home"></i> </button><br><br> <button type="button" class= "btn btn-sm btn-outline-success"> Home </button> <button type="button" class= "btn btn-md btn-outline-success"> Home </button> <button type="button" class= "btn btn-lg btn-outline-success"> Home </button> <br><br> <button type="button" class= "btn btn-sm btn-outline-danger"> <i class="fa fa-home"></i> Home </button> <button type="button" class= "btn btn-md btn-outline-danger"> <i class="fa fa-home"></i> Home </button> <button type="button" class= "btn btn-lg btn-outline-danger"> <i class="fa fa-home"></i> Home </button><br><br> <button type="button" class= "btn btn-lg btn-outline-primary"> <i class="fa fa-asterisk"></i> </button> <button type="button" class= "btn btn-lg btn-outline-success"> <i class="fa fa-circle"></i> </button> <button type="button" class= "btn btn-lg btn-outline-warning"> <i class="fa fa-square"></i> </button> <button type="button" class= "btn btn-lg btn-outline-danger"> <i class="fa fa-heart"></i> </button> <button type="button" class= "btn btn-lg btn-outline-info"> <i class="fa fa-battery"></i> </button> <button type="button" class= "btn btn-lg btn-outline-dark"> <i class="fa fa-bell"></i> </button> </div> </body> </html>
Producción:
Botones de contorno de Bootstrap con diferentes tamaños e iconos en Bootstrap.
Publicación traducida automáticamente
Artículo escrito por khushiguptakhushi02 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA