Bootstrap 3 Inspired Docs

A small pen for demo'ing Bootstrap inspired documentation.

Overview

A small pen for demo'ing Bootstrap documentation. This was something I needed quickly for an upcoming project, I hope you find it useful to.

Adding sections

Use the markup below to add sections to your doc. As you add each section, the right side navigation will construct itself accordingly.

The <h1> is used for parent links whilst <h2> is used for child links.

<div class="bs-docs-section">
	<h1 id="parent-section" class="page-header">Parent Section</h1>
	<p class="lead">Parent lead text.</p>
	...
	<h2 id="child-section">Child Section</h2>
	<p>Child text.</p>
	...
</div>

Using code snippets

Bootstrap itself uses Pygments when displaying example code. I've replaced this with the Prism highlighter as it's easier to use, just make sure your code snippet has been entity encoded for it to display correctly.

You can use one of three classes on the <code> tag to tell Prism which language you want to highlight.

  • HTML: .language-html
  • CSS: .language-css
  • JavaScript: .language-javascript
<div class="highlight">
	<pre>
		<code class="language-html">
			...
		</code>
	</pre>
</div>

Whilst running in Codepen the 'copy to clipboard' won't work due to sandbox restrictions. It will work outside of Codepen.

Top Navigation

<header class="bs-docs-nav navbar navbar-static-top" id="top">
	<div class="container">
		<div class="navbar-header">
			<button aria-controls="bs-navbar" aria-expanded="false" class="collapsed navbar-toggle" data-target="#bs-navbar" data-toggle="collapse" type="button">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a href="" class="navbar-brand">Bootstrap</a>
		</div>
		<nav class="collapse navbar-collapse" id="bs-navbar">
			<ul class="nav navbar-nav">
				<li> <a href="">item one</a> </li>
				<li class="active"> <a href="">item two</a> </li>
				<li> <a href="">item three</a> </li>
				<li> <a href="">item four</a> </li>
				<li> <a href="">item five</a> </li>
			</ul>
			<ul class="nav navbar-nav navbar-right">
				<li><a href="">external one</a></li>
				<li><a href="">external two</a></li>
				<li><a href="">external three</a></li>
			</ul>
		</nav>
	</div>
</header>

Purple Header

<div class="bs-docs-header">
	<div class="container">
		<h1>Bootstrap 3 Inspired Docs</h1>
		<p>A small pen for demo'ing Bootstrap inspired documentation.</p>
	</div>
</div>

Real Example of the Pagination section taken from Bootstrap

Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.

Default pagination

Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

<nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Disabled and active states

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

<nav>
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

You can optionally swap out active or disabled anchors for <span>, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.

<nav>
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

Sizing

Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.

<nav><ul class="pagination pagination-lg">...</ul></nav>
<nav><ul class="pagination">...</ul></nav>
<nav><ul class="pagination pagination-sm">...</ul></nav>

Pager

Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

Default example

By default, the pager centers links.

<nav>
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

Aligned links

Alternatively, you can align each link to the sides:

<nav>
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Optional disabled state

Pager links also use the general .disabled utility class from the pagination.

<nav>
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>