Componente de botones Javascript MDBootstrap

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:

MDBootstrap Javascript Buttons Component

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:

MDBootstrap Javascript Buttons Component

Referencia: https://mdbootstrap.com/docs/standard/components/buttons/

Publicación traducida automáticamente

Artículo escrito por taran910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *