Bootstrap Snippet Mobile-Friendly API Documentation using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Mobile-Friendly API Documentation"
Bootstrap 3.2.0 Snippet by travislaynewilson

Related: See More

Questions / Comments:

"Mobile-Friendly API Documentation" Bootstrap 3.2.0 Snippet by travislaynewilson

Related: See More

Questions / Comments:

"Mobile-Friendly API Documentation"
Bootstrap 3.2.0 Snippet by travislaynewilson