Give all embedded live docs examples data-example-id attrs

Refs #11410
2026-05-21 13:24:08 +03:00 · 2014-11-24 17:09:32 -08:00
parent c022d88ac5
commit 44447eeefe
37 changed files with 168 additions and 168 deletions
@@ -3,7 +3,7 @@

  <h2 id="buttons-tags">Button tags</h2>
  <p>Use the button classes on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
-  <form class="bs-example">
+  <form class="bs-example" data-example-id="btn-tags">
    <a class="btn btn-default" href="#" role="button">Link</a>
    <button class="btn btn-default" type="submit">Button</button>
    <input class="btn btn-default" type="button" value="Input">
@@ -34,7 +34,7 @@

  <h2 id="buttons-options">Options</h2>
  <p>Use any of the available button classes to quickly create a styled button.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="btn-variants">
    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-success">Success</button>
@@ -73,7 +73,7 @@

  <h2 id="buttons-sizes">Sizes</h2>
  <p>Fancy larger or smaller buttons? Add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="btn-sizes">
    <p>
      <button type="button" class="btn btn-primary btn-lg">Large button</button>
      <button type="button" class="btn btn-default btn-lg">Large button</button>
@@ -111,7 +111,7 @@
 {% endhighlight %}

  <p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="block-btns">
    <div class="well" style="max-width: 400px; margin: 0 auto 10px;">
      <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
      <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
@@ -128,7 +128,7 @@

  <h3>Button element</h3>
  <p>No need to add <code>:active</code> as it's a pseudo-class, but if you need to force the same appearance, go ahead and add <code>.active</code>.</p>
-  <p class="bs-example">
+  <p class="bs-example" data-example-id="active-button-btns">
    <button type="button" class="btn btn-primary btn-lg active">Primary button</button>
    <button type="button" class="btn btn-default btn-lg active">Button</button>
  </p>
@@ -139,7 +139,7 @@

  <h3>Anchor element</h3>
  <p>Add the <code>.active</code> class to <code>&lt;a&gt;</code> buttons.</p>
-  <p class="bs-example">
+  <p class="bs-example" data-example-id="active-anchor-btns">
    <a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
    <a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
  </p>
@@ -154,7 +154,7 @@

  <h3>Button element</h3>
  <p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>
-  <p class="bs-example">
+  <p class="bs-example" data-example-id="disabled-button-btns">
    <button type="button" class="btn btn-primary btn-lg" disabled="disabled">Primary button</button>
    <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
  </p>
@@ -170,7 +170,7 @@

  <h3>Anchor element</h3>
  <p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p>
-  <p class="bs-example">
+  <p class="bs-example" data-example-id="disabled-anchor-btns">
    <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
    <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
  </p>
@@ -3,7 +3,7 @@

  <h2 id="code-inline">Inline</h2>
  <p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
-<div class="bs-example">
+<div class="bs-example" data-example-id="inline-code">
  For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% highlight html %}
@@ -12,7 +12,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.

  <h2 id="code-user-input">User input</h2>
  <p>Use the <code>&lt;kbd&gt;</code> to indicate input that is typically entered via keyboard.</p>
-<div class="bs-example">
+<div class="bs-example" data-example-id="simple-kbd">
  To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
  To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
 </div>
@@ -23,7 +23,7 @@ To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

  <h2 id="code-block">Basic block</h2>
  <p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
-<div class="bs-example">
+<div class="bs-example" data-example-id="simple-pre">
  <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
 </div>
 {% highlight html %}
@@ -33,7 +33,7 @@ To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
  <p>You may optionally add the <code>.pre-scrollable</code> class, which will set a max-height of 350px and provide a y-axis scrollbar.</p>
  <h2 id="code-variables">Variables</h2>
  <p>For indicating variables use the <code>&lt;var&gt;</code> tag.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-var">
    <p><var>y</var> = <var>m</var><var>x</var> + <var>b</var></p>

  </div>
@@ -43,7 +43,7 @@ To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

  <h2 id="code-sample-output">Sample output</h2>
  <p>For indicating blocks sample output from a program use the <code>&lt;samp&gt;</code> tag.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-samp">
    <p><samp>This text is meant to be treated as sample output from a computer program.</samp></p>
  </div>
 {% highlight html %}
