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 grupo de lista en MDBootstap Javascript.
El componente de grupo de botones de MDBootstrap se usa para envolver una serie de botones en una sola línea (barra de navegación) o apilarlos en una columna vertical, con el grupo de botones.
Sintaxis:
<div class="btn-group" role="group"> <button type="button" class="btn btn-color">1st</button> <button type="button" class="btn btn-color">2nd</button> <button type="button" class="btn btn-color">3rd</button> </div>
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 grupo de botones en Javascript MDBootstrap.
HTML
<!DOCTYPE html > <html lang="en"> <head> <title>Javascript MDBootstrap Button 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> <script type="text/javascript"></script> </head> <body> <div style="margin-left: 50px;"> <h2 style="margin-top: 50px;"> GeeksforGeeks </h2> <h4> MDBootstrap Javascript Button Group Component </h4> <br> <div class="btn-group" role="group"> <button type="button" class="btn btn-secondary">Left </button> <button type="button" class="btn btn-warning">Middle </button> <button type="button" class="btn btn-success">Right </button> </div> </div> </body> </html>
Producción:
Ejemplo 2: en este ejemplo, sabremos cómo crear el botón de estilo delineado usando el componente de grupo de botones en Javascript MDBootstrap.
HTML
<!DOCTYPE html > <html lang="en"> <head> <title>Javascript MDBootstrap Button 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> <script type="text/javascript"></script> </head> <body> <div style="margin-left: 50px;"> <h2 style="margin-top: 50px;"> GeeksforGeeks </h2> <h4> MDBootstrap Javascript Button Group Component </h4> <br> <div class="btn-group-vertical btn-group-lg" role="group"> <button type="button" class="btn btn-outline-secondary">Left </button> <button type="button" class="btn btn-outline-warning">Middle </button> <button type="button" class="btn btn-outline-success">Right </button> </div> </div> </body> </html>
Producción:
Referencia: https://mdbootstrap.com/docs/standard/components/button-group