Condense the dropup example

Stability > Precision

data-example-id not need be moved. Only change, because data-example-id="static-dropdown" already exists.

Remove whitespace after h3.
Variation not need capitalize.

* Remove `<h3>Example</h3>;`
* Move `data-example-id=""` to `<h3>Dropup Variation</h3>` and change value;

Fix issue #15597 — Mention dropup variation in dropdown docs

Other pull request was so messed up I sincerely have no clue how to save it. The recommended command doesn't work, can't believe rebasing is so problematic...

Our use of Holder.js in the docs is a mere implementation detail.
Don't want to confuse people into thinking Holder.js
is somehow required by the Thumbnail component.

[skip sauce]

- actually add the ``min-width`` extra style (and use ``em`` rather than
``px``) to the 0% and 2% example
- remove the unnecessarily redundant sentence in the "With labels"
section
- remove the unnecessary heading/section specifically for low percentage
case, make it flow naturally as part of the "With labels" section

unless there's a reason why ``tabindex="-1"`` was dropped in there...

Cleaner alternative to using ``<span class="sr-only">``

plus a few suggested approaches (in some cases, elided, as the actual
content of the label - being a generic example - is not important)

Harmonizing this with same advice given for CSS inline forms

shorter, neater, well supported

Removed "Separated link" in example where it's not separated. This may confuse people to think that it is separated.

I don't want to sound nitpick, but I've been working with a client maintaining a custom internal Bootstrap installation with customized docs, so I've been getting a lot of feedback from client developers using the docs.

Refs #11410

as discssued in
https://github.com/twbs/bootstrap/issues/15117#issuecomment-63029993

- added ``scope="row"`` to row headers
- made sure row headers are actual ``<th>`` elements
- removed ``scope="col"`` where it was redundant
- simplified table examples with (to me) unnecessary
``rowspan``/``colspan`` (unless you really want complex tables, in which
case we would need full-on ``id`` and ``headers`` attributes to make
sure each table cell has an explicit association with the related header
cells - overkill, in my opinion)
- one table (in typography) left header-less, as it's more or less presentational (though its structure is still important, hence not adding ``role="presentation"``)

plus one example that still used the old <div role="navigation"> and a
fix-up of the callout as per
https://github.com/twbs/bootstrap/issues/15109

[skip sauce]

Saves 3.4KB.

Move all callouts to be adjacent to each other
Combine JS-related callouts into a single callout

adding explicit aria-expanded="false" initial state (so they're
correctly announced by AT as being collapsed), and - in the case of
old-school use of <a> - role="button"

Closes #14951 by merging it.

- add aria-hidden="true" to avoid SRs unintentionally reading out the
Unicode character (see
http://www.filamentgroup.com/lab/bulletproof_icon_fonts.html)
- callout with advice on accessible icon usage
- replaced sr-only text in examples with (in the case of button) cleaner
aria-label
- additional example of icon used to convey meaning (in a
non-interactive control)

Refs https://github.com/twbs/bootlint/pull/153
[skip sauce]

[skip sauce]

Refs #14409

Refs #14409