@@ -3,7 +3,7 @@

  <h2 id="forms-example">Basic example</h2>
  <p>Individual form controls automatically receive some global styling. All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</code> elements with <code>.form-control</code> are set to <code>width: 100%;</code> by default. Wrap labels and controls in <code>.form-group</code> for optimum spacing.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="basic-forms">
    <form>
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
@@ -65,7 +65,7 @@
    <h4>Always add labels</h4>
    <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class. There are further alternative methods of providing a label for assistive technologies, such as the <code>aria-label</code>, <code>aria-labelledby</code> or <code>title</code> attribute. If none of these is present, screen readers may resort to using the <code>placeholder</code> attribute, if present, but note that use of <code>placeholder</code> as a replacement for other labelling methods is not advised.</p>
  </div>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-form-inline">
    <form class="form-inline">
      <div class="form-group">
        <label class="sr-only" for="exampleInputEmail2">Email address</label>
@@ -102,7 +102,7 @@
 </form>
 {% endhighlight %}

-  <div class="bs-example">
+  <div class="bs-example" data-example-id="form-inline-with-input-group">
    <form class="form-inline">
      <div class="form-group">
        <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
@@ -131,7 +131,7 @@

  <h2 id="forms-horizontal">Horizontal form</h2>
  <p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding <code>.form-horizontal</code> to the form. Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-horizontal-form">
    <form class="form-horizontal">
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
@@ -202,7 +202,7 @@
    <h4>Type declaration required</h4>
    <p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
  </div>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="text-form-control">
    <form>
      <input type="text" class="form-control" placeholder="Text input">
    </form>
@@ -217,7 +217,7 @@

  <h3>Textarea</h3>
  <p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="textarea-form-control">
    <form>
      <textarea class="form-control" rows="3" placeholder="Textarea"></textarea>
    </form>
@@ -230,7 +230,7 @@
  <p>Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.</p>
  <p>A checkbox or radio with the <code>disabled</code> attribute will be styled appropriately. To have the <code>&lt;label&gt;</code> for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the <code>.disabled</code> class to your <code>.radio</code>, <code>.radio-inline</code>, <code>.checkbox</code>, <code>.checkbox-inline</code>, or <code>&lt;fieldset&gt;</code>.</p>
  <h4>Default (stacked)</h4>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="block-checkboxes-radios">
    <form>
      <div class="checkbox">
        <label>
@@ -301,7 +301,7 @@

  <h4>Inline checkboxes and radios</h4>
  <p>Use the <code>.checkbox-inline</code> or <code>.radio-inline</code> classes on a series of checkboxes or radios for controls that appear on the same line.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="inline-checkboxes-radios">
    <form>
      <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
@@ -350,7 +350,7 @@

  <h4>Checkboxes and radios without label text</h4>
  <p>Should you have no text within the <code>&lt;label&gt;</code>, the input is positioned as you'd expect. <strong>Currently only works on non-inline checkboxes and radios.</strong> Remember to still provide some form of label for assistive technologies (for instance, using <code>aria-label</code>).</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="checkboxes-radios-without-labels">
    <form>
      <div class="checkbox">
        <label>
@@ -379,7 +379,7 @@

  <h3>Selects</h3>
  <p>Use the default option, or add <code>multiple</code> to show multiple options at once.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-ids="select-form-control">
    <form>
      <select class="form-control">
        <option>1</option>
@@ -419,7 +419,7 @@

  <h2 id="forms-controls-static">Static control</h2>
  <p>When you need to place plain text next to a form label within a form, use the <code>.form-control-static</code> class on a <code>&lt;p&gt;</code>.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="horizontal-static-form-control">
    <form class="form-horizontal">
      <div class="form-group">
        <label class="col-sm-2 control-label">Email</label>
@@ -451,7 +451,7 @@
  </div>
 </form>
 {% endhighlight %}
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="inline-static-form-control">
    <form class="form-inline">
      <div class="form-group">
        <label class="sr-only">Email</label>
