"Untitled"
Bootstrap 4.1.1 Snippet by vianney

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> </div> </div> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Interfaz con Bootstrap</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <style> .boolean-indicator { width: 20px; height: 20px; border-radius: 50%; } .indicator-true { background-color: green; } .indicator-false { background-color: red; } </style> </head> <body> <div class="container mt-5"> <h2 class="text-center">Interfaz con Botones e Indicadores</h2> <!-- Sección de botones booleanos --> <div class="row mt-4"> <div class="col-md-4 text-center"> <button id="btn1" class="btn btn-primary" onclick="toggleBoolean(1)">Booleano 1</button> </div> <div class="col-md-4 text-center"> <button id="btn2" class="btn btn-primary" onclick="toggleBoolean(2)">Booleano 2</button> </div> <div class="col-md-4 text-center"> <button id="btn3" class="btn btn-primary" onclick="toggleBoolean(3)">Booleano 3</button> </div> </div> <!-- Indicadores booleanos --> <div class="row mt-4"> <div class="col-md-4 text-center"> <div id="indicator1" class="boolean-indicator indicator-false"></div> <p>Indicador 1</p> </div> <div class="col-md-4 text-center"> <div id="indicator2" class="boolean-indicator indicator-false"></div> <p>Indicador 2</p> </div> <div class="col-md-4 text-center"> <div id="indicator3" class="boolean-indicator indicator-false"></div> <p>Indicador 3</p> </div> </div> <!-- Controles numéricos --> <div class="row mt-4"> <div class="col-md-4 text-center"> <input type="number" id="numControl1" class="form-control" onchange="updateNumeric(1)"> <p>Control Numérico 1</p> </div> <div class="col-md-4 text-center"> <input type="number" id="numControl2" class="form-control" onchange="updateNumeric(2)"> <p>Control Numérico 2</p> </div> <div class="col-md-4 text-center"> <input type="number" id="numControl3" class="form-control" onchange="updateNumeric(3)"> <p>Control Numérico 3</p> </div> </div> <!-- Indicadores numéricos --> <div class="row mt-4"> <div class="col-md-4 text-center"> <h4 id="numIndicator1">0</h4> <p>Indicador Numérico 1</p> </div> <div class="col-md-4 text-center"> <h4 id="numIndicator2">0</h4> <p>Indicador Numérico 2</p> </div> <div class="col-md-4 text-center"> <h4 id="numIndicator3">0</h4> <p>Indicador Numérico 3</p> </div> </div> </div> <!-- JavaScript --> <script> const booleanStates = [false, false, false]; function toggleBoolean(index) { const indicator = document.getElementById(`indicator${index}`); booleanStates[index - 1] = !booleanStates[index - 1]; if (booleanStates[index - 1]) { indicator.classList.remove('indicator-false'); indicator.classList.add('indicator-true'); } else { indicator.classList.remove('indicator-true'); indicator.classList.add('indicator-false'); } } function updateNumeric(index) { const value = document.getElementById(`numControl${index}`).value; document.getElementById(`numIndicator${index}`).innerText = value; } </script> </body> </html>

Related: See More

Material Dashboard Pro Angular

Questions / Comments: