Botones Guardar y Cancelar


                        <div class="row">
                        <div class="col-md-12">
                        <div class="btn-group pull-right" role="group">
                        <button id="button124" type="button" class="btn btn-primary">Guardar</button>
                        <button id="button122" type="button" class="btn btn-light">Cancelar</button>
                        </div>
                        </div>
                        </div>

Boton Interno


                        <div class="row">
                        <div class="col-md-12">
                        <div class="btn-group">
                        <button class="btn btn-interno">
                        Insertar
                        </button>
                        <button class="btn btn-interno">
                        Agregar
                        </button>
                        <button class="btn btn-interno">
                        Imprimir
                        </button>
                        </div>
                        </div>
                        </div>

Paginador


                        <nav aria-label="Page navigation example">
                        <ul class="pagination">
                        <li class="page-item"><a class="page-link" href="#">Prev.</a></li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item"><a class="page-link" href="#">Sig.</a></li>
                        </ul>
                        </nav>

Input File

Adjuntar Archivo: *


                        <div class="form-group">
                        	<label for="InputFile">Adjuntar Archivo:
                        		<span class="req"> *</span>
                        	</label>
                        <div class="controls">
                        	<div class="input-group">
                        	<input type="file" class="form-control" id="InputFile">
                        	<span class="input-group-addon">
                        	<span class="glyphicon glyphicon glyphicon-paperclip"></span>
                        </span>
                        	</div>
                        </div>
                        </div>

Input text

Dato de usuario: *


                        <div class="form-group">
                        <label class="control-label" for="field1">Dato de usuario:<span class="req"> *</span></label>
                        <div class="controls">
                        <input id="field1" class="form-control k-textbox" data-role="text" required="required" data-parsley-errors-container="#errId1" type="text"><span id="errId1" class="error"></span>
                        </div>
                        </div>

Input Date

Fecha: *


                        <div class="form-group">
                        <label class="control-label-left" for="field2">Fecha Factura
                        <span class="req"> *</span>
                        </label>
                        <div class="controls">
                        <span class="k-widget k-datepicker k-header form-control k-input" style="width: 100%;">
                        <span class="k-picker-wrap k-state-default">
                        <input id="field2" type="text" class="form-control k-input" data-role="date" role="combobox" aria-haspopup="true" aria-expanded="false" aria-owns="field2_dateview" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is null" data-error-container="#errfield2" style="width: 100%;" required="required" data-parsley-errors-container="#errId1">
                        <span unselectable="on" class="k-select" role="button" aria-controls="field2_dateview">
                        <span unselectable="on" class="k-icon k-i-calendar">select</span>
                        </span>
                        </span>
                        </span>
                        <span id="errId1" class="error"></span>
                        </div>
                        </div>

Dropdown

Lista desplegable *


                        <div class="form-group">
                        <label class="control-label-left" for="field5">Lista desplegable
                        <span class="req"> *</span>
                        </label>
                        <div class="controls">
                        <span class="k-widget k-dropdown k-header form-control" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-owns="field5_listbox" aria-disabled="false" aria-readonly="false" aria-busy="false" aria-activedescendant="field5_option_selected" style=""><span unselectable="on" class="k-dropdown-wrap k-state-default"><span unselectable="on" class="k-input"></span><span unselectable="on" class="k-select"><span unselectable="on" class="k-icon k-i-arrow-s">select</span></span></span><select id="field5" class="form-control" data-role="select" selected="selected" required="required" data-parsley-errors-container="#errId4" style="display: none;"><option value="" selected="selected"></option><option value="Option 1">Option 1</option><option value="Option 2">Option 2</option></select></span>
                        <span id="errId4" class="error"></span>
                        </div>
                        </div>

Input number

Campo númerico: *


                        <div class="form-group">
                        <label class="control-label-left" for="field10">Campo númerico:
                        <span class="req"> *</span>
                        </label>
                        <div class="controls">
                        <span class="k-widget k-numerictextbox form-control k-input" style="">
                        <span class="k-numeric-wrap k-state-default">
                        <input type="text" class="k-formatted-value form-control k-input" tabindex="0" aria-disabled="false" aria-readonly="false" style="" data-parsley-errors-container="#errId8">
                        <input id="field10" value="" type="text" class="form-control k-input" data-role="numeric" data-format="integer" role="spinbutton" aria-valuenow="" aria-disabled="false" aria-readonly="false" data-error-container="#errfield10" style="display: none;" required="required" data-parsley-errors-container="#errId8"><span class="k-select"><span unselectable="on" class="k-link"><span unselectable="on" class="k-icon k-i-arrow-n" title="Increase value">Increase value</span></span><span unselectable="on" class="k-link"><span unselectable="on" class="k-icon k-i-arrow-s" title="Decrease value">Decrease value</span></span></span>
                        </span>
                        </span>
                        <span id="errId8" class="error"></span>
                        </div>
                        </div>

Tabla

Nombre Programa	Acciones
Programa 1
Programa 2


                        <div class="table-responsive">
                        <table class="table table-hover table-striped table-bordered">
                        <thead>
                        <tr>
                        <th>Nombre Programa</th>
                        <th>Acciones</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                        <td>Programa 1</td>
                        <td><a href="#"><i class="fa fa-eye fa-2x" title="Ver"></i></a><a href="#"><i class="fa fa-pencil-square-o fa-2x" title="Editar"></i></a><a href="#"><i class="fa fa-trash fa-2x" title="Quitar"></i></a></td>
                        </tr>
                        <tr>
                        <td>Programa 2</td>
                        <td><a href="#"><i class="fa fa-eye fa-2x" title="Ver"></i></a><a href="#"><i class="fa fa-pencil-square-o fa-2x" title="Editar"></i></a><a href="#"><i class="fa fa-trash fa-2x" title="Quitar"></i></a></td>
                        </tr>
                        </tbody>
                        </table>
                        </div>

Iconos - Font Awesome


                        <i class="fa fa-eye fa-2x" title="Ver"></i>
                        <i class="fa fa-pencil-square-o fa-2x" title="Editar"></i>
                        <i class="fa fa-trash fa-2x" title="Quitar"></i>
                        <i class="fa fa-download fa-2x" title="Descargar"></i>

Gráficos (http://www.chartjs.org/)


                        <div id="canvas-holder">
                        <canvas id="chart-area1" width="300" height="300"></canvas>
                        </div>
                        

                        -------------------------
                        

                        <script src="../../js/chart.js"></script>
                        

                        -------------------------
                        

                        <script>
                        var ctx1 = document.getElementById("chart-area1");
                        var color = Chart.helpers.color;
                        var myChart = new Chart(ctx1, {
                        type: 'horizontalBar',
                        data: {
                        labels: ["", ""],
                        datasets: [
                        {label: '',backgroundColor: ['rgba(255, 99, 132, 0.2)','rgba(54, 162, 235, 0.2)'],  data: [16, 19]},
                        {label: '',backgroundColor: ['rgba(255, 99, 132, 0.2)','rgba(54, 162, 235, 0.2)'], data: [1, 14]}
                        ]
                        }
                        });
                        </script>

Modal


                        <div class="row">
                        <div class="col-md-12">
                        <div class="btn-group">
                        <!-- Button trigger modal -->
                        <button type="button" class="btn btn-interno" data-toggle="modal" data-target="#mymodal">
                        Modal
                        </button>
                        <!-- Modal -->
                        <div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                        <div class="modal-content">
                        <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="mymodalLabel">Modal</h4>
                        </div>
                        <div class="modal-body">
                        <p>HOLA MUNDO</p>
                        </div>
                        <div class="modal-footer">
                        <div class="row">
                        <div class="col-md-12">
                        <div class="btn-group pull-right">
                        <button type="button" class="btn btn-primary" onclick='' data-dismiss="modal">Guardar</button>
                        <button type="button" class="btn btn-light" onclick='' data-dismiss="modal">Cancelar</button>
                        </div>
                        </div>
                        </div>
                        </div>
                        </div>
                        </div>
                        </div>
                        </div>
                        </div>
                        </div>

Editor wysiwyg


                        <link type="text/css" rel="stylesheet" href="../../bootstrap3-wysihtml5-bower-master/dist/bootstrap3-wysihtml5.min.css">
                        

                        --------------
                        

                        <textarea id="mensajes"></textarea>
                        

                        --------------
                        

                        <script src="../../bootstrap3-wysihtml5-bower-master/dist/bootstrap3-wysihtml5.all.min.js"></script>
                        <script src="../../bootstrap3-wysihtml5-bower-master/dist/bootstrap3-wysihtml5.min.js"></script>
                        <script>
                        $('#mensajes').wysihtml5();
                        </script>

Bootstrap Select


                        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
                        

                        ------------------
                        

                        <select class="selectpicker select-ciclope">
                        <option>Mustard</option>
                        <option>Ketchup</option>
                        <option>Relish</option>
                        </select>
                        

                        ------------------
                        

                        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
                        <script>
                        $('.selectpicker').selectpicker({
                        style: 'btn-info',
                        size: 4
                        });
                        </script>

Bootstrap Multi Select y Live Search


                        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
                        

                        ------------------
                        

                        <select class="selectpicker select-ciclope" multiple data-live-search="true">
                        <option>Mustard</option>
                        <option>Ketchup</option>
                        <option>Relish</option>
                        </select>
                        

                        ------------------
                        

                        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
                        <script>
                        $('.selectpicker').selectpicker({
                        style: 'btn-info',
                        size: 4
                        });
                        </script>