@@ -493,7 +493,7 @@

  <h2 id="forms-control-disabled">Disabled state</h2>
  <p>Add the <code>disabled</code> boolean attribute on an input to prevent user input and trigger a slightly different look.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="text-form-control-disabled">
    <form>
      <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
    </form>
@@ -515,7 +515,7 @@
    <p>While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don't fully support the <code>disabled</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
  </div>

-  <div class="bs-example">
+  <div class="bs-example" data-example-id="disabled-fieldset">
    <form>
      <fieldset disabled>
        <div class="form-group">
@@ -563,7 +563,7 @@

  <h2 id="forms-control-readonly">Readonly state</h2>
  <p>Add the <code>readonly</code> boolean attribute on an input to prevent user input and style the input as disabled.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="readonly-text-form-control">
    <form>
      <input class="form-control" type="text" placeholder="Readonly input here…" readonly>
    </form>
@@ -582,7 +582,7 @@
    <p>Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's <code>&lt;label&gt;</code> text itself (as is the case in the following code example), or associate an additional element with textual information about the validation state with the form control using <code>aria-describedby</code> (see the example in the following section). In the case of an error, you could also use the <code>aria-invalid="true"</code> attribute on the form control.</p>
  </div>

-  <div class="bs-example">
+  <div class="bs-example" data-example-id="form-validation-states">
    <form>
      <div class="form-group has-success">
        <label class="control-label" for="inputSuccess1">Input with success</label>
@@ -673,7 +673,7 @@
    <p>To ensure that assistive technologies – such as screen readers – correctly convey the meaning of an icon, additional hidden text should be included with the <code>.sr-only</code> class and explicitly associated with the form control it relates to using <code>aria-describedby</code>. Alternatively, ensure that the meaning (for instance, the fact that there is a warning for a particular text entry field) is conveyed in some other form, such as changing the text of the actual <code>&lt;label&gt;</code> associated with the form control.</p>
    <p>Although the following examples already mention the validation state of their respective form controls in the <code>&lt;label&gt;</code> text itself, the above technique (using <code>.sr-only</code> text and <code>aria-describedby</code>) has been included for illustrative purposes.</p>
  </div>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="form-validation-states-with-icons">
    <form>
      <div class="form-group has-success has-feedback">
        <label class="control-label" for="inputSuccess2">Input with success</label>
@@ -717,7 +717,7 @@
 {% endhighlight %}

  <h4>Optional icons in horizontal and inline forms</h4>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="horizontal-form-validation-state-with-icon">
    <form class="form-horizontal">
      <div class="form-group has-success has-feedback">
        <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
@@ -742,7 +742,7 @@
 </form>
 {% endhighlight %}

-  <div class="bs-example">
+  <div class="bs-example" data-example-id="inline-form-validation-state-with-icon">
    <form class="form-inline">
      <div class="form-group has-success has-feedback">
        <label class="control-label" for="inputSuccess4">Input with success</label>
@@ -765,7 +765,7 @@

  <h4>Optional icons with hidden <code>.sr-only</code> labels</h4>
  <p>For form controls with no visible label, add the <code>.sr-only</code> class on the label. Bootstrap will automatically adjust the position of the icon once it's been added.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="form-validation-state-with-icon-without-label">
    <div class="form-group has-success has-feedback">
      <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
      <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
@@ -788,7 +788,7 @@

  <h3>Height sizing</h3>
  <p>Create taller or shorter form controls that match button sizes.</p>
-  <div class="bs-example bs-example-control-sizing">
+  <div class="bs-example bs-example-control-sizing" data-example-id="form-control-height-sizes">
    <form>
      <div class="controls">
        <input class="form-control input-lg" type="text" placeholder=".input-lg">
@@ -819,7 +819,7 @@

  <h3>Horizontal form group sizes</h3>
  <p>Quickly size labels and form controls within <code>.form-horizontal</code> by adding <code>.form-group-lg</code> or <code>.form-group-sm</code>.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="form-group-height-sizes">
    <form class="form-horizontal">
      <div class="form-group form-group-lg">
        <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
@@ -855,7 +855,7 @@

  <h3>Column sizing</h3>
  <p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="form-control-column-sizing">
    <form>
      <div class="row">
        <div class="col-xs-2">
@@ -890,7 +890,7 @@
    <h4>Associating help text with form controls</h4>
    <p>Help text should be explicitly associated with the form control it relates to using the <code>aria-describedby</code> attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.</p>
  </div>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-help-text">
    <form>
      <div class="form-group">
        <label for="inputHelpBlock">Input with help text</label>
@@ -3,7 +3,7 @@

  <h3 id="helper-classes-colors">Contextual colors</h3>
  <p>Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="contextual-colors-helpers">
    <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
    <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
@@ -30,7 +30,7 @@

  <h3 id="helper-classes-backgrounds">Contextual backgrounds</h3>
  <p>Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.</p>
-  <div class="bs-example bs-example-bg-classes">
+  <div class="bs-example bs-example-bg-classes" data-example-id="contextual-backgrounds-helpers">
    <p class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    <p class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
    <p class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
@@ -55,7 +55,7 @@

  <h3 id="helper-classes-close">Close icon</h3>
  <p>Use the generic close icon for dismissing content like modals and alerts.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="close-icon">
    <p><button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button></p>
  </div>
 {% highlight html %}
@@ -65,7 +65,7 @@

  <h3 id="helper-classes-carets">Carets</h3>
  <p>Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in <a href="../components/#btn-dropdowns-dropup">dropup menus</a>.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="caret">
    <span class="caret"></span>
  </div>
 {% highlight html %}
@@ -17,7 +17,7 @@
    <h4>Cross-browser compatibility</h4>
    <p>Keep in mind that Internet Explorer 8 lacks support for rounded corners.</p>
  </div>
-  <div class="bs-example bs-example-images">
+  <div class="bs-example bs-example-images" data-example-id="image-shapes">
    <img data-src="holder.js/140x140" class="img-rounded" alt="A generic square placeholder image with rounded corners">
    <img data-src="holder.js/140x140" class="img-circle" alt="A generic square placeholder image where only the portion within the circle circumscribed about said square is visible">
    <img data-src="holder.js/140x140" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
@@ -3,7 +3,7 @@

  <h2 id="tables-example">Basic example</h2>
  <p>For basic styling&mdash;light padding and only horizontal dividers&mdash;add the base class <code>.table</code> to any <code>&lt;table&gt;</code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-table">
    <table class="table">
      <caption>Optional table caption.</caption>
      <thead>
@@ -49,7 +49,7 @@
    <h4>Cross-browser compatibility</h4>
    <p>Striped tables are styled via the <code>:nth-child</code> CSS selector, which is not available in Internet Explorer 8.</p>
  </div>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="striped-table">
    <table class="table table-striped">
      <thead>
        <tr>
@@ -90,7 +90,7 @@

  <h2 id="tables-bordered">Bordered table</h2>
  <p>Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="bordered-table">
    <table class="table table-bordered">
      <thead>
        <tr>
@@ -135,7 +135,7 @@

  <h2 id="tables-hover-rows">Hover rows</h2>
  <p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="hoverable-table">
    <table class="table table-hover">
      <thead>
        <tr>
@@ -175,7 +175,7 @@

  <h2 id="tables-condensed">Condensed table</h2>
  <p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="condensed-table">
    <table class="table table-condensed">
      <thead>
        <tr>
@@ -261,7 +261,7 @@
      </tbody>
    </table>
  </div>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="contextual-table">
    <table class="table">
      <thead>
        <tr>
@@ -365,7 +365,7 @@
    <p>For more information, read <a href="http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685">this Stack Overflow answer</a>.</p>
  </div>

-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-responsive-table">
    <div class="table-responsive">
      <table class="table">
        <thead>
@@ -4,7 +4,7 @@
  <!-- Headings -->
  <h2 id="type-headings">Headings</h2>
  <p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code>, are available. <code>.h1</code> through <code>.h6</code> classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.</p>
-  <div class="bs-example bs-example-type">
+  <div class="bs-example bs-example-type" data-example-id="simple-headings">
    <table class="table">
      <tbody>
        <tr>
@@ -44,7 +44,7 @@
 {% endhighlight %}

  <p>Create lighter, secondary text in any heading with a generic <code>&lt;small&gt;</code> tag or the <code>.small</code> class.</p>
