En muchos sitios web, notamos que hay grandes botones a nivel de bloque que se usan para realizar algún trabajo cuando el usuario hace clic en ellos. Esto se usa para activar algunas funciones o redirigir al usuario a un enlace diferente. Los botones de bloque son la pila receptiva de botones de ancho completo. Usaremos el siguiente enfoque para crear este tipo de botones.
Enfoque: La clase btn seguida de clases contextuales se utiliza para crear botones en el sitio web. Algunas de las clases btn son btn-block, btn-lg, btn-primary, btn-success, btn-warning, etc. btn-block se usa para botones de nivel de bloque y btn-success, btn-warning y btn-primary son para el color verde, amarillo y azul del botón.
A continuación se muestra el procedimiento para implementar un botón de bloqueo simple en Bootstrap.
Paso 1: Incluya Bootstrap 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.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>
Paso 2: Agregaremos el tipo como botón y agregaremos las clases btn, btn-primary, btn-lg y btn-block . Luego escribiremos el texto que se verá en el botón.
<button type="button" class="btn
btn-primary btn-lg btn-block">
Click Here
</button>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" /> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script> </head> <body> <h2 class="text-center">GeeksForGeeks</h2> <br><br> <div class="text-center">Block Button</div> <br><br> <button type="button" class="btn btn-primary btn-lg btn-block"> Click Here </button> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rahuln19becs y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA