{% extends 'UBVPrincipalBundle:Documentacion:inicio.html.twig' %}
{% block breadcums %}
  {{ parent() }}
  <li>
    <i class="fa fa-angle-right fa-fw"></i>
    <a>Tablas</a>
  </li>
{% endblock%}
{% block contenido %}
  <div class="row">
    <div class="col-lg-12">
      <div class="portlet">
        <div class="portlet-header">
          <div class="caption">Tabla Responsiva con rayas</div>
        </div>
        <div class="portlet-body">
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Titulo de campo</th>
                  <th>Titulo de campo</th>
                  <th>Titulo de campo</th>
                  <th>Titulo de campo</th>
                  <th>Titulo de campo</th>
                  <th>Titulo de campo</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="portlet">
        <div class="portlet-header">
          <div class="caption">Tabla todo en una</div>
        </div>
        <div class="portlet-body">
          <div class="table-responsive">
            <table class="table table-striped table-bordered table-hover">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Titulo de campo</th>
                  <th>Titulo de campo</th>
                  <th>Titulo de campo</th>
                  <th>Titulo de campo</th>
                  <th>Titulo de campo</th>
                  <th>Titulo de campo</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                </tr>
                <tr>
                  <td>4</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                </tr>
                <tr>
                  <td>5</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                </tr>
                <tr>
                  <td>6</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                  <td>Dato del campo</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <div class="portlet">
        <div class="portlet-header">
          <div class="caption">Tablas con Herramientas</div>
        </div>
        <div class="portlet-body">
          <div class="table-tools">
            <div class="row">
              <div class="col-lg-4">
                <button type="button" class="btn btn-red mrs"><i class="fa fa-plus"></i>&nbsp;
                  Add New
                </button>
                <button type="button" class="btn btn-primary mrs"><i
                    class="fa fa-print"></i>&nbsp; Print
                </button>
                <button type="button" class="btn btn-primary mrs"><i
                    class="fa fa-file-text-o"></i>&nbsp; PDF
                </button>
                <button type="button" class="btn btn-primary mrs"><i class="fa fa-copy"></i>&nbsp;
                  Excel
                </button>
              </div>
              <div class="col-lg-3 pull-right">
                <div class="form-inline pull-right">
                  <div class="form-group"><label class="control-label">Search:</label>&nbsp;<input
                      type="text" class="form-control"/></div>
                </div>
              </div>
            </div>
          </div>
          <div class="table-responsive mtl">
            <table class="table table-striped table-bordered table-hover">
              <thead>
                <tr>
                  <th>Titulo de campo</th>
                  <th>Titulo de campo</th>
                  <th>Titulo de campo</th>
                  <th>Titulo de campo</th>
                  <th>Titulo de campo</th>
                  <th width="3%" colspan="2">Acciones</th>
                </tr>
              </thead>
              <tbody>
                <tr class="odd gradeA">
                  <td>Trident</td>
                  <td>Internet
                    Explorer 5.5
                  </td>
                  <td>Win 95+</td>
                  <td class="center">5.5</td>
                  <td class="center">A</td>
                  <td><a href="javascript:;" class="edit">Edit</a></td>
                  <td><a href="javascript:;" class="delete">Delete</a></td>
                </tr>
                <tr class="even gradeA">
                  <td>Trident</td>
                  <td>Internet
                    Explorer 6
                  </td>
                  <td>Win 98+</td>
                  <td class="center">6</td>
                  <td class="center">A</td>
                  <td><a href="javascript:;" class="edit">Edit</a></td>
                  <td><a href="javascript:;" class="delete">Delete</a></td>
                </tr>
                <tr class="odd gradeA">
                  <td>Trident</td>
                  <td>Internet Explorer 7</td>
                  <td>Win XP SP2+</td>
                  <td class="center">7</td>
                  <td class="center">A</td>
                  <td><a href="javascript:;" class="edit">Edit</a></td>
                  <td><a href="javascript:;" class="delete">Delete</a></td>
                </tr>
                <tr class="even gradeA">
                  <td>Trident</td>
                  <td>AOL browser (AOL desktop)</td>
                  <td>Win XP</td>
                  <td class="center">6</td>
                  <td class="center">A</td>
                  <td><a href="javascript:;" class="edit">Edit</a></td>
                  <td><a href="javascript:;" class="delete">Delete</a></td>
                </tr>
                <tr class="gradeA">
                  <td>Gecko</td>
                  <td>Firefox 1.0</td>
                  <td>Win 98+ / OSX.2+</td>
                  <td class="center">1.7</td>
                  <td class="center">A</td>
                  <td><a href="javascript:;" class="edit">Edit</a></td>
                  <td><a href="javascript:;" class="delete">Delete</a></td>
                </tr>
                <tr class="gradeA">
                  <td>Gecko</td>
                  <td>Firefox 3.0</td>
                  <td>Win 2k+ / OSX.3+</td>
                  <td class="center">1.9</td>
                  <td class="center">A</td>
                  <td><a href="javascript:;" class="edit">Edit</a></td>
                  <td><a href="javascript:;" class="delete">Delete</a></td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="tool-footer text-right"><p class="pull-left">Showing 1 to 10 of 57
              entries</p>
            <ul class="pagination">
              <li><a href="#">&laquo;</a></li>
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">&raquo;</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}
{% block javascripts %}
  {{ parent() }}
{% endblock %}