Documentation for active class on buttons?

Created by: Pacoup

I'm looking in the documentation for the active class to be used on buttons, and while it works as expected, I can't find it anywhere.

Our website (Canadian Institutes of Health Research) is currently working with the Web Experience Toolkit framework which will be migrating to Bootstrap in the next major release.

In the current iteration, buttons have no active class (you cannot create a “pushed” state) but we want to implement it to create a Pills-like navigation, which we're currently using with some sort of a hack (see: https://github.com/wet-boew/wet-boew/issues/2890).

Obviously, since we're going to be using Bootstrap, we don't want to reinvent the wheel, and we're really glad to see the active class already exists, although there's no documentation for it (as far as I know, anyway).

Our other issue, or question if you will, is the preferred approach we should take to create such a navigation, because Bootstrap doesn't use the same methodology.

Namely, Bootstrap Pills use the active class on the list item to create what looks like a reserved color segmented control, similar to the one used in iOS 7:

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

To achieve our desired style, we'd use it this way, but I'm not sure this is compliant with Bootstrap at all; looking for comments on this:

<ul class="nav nav-pills">
  <li><a class="btn btn-default active">2013</a></li>
  <li><a href="#" class="btn btn-default">2012</a></li>
  <li><a href="#" class="btn btn-default">2011</a></li>
</ul>

We also remove the href, which tells the user this is a placeholder link, and add a bunch of WAI-ARIA code because we have very strict accessibility requirements as the Government of Canada, but I haven't included this here given it doesn't seem to be part of Bootstrap's development.

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element's contents.

WHATWG - HTML Living Standard - The a element

This all readily works in Bootstrap 3, minus the cursor which remains a "pointer" while it should go back to "default" when the href is removed, so it almost seems as if it's actually a supported scenario, but I think it's by accident.

We want to do something similar for the pagination.

Now, it's somewhat obvious that this is not the correct solution at all, so I'd like to get feedback on this. What would be the best approach? Should we / is it possible to change the style of the Pills and Pagination to something which looks like OS X's segmented controls instead of iOS 7's?