Merge branch 'master' into deprecate_screen_containers

1 files changed, 26 insertions, 11 deletions

diff --git a/javascript.html b/javascript.html
index 347c2c1c5..48aaf2cd9 100644
--- a/javascript.html
+++ b/javascript.html
@@ -205,7 +205,7 @@ $('#myModal').on('show.bs.modal', function (e) {
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-        <h4 class="modal-title">Modal title</h4>
+        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
       </div>
       <div class="modal-body">
         ...
@@ -222,12 +222,8 @@ $('#myModal').on('show.bs.modal', function (e) {
 
     <div class="bs-callout bs-callout-warning">
       <h4>Make modals accessible</h4>
-      <p>
-        Be sure to add <code>role="dialog"</code> to your primary modal div. In the example above, <code>div#myModal</code>.<br>
-        Also, the <code>aria-labelledby</code> attribute references your modal title. In this example, <code>h4#myModalLabel</code>.<br>
-        Finally, <code>aria-hidden="true"</code> tells assistive technologies to skip DOM elements.<br>
-        Additionally, you may give a description of your modal dialog. Use the <code>aria-describedby</code> attribute in the modal's primary <code>&lt;div&gt;</code> to point to this description (this is not shown in the above example).
-      </p>
+      <p>Be sure to add <code>role="dialog"</code> to <code>.modal</code>, <code>aria-labelledby="myModalLabel"</code> attribute to reference the modal title, and <code>aria-hidden="true"</code> to tell assistive technologies to skip the modal's DOM elements.</p>
+      <p>Additionally, you may give a description of your modal dialog with <code>aria-describedby</code> on <code>.modal</code>.</p>
     </div>
 
     <h2 id="modals-usage">Usage</h2>
@@ -712,15 +708,33 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
     <h3>Markup</h3>
     <p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap tab styling.</p>
 {% highlight html %}
+<!-- Nav tabs -->
 <ul class="nav nav-tabs">
   <li><a href="#home" data-toggle="tab">Home</a></li>
   <li><a href="#profile" data-toggle="tab">Profile</a></li>
   <li><a href="#messages" data-toggle="tab">Messages</a></li>
   <li><a href="#settings" data-toggle="tab">Settings</a></li>
 </ul>
+
+<!-- Tab panes -->
+<div class="tab-content">
+  <div class="tab-pane active" id="home">...</div>
+  <div class="tab-pane" id="profile">...</div>
+  <div class="tab-pane" id="messages">...</div>
+  <div class="tab-pane" id="settings">...</div>
+</div>
 {% endhighlight %}
 
-    <p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p>
+    <h3>Fade effect</h3>
+    <p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>. The first tab pane must also have <code>.in</code> to properly fade in initial content.</p>
+{% highlight html %}
+<div class="tab-content">
+  <div class="tab-pane fade in active" id="home">...</div>
+  <div class="tab-pane fade" id="profile">...</div>
+  <div class="tab-pane fade" id="messages">...</div>
+  <div class="tab-pane fade" id="settings">...</div>
+</div>
+{% endhighlight %}
 
     <h3>Methods</h3>
     <h4>$().tab</h4>
@@ -1020,7 +1034,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
 
     <h3>Live demo</h3>
     <div class="bs-example" style="padding-bottom: 24px;">
-      <a href="#" class="btn btn-lg btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
+      <a href="#" class="btn btn-lg btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?" role="button">Click to toggle popover</a>
     </div>
 
     <h4>Four directions</h4>
@@ -1203,7 +1217,7 @@ $('#myPopover').on('hidden.bs.popover', function () {
     </div><!-- /example -->
 
     <div class="bs-example">
-      <div class="alert alert-block alert-danger fade in">
+      <div class="alert alert-danger fade in">
         <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
         <h4>Oh snap! You got an error!</h4>
         <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
@@ -1358,7 +1372,7 @@ $('#my-alert').bind('closed.bs.alert', function () {
     <h2 id="buttons-usage">Usage</h2>
     <p>Enable buttons via JavaScript:</p>
 {% highlight js %}
-$('.nav-tabs').button()
+$('.btn-group').button()
 {% endhighlight %}
 
     <h3>Markup</h3>
@@ -1756,6 +1770,7 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
 
     <h3>Via data attributes</h3>
     <p>Use data attributes to easily control the position of the carousel. <code>data-slide</code> accepts the keywords <code>prev</code> or <code>next</code>, which alters the slide position relative to its current position. Alternatively, use <code>data-slide-to</code> to pass a raw slide index to the carousel <code>data-slide-to="2"</code>, which shifts the slide position to a particular index beginning with <code>0</code>.</p>
+    <p>The <code>data-ride="carousel"</code> attribute is used to mark a carousel as animating starting at page load.</p>
 
     <h3>Via JavaScript</h3>
     <p>Call carousel manually with:</p>