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

Refs #11410

docs/_includes/js/alerts.html

@@ -4,7 +4,7 @@
   <h2 id="alerts-examples">Example alerts</h2>
   <p>Add dismiss functionality to all alert messages with this plugin.</p>
   <p>When using a <code>.close</code> button, it must be the first child of the <code>.alert-dismissible</code> and no text content may come before it in the markup.</p>
-  <div class="bs-example bs-example-standalone">
+  <div class="bs-example bs-example-standalone" data-example-id="dismissible-alert-js">
     <div class="alert alert-warning alert-dismissible fade in" role="alert">
       <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
       <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.

docs/_includes/js/buttons.html

@@ -60,7 +60,7 @@
     <h4>Visual checked state only updated on click</h4>
     <p>If the checked state of a checkbox button is updated without firing a <code>click</code> event on the button (e.g. via <code>&lt;input type="reset"&gt;</code> or via setting the <code>checked</code> property of the input), you will need to toggle the <code>.active</code> class on the input's <code>label</code> yourself.</p>
   </div>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="buttons-checkbox">
     <div class="btn-group" data-toggle="buttons">
       <label class="btn btn-primary active">
         <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
@@ -87,7 +87,7 @@
 </div>
 {% endhighlight %}
 
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="buttons-radio">
     <div class="btn-group" data-toggle="buttons">
       <label class="btn btn-primary active">
         <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)

docs/_includes/js/carousel.html

@@ -4,7 +4,7 @@
   <p>A slideshow component for cycling through elements, like a carousel. <strong>Nested carousels are not supported.</strong></p>
 
   <h2 id="carousel-examples">Examples</h2>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-carousel">
     <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
       <ol class="carousel-indicators">
         <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
@@ -87,7 +87,7 @@
 
   <h3>Optional captions</h3>
   <p>Add captions to your slides easily with the <code>.carousel-caption</code> element within any <code>.item</code>. Place just about any optional HTML within there and it will be automatically aligned and formatted.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="carousel-with-captions">
     <div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
       <ol class="carousel-indicators">
         <li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>

docs/_includes/js/collapse.html

@@ -12,7 +12,7 @@
   <h2 id="collapse-examples">Example accordion</h2>
   <p>Using the collapse plugin, we built a simple accordion by extending the panel component.</p>
 
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="collapse-accordion">
     <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
       <div class="panel panel-default">
         <div class="panel-heading" role="tab" id="headingOne">

docs/_includes/js/modal.html

@@ -26,7 +26,7 @@
 
   <h3>Static example</h3>
   <p>A rendered modal with header, body, and set of actions in the footer.</p>
-  <div class="bs-example bs-example-modal">
+  <div class="bs-example bs-example-modal" data-example-id="static-modal">
     <div class="modal">
       <div class="modal-dialog">
         <div class="modal-content">

docs/_includes/js/popovers.html

@@ -38,7 +38,7 @@ $(function () {
   <h2 id="popovers-examples">Examples</h2>
   <h3>Static popover</h3>
   <p>Four options are available: top, right, bottom, and left aligned.</p>
-  <div class="bs-example bs-example-popover">
+  <div class="bs-example bs-example-popover" data-example-id="static-popovers">
     <div class="popover top">
       <div class="arrow"></div>
       <h3 class="popover-title">Popover top</h3>

docs/_includes/js/scrollspy.html

@@ -3,7 +3,7 @@
 
   <h2 id="scrollspy-examples">Example in navbar</h2>
   <p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="embedded-scrollspy">
     <nav id="navbar-example2" class="navbar navbar-default navbar-static">
       <div class="container-fluid">
         <div class="navbar-header">

docs/_includes/js/tabs.html

@@ -3,7 +3,7 @@
 
   <h2 id="tabs-examples">Example tabs</h2>
   <p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p>
-  <div class="bs-example bs-example-tabs" role="tabpanel">
+  <div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
     <ul id="myTab" class="nav nav-tabs" role="tablist">
       <li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a></li>
       <li role="presentation"><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a></li>

docs/_includes/js/tooltips.html

@@ -11,7 +11,7 @@
 
   <h3>Static tooltip</h3>
   <p>Four options are available: top, right, bottom, and left aligned.</p>
-  <div class="bs-example bs-example-tooltip">
+  <div class="bs-example bs-example-tooltip" data-example-id="static-tooltips">
     <div class="tooltip left" role="tooltip">
       <div class="tooltip-arrow"></div>
       <div class="tooltip-inner">