"Cliente existente"
Bootstrap 3.3.0 Snippet by jordonez

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <br/> <div class="container"> <!-- PANEL DATOS CLIENTES --> <div class="row"> <div class="panel panel-primary"> <div class="panel-heading"> <h4 class="panel-title"> <span class="glyphicon glyphicon-user" aria-hidden="true"></span> <a data-toggle="collapse" href="#collapse0"> Datos del cliente <span class="glyphicon glyphicon-chevron-up pull-right"></span></a> </h4> </div> <div id="collapse0" class="panel-collapse collapse in"> <div class="panel-body"> <form class="form-horizontal"> <fieldset> <div class="row"> <div class="col-md-6"> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Nro. Documento</label> <div class="col-md-4"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm"> </div> </div> </div> <div class="col-md-6"> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Apellido y Nombre</label> <div class="col-md-8"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm"> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Fecha Nacimiento</label> <div class="col-md-4"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm"> </div> </div> </div> <div class="col-md-6"> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Edad</label> <div class="col-md-2"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm"> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Domicilio</label> <div class="col-md-6"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm"> </div> </div> </div> <div class="col-md-4"> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Localidad</label> <div class="col-md-8"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm"> </div> </div> </div> <div class="col-md-2"> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">CP</label> <div class="col-md-8"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm"> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Barrio</label> <div class="col-md-4"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm"> </div> </div> </div> <div class="col-md-6"> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Telefono</label> <div class="col-md-5"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm"> </div> </div> </div> </div> </fieldset> </form> </div> </div> </div> </div> <!-- FIN PANEL DATOS CLIENTE --> <!-- PANEL DATOS LABORALES --> <div class="row"> <div class="panel panel-primary"> <div class="panel-heading"> <h4 class="panel-title"> <span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span> <a data-toggle="collapse" href="#collapse1">Datos laborales <span class="glyphicon glyphicon-chevron-up pull-right"></span></a> </h4> </div> <div id="collapse1" class="panel-collapse collapse in"> <div class="panel-body"> <form class="form-horizontal"> <fieldset> <div class="row"> <div class="col-md-4"> <!-- Select Basic --> <div class="form-group"> <label class="col-md-3 control-label" for="selectbasic">Actividad</label> <div class="col-md-9"> <select id="selectbasic" name="selectbasic" class="form-control input-sm"> <option value="1">Option one</option> <option value="2">Option two</option> </select> </div> </div> </div> <div class="col-md-4"> <div class="form-group"> <label class="col-md-3 control-label" for="selectbasic">Profesión</label> <div class="col-md-8"> <select id="selectbasic" name="selectbasic" class="form-control input-sm"> <option value="1">Option one</option> <option value="2">Option two</option> </select> </div> </div> </div> <div class="col-md-4"> <div class="form-group"> <label class="col-md-6 control-label" for="selectbasic">Fecha Ingreso</label> <div class="col-md-6"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm"> </div> </div> </div> </div> <div class="row"> <div class="col-md-4"> <!-- Select Basic --> <div class="form-group"> <label class="col-md-3 control-label" for="selectbasic">Categoria Monotributo</label> <div class="col-md-9"> <select id="selectbasic" name="selectbasic" class="form-control input-sm"> <option value="1">Option one</option> <option value="2">Option two</option> </select> </div> </div> </div> <div class="col-md-4"> </div> <div class="col-md-4"> <div class="form-group"> <label class="col-md-6 control-label" for="selectbasic">Ingresos</label> <div class="col-md-6"> <div class="input-group"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm text-left"> <div class="input-group-btn text-left"> <button class="btn btn-default btn-sm" type="button"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> </button> </div> </div> </div> </div> </div> </div> <div class="row"> <!-- Textarea --> <div class="col-md-10"> <div class="form-group"> <label class="col-md-2 control-label" for="textarea">Detalle Actividades</label> <div class="col-md-10"> <textarea class="form-control input-sm" id="textarea" name="textarea"></textarea> </div> </div> </div> <div class="col-md-2"> <!-- Button --> <div class="form-group"> <div class="col-md-4"> <button id="singlebutton" name="singlebutton" class="btn btn-info"> Reconsultar <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> </button> </div> </div> </div> </div> </fieldset> </form> </div> </div> </div> </div> <!-- FIN PANEL DATOS LABORALES --> <!-- PANEL DATOS COMERCIALES --> <div class="row"> <div class="panel panel-primary"> <div class="panel-heading"> <h4 class="panel-title"> <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> <a data-toggle="collapse" href="#collapse2">Datos Comerciales <span class="glyphicon glyphicon-chevron-up pull-right"></span></a> </h4> </div> <div id="collapse2" class="panel-collapse collapse in"> <div class="panel-body"> <form class="form-horizontal"> <div class="row"> <div class="col-md-4"> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Calificación</label> <div class="col-md-8"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm"> </div> </div> </div> <div class="col-md-6"> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Máx. Nivel Historico</label> <div class="col-md-3"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm"> </div> </div> </div> </div> <div class="row"> <div class="col-md-4"> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Utilizado</label> <div class="col-md-8"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm"> </div> </div> </div> <div class="col-md-6"> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Nivel Actual Confina</label> <div class="col-md-3"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm"> </div> </div> </div> </div> <div class="row"> <div class="col-md-4"> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Contacto</label> <div class="col-md-8"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm"> </div> </div> </div> <div class="col-md-6"> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Nivel Actual Musimundo</label> <div class="col-md-3"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm"> </div> </div> </div> </div> </form> </div> </div> </div> </div> <!-- FIN PANEL DATOS COMERCIALES --> <!-- PANEL DATOS CONSULTA CES --> <div class="row"> <div class="panel panel-primary"> <div class="panel-heading"> <h4 class="panel-title"> <span class="glyphicon glyphicon-search" aria-hidden="true"></span> <a data-toggle="collapse" href="#collapse3">Datos Consulta CES <span class="glyphicon glyphicon-chevron-up pull-right"></span></a> </h4> </div> <div id="collapse3" class="panel-collapse collapse in"> <div class="panel-body"> <form class="form-horizontal"> <div class="row"> <div class="col-md-8"> <div class="row"> <div class="col-md-6"> <!-- Text input--> <div class="form-group"> <label class="col-md-5 control-label" for="textinput">Nro. Transacción</label> <div class="col-md-7"> <input id="textinput" name="textinput" readonly="true" type="text" placeholder="" class="form-control input-sm"> </div> </div> </div> <div class="col-md-6"> <div class="row"> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Disponible</label> <div class="col-md-8"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm"> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Dictámen</label> <div class="col-md-8"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm"> </div> </div> </div> <div class="col-md-6"> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput"> Inf. Adic. </label> <button type="button" class="btn btn-primary btn-xs" data-toggle="popover" data-trigger="focus" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?"> <i class="glyphicon glyphicon-info-sign"></i> </button> </div> </div> </div> <div class="row"> <div class="col-md-6"> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Motivo</label> <div class="col-md-8"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm"> </div> </div> </div> <div class="col-md-6"> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput"> Inf. Cuotas. </label> <button type="button" class="btn btn-primary btn-xs" data-toggle="popover" data-trigger="focus" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?"> <i class="glyphicon glyphicon-info-sign"></i> </button> </div> </div> </div> <div class="row"> <div class="col-md-6"> <!-- Text input--> <div class="form-group"> <label class="col-md-5 control-label" for="textinput">Nivel de Riesgo</label> <div class="col-md-7"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm"> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Limite</label> <div class="col-md-8"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm"> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Cuota</label> <div class="col-md-8"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm"> </div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Cuota Máx.</label> <div class="col-md-8"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm"> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Flexibilidad</label> <div class="col-md-8"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm"> </div> </div> </div> <div class="col-md-6"> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Solicitado</label> <div class="col-md-8"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm"> </div> </div> </div> </div> </div> <div class="col-md-4"> <div class="error-notice"> <div class="oaerror success"> Validacion: <strong>OK</strong> </div> <div class="oaerror success"> Requisitos: <strong>OK</strong> </div> <div class="oaerror success"> Informe: <strong>OK</strong> </div> <div class="oaerror success"> Score: <strong>OK</strong> </div> <div class="oaerror danger"> Limite: <strong>NO</strong> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <!-- Textarea --> <div class="form-group"> <label class="col-md-2 control-label" for="textarea">Explicación</label> <div class="col-md-10"> <textarea class="form-control" id="textarea" name="textarea"></textarea> </div> </div> </div> </div> </form> </div> </div> </div> </div> <!-- FIN PANEL DATOS CONSULTA CES --> <div class="row"> <div class="text-center"> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> Siguiente</button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> Verificar Consulta CES</button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-comment" aria-hidden="true"></span> Observación</button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Cancela</button> </div> </div> </div> <br/> </div>
.error-notice { margin: 2px 2px; /* Making sure to keep some distance from all side */ } .oaerror { width: 100%; /* Configure it fit in your design */ margin: 0 auto; /* Centering Stuff */ background-color: #FFFFFF; /* Default background */ padding: 10px; border: 1px solid #eee; border-left-width: 2px; border-radius: 3px; margin: 0 auto; font-family: 'Open Sans', sans-serif; font-size: 12px; } .danger { border-left-color: #d9534f; /* Left side border color */ background-color: rgba(217, 83, 79, 0.1); /* Same color as the left border with reduced alpha to 0.1 */ } .danger strong { color: #d9534f; } .warning { border-left-color: #f0ad4e; background-color: rgba(240, 173, 78, 0.1); } .warning strong { color: #f0ad4e; } .info { border-left-color: #5bc0de; background-color: rgba(91, 192, 222, 0.1); } .info strong { color: #5bc0de; } .success { border-left-color: #2b542c; background-color: rgba(43, 84, 44, 0.1); } .success strong { color: #2b542c; } .btn-circle { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 15px; } .btn-circle.btn-lg { width: 50px; height: 50px; padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 25px; } .btn-circle.btn-xl { width: 70px; height: 70px; padding: 10px 16px; font-size: 24px; line-height: 1.33; border-radius: 35px; }
$(function () { $('[data-toggle="popover"]').popover() }) $('.popover-dismiss').popover({ trigger: 'focus' })

Related: See More

Light Bootstrap Dashboard PRO React

Questions / Comments: