<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 ----------> <div class="container-fluid adm-archivos"> <div class="barra row">Administrador de archivos</div><br> <div class="row"> <div class="col-md-8"></div> <div class="col-md-4"> <a class="btn btn-primary btn-block">Volver a Javascript o CSS antes de BODY <span class="glyphicon glyphicon-chevron-up"></span></a><br> </div> </div> <div class="row"> <div class="col-md-9"> <div class="archivo-ubicacion"> <div class="col-md-2 archivo-ubicacion-label bg-primary">Ubicación actual</div> <div class="col-md-10 archivo-ubicacion-data">c:\tugaFiles//prueba</div> </div> </div> <div class="col-md-3"> <a href="#" class="btn btn-primary btn-block">Ir a nivel superior <span class="glyphicon glyphicon-chevron-up"></span></a> </div> </div> <br> <div class="row"> <div class="col-md-12"> <div class="panel panel-default"> <div class="panel-heading text-center"> <span><strong><span class="glyphicon glyphicon-folder-open"> </span> Archivos</strong></span> </div> <table class="table table-bordered table-hover vmiddle"> <thead> <tr> <th></th> <th></th> <th>Nombre</th> <th>Acciones</th> <th>Tamaño</th> <th>Fecha</th> </tr> </thead> <tbody> <tr> <td class="text-center"> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> </label> </div> </td> <td class="text-center"><span class="glyphicon glyphicon-file"></span></td> <td>Listado General de Personas</td> <td class="text-center"> <a href="#"><span class="btn btn-sm btn-danger glyphicon glyphicon-trash"></span></a> <a href="#"><span class="btn btn-sm btn-primary glyphicon glyphicon-pencil"></span></a> <a href="#"><span class="btn btn-sm btn-warning glyphicon glyphicon-info-sign"></span></a> </td> <td>523.0 KB </td> <td>16-sep-16 09:48:2</td> </tr> <tr> <td class="text-center"> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> </label> </div> </td> <td class="text-center"><span class="glyphicon glyphicon-folder-close"></span></td> <td>Carta de Entrega</td> <td class="text-center"> <a href="#"><span class="btn btn-sm btn-danger glyphicon glyphicon-trash"></span></a> <a href="#"><span class="btn btn-sm btn-primary glyphicon glyphicon-pencil"></span></a> <a href="#"><span class="btn btn-sm btn-warning glyphicon glyphicon-info-sign"></span></a> </td> <td>523.0 KB </td> <td>16-sep-16 09:48:2</td> </tr> <tr> <td class="text-center"> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> </label> </div> </td> <td class="text-center"><span class="glyphicon glyphicon-compressed"></span></td> <td>Carta de Entrega</td> <td class="text-center"> <a href="#"><span class="btn btn-sm btn-danger glyphicon glyphicon-trash"></span></a> <a href="#"><span class="btn btn-sm btn-primary glyphicon glyphicon-pencil"></span></a> <a href="#"><span class="btn btn-sm btn-warning glyphicon glyphicon-info-sign"></span></a> </td> <td>523.0 KB </td> <td>16-sep-16 09:48:2</td> </tr> </tbody> </table> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="panel panel-default"> <div class="panel-heading text-center"> <span><strong><span class="glyphicon glyphicon-hdd"></span> Manejo de archivos</strong> </span> </div> <div class="panel-body"> <div class="col-md-6"> <div class="form-group"> <label>Nombre de archivo o carpeta</label> <input type="text" class="form-control"> <br> <div> <a class="btn btn-default">Renombrar</a> <a class="btn btn-default">Crear carpeta</a> <a class="btn btn-default">Crear archivo</a> </div> </div> <br> <div class="form-group"> <div class="form-group"> <label>Mover a la carpeta</label> <select class="form-control" id="" name=""> <option value="volvo"> Volvo </option> <option value="saab"> Saab </option> <option value="mercedes"> Mercedes </option> <option value="audi"> Audi </option> </select> </div> <a href="#" class="btn btn-primary">Mover</a> </div> </div> <div class="col-md-6 subir-archivos"> <div class="form-group"> <label>Subir archivos</label> <div class="input-group"> <input placeholder="" type="text" class="form-control carga-archivo-filename" disabled="disabled"> <!-- don't give a name === doesn't send on POST/GET --> <span class="input-group-btn"> <!-- image-preview-input --> <div class="btn btn-default carga-archivo-input"> <span class="glyphicon glyphicon-folder-open"></span> <span class="carga-archivo-input-title">Seleccionar archivo</span> <input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview" /> <!-- rename it --> </div> </span> </div> </div> <div class="form-group"> <div class="input-group image-preview"> <input placeholder="" type="text" class="form-control carga-archivo-filename" disabled="disabled"> <span class="input-group-btn"> <div class="btn btn-default carga-archivo-input"> <span class="glyphicon glyphicon-folder-open"></span> <span class="carga-archivo-input-title">Seleccionar archivo</span> <input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview" /> </div> </span> </div> </div> <div class="form-group"> <div class="input-group image-preview"> <input placeholder="" type="text" class="form-control carga-archivo-filename" disabled="disabled"> <span class="input-group-btn"> <div class="btn btn-default carga-archivo-input"> <span class="glyphicon glyphicon-folder-open"></span> <span class="carga-archivo-input-title">Seleccionar archivo</span> <input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview" /> </div> </span> </div> </div> <div class="form-group"> <div class="input-group image-preview"> <input placeholder="" type="text" class="form-control carga-archivo-filename" disabled="disabled"> <span class="input-group-btn"> <div class="btn btn-default carga-archivo-input"> <span class="glyphicon glyphicon-folder-open"></span> <span class="carga-archivo-input-title">Seleccionar archivo</span> <input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview" /> </div> </span> </div> </div> <div class="row"> <div class="col-md-6"> <div class="col-md-6"> Espacio utilizado </div> <div class="col-md-6"> 523.0 KB </div> </div> <div class="col-md-6"> <a class="btn btn-primary btn-block" href="#">Subir archivo</a> </div> </div> </div> </div> </div> <div class"col-md-12"> <p class="text-center bg-warning well">Error</p> </div> </div> </div> </div> </div>

table.vmiddle>tbody>tr>td{ vertical-align:middle; } .barra { color: #FFFFFF; display: block; font-weight: bold;http://bootsnipp.com/user/snippets/z79Nl# margin-bottom: -1px; height: 59px; text-align: center; font-size: 23px; background-color: #0072b0; line-height: 55px; position: relative; } .highlight { padding: 9px 14px; margin-bottom: 14px; background-color: #f7f7f9; border: 1px solid #e1e1e8; border-radius: 4px; } .archivo-ubicacion{ overflow:hidden; height:35px; } .archivo-ubicacion div{ height:100%; line-height:35px; } .archivo-ubicacion-label{ font-weight:bold; font-size:15px; } .archivo-ubicacion-data{ border:1px solid #ddd; border-left:0 } .subir-archivos{ background: #f8f8f8; padding-top: 10px; padding-bottom:10px; border-radius: 5px; } .carga-archivo-input { position: relative; overflow: hidden; margin: 0px; color: #333; background-color: #fff; border-color: #ccc; } .carga-archivo-input input[type=file] { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); } .carga-archivo-input-title { margin-left:2px; }