<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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">
<h2>Mobile-Friendly API Documentation</h2>
<p class="lead">
Emulate tables that collapse beautifully on mobile devices!
</p>
<div class="alert alert-info">
<h4>Row modifier class included</h4>
<p>This feature uses a row modifier I created called ".margin-0". When applied to a ".row" element, it will ensure the margins between the columns will be 0. </p>
<p>This is important in order to emulate the table-like effect, but it will work in any environment.</p>
</div>
<hr />
<div class="method">
<div class="row margin-0 list-header hidden-sm hidden-xs">
<div class="col-md-5"><div class="header">Nombre</div></div>
<div class="col-md-3"><div class="header">Fecha de publicación</div></div>
<div class="col-md-2"><div class="header">Estado</div></div>
<div class="col-md-1"><div class="header">Editar</div></div>
<div class="col-md-1"><div class="header">Eliminar</div></div>
</div>
<div class="row margin-0">
<div class="col-md-5">
<div class="cell">
<div class="propertyname">
Barcelona + Man City + Bayern de Múnich
</div>
</div>
</div>
<div class="col-md-3">
<div class="cell">
<div class="type">
<code>13-Dec-2014</code>
</div>
</div>
</div>
<div class="col-md-2">
<div class="cell">
<div class="isrequired">
<span class="label label-danger">Perdida</span>
</div>
</div>
</div>
<div class="col-md-1">
<div class="cell">
<div class="description">
Editar
</div>
</div>
</div>
<div class="col-md-1">
<div class="cell">
<div class="description">
Eliminar
</div>
</div>
</div>
</div>
<div class="row margin-0">
<div class="col-md-5">
<div class="cell">
<div class="propertyname">
Barcelona + Man City + Bayern de Múnich
</div>
</div>
</div>
<div class="col-md-3">
<div class="cell">
<div class="type">
<code>13-Dec-2014</code>
</div>
</div>
</div>
<div class="col-md-2">
<div class="cell">
<div class="description">
<span class="label label-danger">Perdida</span>
</div>
</div>
</div>
<div class="col-md-1">
<div class="cell">
<div class="description accion">
Editar
</div>
</div>
</div>
<div class="col-md-1">
<div class="cell">
<div class="description accion">
Eliminar
</div>
</div>
</div>
</div>
</div>
</div>
/* Methods */
.method .header, .method .cell {
padding: 6px 6px 6px 10px; }
.method .list-header .header {
font-weight: normal;
text-transform: uppercase;
font-size: 0.8em;
color: #999;
background-color: #eee; }
.method [class^="row"],
.method [class*=" row"] {
border-bottom: 1px solid #ddd; }
.method [class^="row"]:hover,
.method [class*=" row"]:hover {
background-color: #f7f7f7; }
.method .cell {
font-size: 0.85em; }
.method .cell .mobile-isrequired {
display: none;
font-weight: normal;
text-transform: uppercase;
color: #aaa;
font-size: 0.8em; }
.method .cell .propertyname {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.method .cell .type {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.method .cell code {
color: #428bca; }
.method .cell a, .method .cell a:hover {
text-decoration: none; }
.method .cell code.custom {
color: #8a6d3b;
text-decoration: none; }
.method .cell .text-muted {
color: #ddd; }
@media (max-width: 991px) {
.accion{
float: right;
}
.method [class^="row"],
.method [class*=" row"] {
padding-top: 10px;
padding-bottom: 10px; }
.method .cell {
padding: 0 10px; }
.method .cell .propertyname {
font-weight: bold;
font-size: 1.2em; }
.method .cell .propertyname .lookuplink {
font-weight: normal;
font-size: 1.5em;
position: absolute;
top: 0;
right: 10px; }
.method .cell .type {
padding-left: 10px;
font-size: 1.1em; }
.method .cell .isrequired {
padding-left: 10px;
display: none; }
.method .cell .description {
padding-left: 10px; }
.method .cell .mobile-isrequired {
display: inline; } }
/* Row Utilities */
[class^='row'].margin-0,
[class*=' row'].margin-0,
[class^='form-group'].margin-0,
[class*=' form-group'].margin-0 {
margin-left: -0px;
margin-right: -0px; }
[class^='row'].margin-0 > [class^='col-'],
[class^='row'].margin-0 > [class*=' col-'],
[class*=' row'].margin-0 > [class^='col-'],
[class*=' row'].margin-0 > [class*=' col-'],
[class^='form-group'].margin-0 > [class^='col-'],
[class^='form-group'].margin-0 > [class*=' col-'],
[class*=' form-group'].margin-0 > [class^='col-'],
[class*=' form-group'].margin-0 > [class*=' col-'] {
padding-right: 0px;
padding-left: 0px; }
[class^='row'].margin-0 [class^='row'],
[class^='row'].margin-0 [class*=' row'],
[class^='row'].margin-0 [class^='form-group'],
[class^='row'].margin-0 [class*=' form-group'],
[class*=' row'].margin-0 [class^='row'],
[class*=' row'].margin-0 [class*=' row'],
[class*=' row'].margin-0 [class^='form-group'],
[class*=' row'].margin-0 [class*=' form-group'],
[class^='form-group'].margin-0 [class^='row'],
[class^='form-group'].margin-0 [class*=' row'],
[class^='form-group'].margin-0 [class^='form-group'],
[class^='form-group'].margin-0 [class*=' form-group'],
[class*=' form-group'].margin-0 [class^='row'],
[class*=' form-group'].margin-0 [class*=' row'],
[class*=' form-group'].margin-0 [class^='form-group'],
[class*=' form-group'].margin-0 [class*=' form-group'] {
margin-left: 0;
margin-right: 0; }