-  <div class="bs-example bs-example-type">
+  <div class="bs-example bs-example-type" data-example-id="small-headings">
    <table class="table">
      <tbody>
        <tr>
@@ -81,7 +81,7 @@
  <!-- Body copy -->
  <h2 id="type-body-copy">Body copy</h2>
  <p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>1.428</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="body-copy">
    <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
    <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
@@ -93,7 +93,7 @@
  <!-- Body copy .lead -->
  <h3>Lead body copy</h3>
  <p>Make a paragraph stand out by adding <code>.lead</code>.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="lead-copy">
    <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
  </div>
 {% highlight html %}
@@ -108,7 +108,7 @@
  <h2 id="type-inline-text">Inline text elements</h2>
  <h3>Marked text</h3>
  <p>For highlighting a run of text due to its relevance in another context, use the <code>&lt;mark&gt;</code> tag.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-mark">
    <p>You can use the mark tag to <mark>highlight</mark> text.</p>
  </div>
 {% highlight html %}
@@ -118,7 +118,7 @@ You can use the mark tag to <mark>highlight</mark> text.

  <h3>Deleted text</h3>
  <p>For indicating blocks of text that have been deleted use the <code>&lt;del&gt;</code> tag.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-del">
    <p><del>This line of text is meant to be treated as deleted text.</del></p>
  </div>
 {% highlight html %}
@@ -127,7 +127,7 @@ You can use the mark tag to <mark>highlight</mark> text.

  <h3>Strikethrough text</h3>
  <p>For indicating blocks of text that are no longer relevant use the <code>&lt;s&gt;</code> tag.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-s">
    <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
  </div>
 {% highlight html %}
@@ -136,7 +136,7 @@ You can use the mark tag to <mark>highlight</mark> text.

  <h3>Inserted text</h3>
  <p>For indicating additions to the document use the <code>&lt;ins&gt;</code> tag.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-ins">
    <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
  </div>
 {% highlight html %}
@@ -145,7 +145,7 @@ You can use the mark tag to <mark>highlight</mark> text.

  <h3>Underlined text</h3>
  <p>To underline text use the <code>&lt;u&gt;</code> tag.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-u">
    <p><u>This line of text will render as underlined</u></p>
  </div>
 {% highlight html %}
@@ -157,7 +157,7 @@ You can use the mark tag to <mark>highlight</mark> text.
  <h3>Small text</h3>
  <p>For de-emphasizing inline or blocks of text, use the <code>&lt;small&gt;</code> tag to set text at 85% the size of the parent. Heading elements receive their own <code>font-size</code> for nested <code>&lt;small&gt;</code> elements.</p>
  <p>You may alternatively use an inline element with <code>.small</code> in place of any <code>&lt;small&gt;</code>.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-small">
    <p><small>This line of text is meant to be treated as fine print.</small></p>
  </div>
 {% highlight html %}
@@ -167,7 +167,7 @@ You can use the mark tag to <mark>highlight</mark> text.

  <h3>Bold</h3>
  <p>For emphasizing a snippet of text with a heavier font-weight.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-strong">
    <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
  </div>
 {% highlight html %}
@@ -176,7 +176,7 @@ You can use the mark tag to <mark>highlight</mark> text.

  <h3>Italics</h3>
  <p>For emphasizing a snippet of text with italics.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-em">
    <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
  </div>
 {% highlight html %}
@@ -190,7 +190,7 @@ You can use the mark tag to <mark>highlight</mark> text.

  <h2 id="type-alignment">Alignment classes</h2>
  <p>Easily realign text to components with text alignment classes.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="text-alignment">
    <p class="text-left">Left aligned text.</p>
    <p class="text-center">Center aligned text.</p>
    <p class="text-right">Right aligned text.</p>
@@ -207,7 +207,7 @@ You can use the mark tag to <mark>highlight</mark> text.

  <h2 id="type-transformation">Transformation classes</h2>
  <p>Transform text in components with text capitalization classes.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="text-capitalization">
    <p class="text-lowercase">Lowercased text.</p>
    <p class="text-uppercase">Uppercased text.</p>
    <p class="text-capitalize">Capitalized text.</p>
