"UsuarioSimple"
Bootstrap 4.1.1 Snippet by BrianRomero

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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Panel de Control</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container mt-5"> <h1 class="text-center mb-4">Panel de Control</h1> <!-- Fila para los switches booleanos --> <div class="row mb-4"> <div class="col-md-4"> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="switch1"> <label class="form-check-label" for="switch1">Control Booleano 1</label> </div> </div> <div class="col-md-4"> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="switch2"> <label class="form-check-label" for="switch2">Control Booleano 2</label> </div> </div> <div class="col-md-4"> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="switch3"> <label class="form-check-label" for="switch3">Control Booleano 3</label> </div> </div> </div> <!-- Fila para los indicadores booleanos --> <div class="row mb-4"> <div class="col-md-4"> <div class="card text-center"> <div class="card-body"> <h5 class="card-title">Indicador Booleano 1</h5> <span id="bool-indicator1" class="badge bg-secondary">OFF</span> </div> </div> </div> <div class="col-md-4"> <div class="card text-center"> <div class="card-body"> <h5 class="card-title">Indicador Booleano 2</h5> <span id="bool-indicator2" class="badge bg-secondary">OFF</span> </div> </div> </div> <div class="col-md-4"> <div class="card text-center"> <div class="card-body"> <h5 class="card-title">Indicador Booleano 3</h5> <span id="bool-indicator3" class="badge bg-secondary">OFF</span> </div> </div> </div> </div> <!-- Fila para los controles numéricos --> <div class="row mb-4"> <div class="col-md-4"> <label for="num-control1" class="form-label">Control Numérico 1</label> <input type="number" class="form-control" id="num-control1" value="0"> </div> <div class="col-md-4"> <label for="num-control2" class="form-label">Control Numérico 2</label> <input type="number" class="form-control" id="num-control2" value="0"> </div> <div class="col-md-4"> <label for="num-control3" class="form-label">Control Numérico 3</label> <input type="number" class="form-control" id="num-control3" value="0"> </div> </div> <!-- Fila para los indicadores numéricos --> <div class="row"> <div class="col-md-4"> <h5>Indicador Numérico 1: <span id="num1">0</span></h5> </div> <div class="col-md-4"> <h5>Indicador Numérico 2: <span id="num2">0</span></h5> </div> <div class="col-md-4"> <h5>Indicador Numérico 3: <span id="num3">0</span></h5> </div> </div> </div> </body> </html>

Related: See More

Argon Design System

Questions / Comments: