<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-3"><div class="header">Property</div></div> <div class="col-md-2"><div class="header">Type</div></div> <div class="col-md-2"><div class="header">Required</div></div> <div class="col-md-5"><div class="header">Description</div></div> </div> <div class="row margin-0"> <div class="col-md-3"> <div class="cell"> <div class="propertyname"> CurrencyCode <span class="mobile-isrequired">[Required]</span> </div> </div> </div> <div class="col-md-2"> <div class="cell"> <div class="type"> <code>String</code> </div> </div> </div> <div class="col-md-2"> <div class="cell"> <div class="isrequired"> Yes </div> </div> </div> <div class="col-md-5"> <div class="cell"> <div class="description"> The standard ISO 4217 3-letter currency code </div> </div> </div> </div> <div class="row margin-0"> <div class="col-md-3"> <div class="cell"> <div class="propertyname"> PriceType <span class="mobile-isrequired">[Required]</span> </div> </div> </div> <div class="col-md-2"> <div class="cell"> <div class="type"> <code>Int32</code> </div> </div> </div> <div class="col-md-2"> <div class="cell"> <div class="isrequired"> Yes </div> </div> </div> <div class="col-md-5"> <div class="cell"> <div class="description"> The type of price </div> </div> </div> </div> <div class="row margin-0"> <div class="col-md-3"> <div class="cell"> <div class="propertyname"> WarehouseID <span class="mobile-isrequired">[Required]</span> </div> </div> </div> <div class="col-md-2"> <div class="cell"> <div class="type"> <code>Int32</code> </div> </div> </div> <div class="col-md-2"> <div class="cell"> <div class="isrequired"> Yes </div> </div> </div> <div class="col-md-5"> <div class="cell"> <div class="description"> The unique identifier for the warehouse </div> </div> </div> </div> <div class="row margin-0"> <div class="col-md-3"> <div class="cell"> <div class="propertyname"> ItemCodes </div> </div> </div> <div class="col-md-2"> <div class="cell"> <div class="type"> <code>String[]</code> </div> </div> </div> <div class="col-md-2"> <div class="cell"> <div class="isrequired"> <span class="text-muted">No</span> </div> </div> </div> <div class="col-md-5"> <div class="cell"> <div class="description"> </div> </div> </div> </div> <div class="row margin-0"> <div class="col-md-3"> <div class="cell"> <div class="propertyname"> LanguageID <a class="lookuplink" href="javascript:;"> <i class="glyphicon glyphicon-search"></i> </a> </div> </div> </div> <div class="col-md-2"> <div class="cell"> <div class="type"> <code>Int32?</code> </div> </div> </div> <div class="col-md-2"> <div class="cell"> <div class="isrequired"> <span class="text-muted">No</span> </div> </div> </div> <div class="col-md-5"> <div class="cell"> <div class="description"> The customer's preferred language ID (ex. 0 (English), 1 (Spanish), etc.) </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) { .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; }