MDBootstrap es una biblioteca de interfaz de usuario Javascript basada en diseño de materiales y bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar. Es gratis para uso personal y comercial. En este artículo, sabremos cómo usar el componente de botones en Javascript MDBootstap.
MDBootstrap Buttons Component son los botones receptivos, creados con Bootstrap 5, facilitan los estilos de botones predefinidos, es decir, advertencia, información y peligro para múltiples tipos de botones, como contorno, redondeado, social, flotante, fijo, etiquetas, etc.
Sintaxis:
<button type="button" class="btn btn-primary"> Button </button>
Acercarse:
- Descarga Javascript MDBootstrap desde el sitio oficial .
- Extraiga los archivos al directorio de trabajo actual.
- En el archivo Index.html, especifique la ruta del archivo descargado en la etiqueta <head>.
<enlace rel=”icono” href=”img/mdb-favicon.ico” type=”image/x-icon” /> <enlace rel
=”hoja de estilo” href=”https://use.fontawesome.com/releases /v5.15.2/css/all.css” />
<enlace rel=”hoja de estilo” href=
“https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display =intercambiar”/>
<enlace rel=”hoja de estilo” href=”css/mdb.min.css” />
<script type=”text/javascript” src=”js/mdb.min.js”></script>
<tipo de script=”texto/javascript”></script>
Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente de botones en MDBootstrap Javascript.
HTML
<!DOCTYPE html > <html lang="en"> <head> <title>Javascript MDBootstrap List Group Component</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" /> <link rel="stylesheet" href= "https://use.fontawesome.com/releases/v5.15.2/css/all.css" /> <link rel="stylesheet" href= "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" /> <link rel="stylesheet" href="css/mdb.min.css" /> <script type="text/javascript" src="js/mdb.min.js"> </script> </head> <body> <div style="margin-left: 50px;"> <h2 style="margin-top: 50px;"> GeeksforGeeks </h2> <h4> MDBootstrap Javascript Buttons Component </h4> <br> <button type="button" class="btn btn-danger btn-rounded btn-lg"> Button </button> <button type="button" class="btn btn-warning btn-rounded btn-lg"> Button </button> <button type="button" class="btn btn-info btn-rounded btn-lg"> Button </button> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, sabremos cómo agregar contenido adicional al componente de botones en MDBootstrap Javascript.
HTML
<!DOCTYPE html > <html lang="en"> <head> <title>Javascript MDBootstrap List Group Component</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" /> <link rel="stylesheet" href= "https://use.fontawesome.com/releases/v5.15.2/css/all.css" /> <link rel="stylesheet" href= "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" /> <link rel="stylesheet" href="css/mdb.min.css" /> <script type="text/javascript" src="js/mdb.min.js"> </script> </head> <body> <div style="margin-left: 50px;"> <h2 style="margin-top: 50px;"> GeeksforGeeks </h2> <h4> MDBootstrap Javascript Buttons Component </h4> <br> <button type="button" class="btn btn-outline-danger btn-rounded btn-lg"> Button </button> <button type="button" class="btn btn-warning btn-rounded disabled"> Button </button> <div class="d-grid gap-2 col-6 mx-auto"> <button class="btn btn-secondary btn-rounded" type="button"> Button </button> </div> </div> </body> </html>
Producción:
Referencia: https://mdbootstrap.com/docs/standard/components/buttons/