@@ -224,7 +224,7 @@ You can use the mark tag to <mark>highlight</mark> text.

  <h3>Basic abbreviation</h3>
  <p>For expanded text on long hover of an abbreviation, include the <code>title</code> attribute with the <code>&lt;abbr&gt;</code> element.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-abbr">
    <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
  </div>
 {% highlight html %}
@@ -233,7 +233,7 @@ You can use the mark tag to <mark>highlight</mark> text.

  <h3>Initialism</h3>
  <p>Add <code>.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-initialism">
    <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
  </div>
 {% highlight html %}
@@ -244,7 +244,7 @@ You can use the mark tag to <mark>highlight</mark> text.
  <!-- Addresses -->
  <h2 id="type-addresses">Addresses</h2>
  <p>Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <code>&lt;br&gt;</code>.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-address">
    <address>
      <strong>Twitter, Inc.</strong><br>
      795 Folsom Ave, Suite 600<br>
@@ -277,7 +277,7 @@ You can use the mark tag to <mark>highlight</mark> text.

  <h3>Default blockquote</h3>
  <p>Wrap <code>&lt;blockquote&gt;</code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes, we recommend a <code>&lt;p&gt;</code>.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-blockquote">
    <blockquote>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    </blockquote>
@@ -293,7 +293,7 @@ You can use the mark tag to <mark>highlight</mark> text.

  <h4>Naming a source</h4>
  <p>Add a <code>&lt;footer&gt;</code> for identifying the source. Wrap the name of the source work in <code>&lt;cite&gt;</code>.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="blockquote-cite">
    <blockquote>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
@@ -308,7 +308,7 @@ You can use the mark tag to <mark>highlight</mark> text.

  <h4>Alternate displays</h4>
  <p>Add <code>.blockquote-reverse</code> for a blockquote with right-aligned content.</p>
-  <div class="bs-example" style="overflow: hidden;">
+  <div class="bs-example" style="overflow: hidden;" data-example-id="blockquote-reverse">
    <blockquote class="blockquote-reverse">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
@@ -326,7 +326,7 @@ You can use the mark tag to <mark>highlight</mark> text.

  <h3>Unordered</h3>
  <p>A list of items in which the order does <em>not</em> explicitly matter.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-ul">
    <ul>
      <li>Lorem ipsum dolor sit amet</li>
      <li>Consectetur adipiscing elit</li>
@@ -353,7 +353,7 @@ You can use the mark tag to <mark>highlight</mark> text.

  <h3>Ordered</h3>
  <p>A list of items in which the order <em>does</em> explicitly matter.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-ol">
    <ol>
      <li>Lorem ipsum dolor sit amet</li>
      <li>Consectetur adipiscing elit</li>
@@ -373,7 +373,7 @@ You can use the mark tag to <mark>highlight</mark> text.

  <h3>Unstyled</h3>
  <p>Remove the default <code>list-style</code> and left margin on list items (immediate children only). <strong>This only applies to immediate children list items</strong>, meaning you will need to add the class for any nested lists as well.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="unstyled-list">
    <ul class="list-unstyled">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Consectetur adipiscing elit</li>
@@ -400,7 +400,7 @@ You can use the mark tag to <mark>highlight</mark> text.

  <h3>Inline</h3>
  <p>Place all list items on a single line with <code>display: inline-block;</code> and some light padding.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="list-inline">
    <ul class="list-inline">
      <li>Lorem ipsum</li>
      <li>Phasellus iaculis</li>
@@ -415,7 +415,7 @@ You can use the mark tag to <mark>highlight</mark> text.

  <h3>Description</h3>
  <p>A list of terms with their associated descriptions.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-dl">
    <dl>
      <dt>Description lists</dt>
      <dd>A description list is perfect for defining terms.</dd>
@@ -435,7 +435,7 @@ You can use the mark tag to <mark>highlight</mark> text.

  <h4>Horizontal description</h4>
  <p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side. Starts off stacked like default <code>&lt;dl&gt;</code>s, but when the navbar expands, so do these.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="horizontal-dl">
    <dl class="dl-horizontal">
      <dt>Description lists</dt>
      <dd>A description list is perfect for defining terms.</dd>