Merge branch 'v4' of https://github.com/twbs/derpstrap into v4

2 files changed, 34 insertions, 35 deletions

diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html
index 332d5b6b9..e8ae05108 100644
--- a/js/tests/visual/scrollspy.html
+++ b/js/tests/visual/scrollspy.html
@@ -22,26 +22,25 @@
 
 <div class="container">
 
-  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
-    <div class="container-fluid">
-      <div class="js-navbar-scrollspy">
-        <ul class="nav navbar-nav">
-          <li class="nav-item active"><a class="nav-link" href="#fat">@fat</a></li>
-          <li class="nav-item"><a class="nav-link" href="#mdo">@mdo</a></li>
-          <li class="dropdown nav-item">
-            <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-            <ul class="dropdown-menu" role="menu">
-              <li class=""><a href="#one" tabindex="-1">one</a></li>
-              <li><a href="#two" tabindex="-1">two</a></li>
-              <li role="separator" class="divider"></li>
-              <li><a href="#three" tabindex="-1">three</a></li>
-            </ul>
-          </li>
-        </ul>
-      </div>
+  <nav class="navbar navbar-dark navbar-fixed-top bg-inverse" role="navigation">
+    <div class="js-navbar-scrollspy">
+      <ul class="nav navbar-nav">
+        <li class="nav-item"><a class="nav-link active" href="#fat">@fat</a></li>
+        <li class="nav-item"><a class="nav-link" href="#mdo">@mdo</a></li>
+        <li class="dropdown nav-item">
+          <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown</a>
+          <div class="dropdown-menu" role="menu">
+            <a class="dropdown-item" href="#one" tabindex="-1">one</a>
+            <a class="dropdown-item" href="#two" tabindex="-1">two</a>
+            <div class="dropdown-divider"></div>
+            <a class="dropdown-item" href="#three" tabindex="-1">three</a>
+          </div>
+        </li>
+      </ul>
     </div>
   </nav>
 
+
   <h2 id="fat">@fat</h2>
   <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
   <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html
index ff6685fed..22a918ed7 100644
--- a/js/tests/visual/tab.html
+++ b/js/tests/visual/tab.html
@@ -35,14 +35,14 @@
   <h4>Tabs without fade</h4>
 
   <ul id="myTab" class="nav nav-tabs">
-    <li class="active nav-item"><a href="#home" class="nav-link" data-toggle="tab">Home</a></li>
+    <li class="nav-item"><a href="#home" class="nav-link active" data-toggle="tab">Home</a></li>
     <li class="nav-item"><a href="#profile" data-toggle="tab" class="nav-link">Profile</a></li>
     <li class="dropdown nav-item">
       <a href="#" id="myTabDrop1" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
-        <li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a></li>
-        <li><a href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a></li>
-      </ul>
+      <div class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
+        <a class="dropdown-item" href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a>
+        <a class="dropdown-item" href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a>
+      </div>
     </li>
   </ul>
   <div id="myTabContent" class="tab-content">
@@ -67,14 +67,14 @@
   <h4>Tabs with fade</h4>
 
   <ul id="myTab1" class="nav nav-tabs">
-    <li class="active nav-item"><a class="nav-link" href="#home1" data-toggle="tab">Home</a></li>
+    <li class="nav-item"><a class="nav-link active" href="#home1" data-toggle="tab">Home</a></li>
     <li class="nav-item"><a class="nav-link" href="#profile1" data-toggle="tab">Profile</a></li>
     <li class="dropdown nav-item">
       <a href="#" id="myTabDrop2" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop2">
-        <li><a href="#dropdown1-1" tabindex="-1" data-toggle="tab">@fat</a></li>
-        <li><a href="#dropdown1-2" tabindex="-1" data-toggle="tab">@mdo</a></li>
-      </ul>
+      <div class="dropdown-menu" role="menu" aria-labelledby="myTabDrop2">
+        <a class="dropdown-item" href="#dropdown1-1" tabindex="-1" data-toggle="tab">@fat</a>
+        <a class="dropdown-item" href="#dropdown1-2" tabindex="-1" data-toggle="tab">@mdo</a>
+      </div>
     </li>
   </ul>
   <div id="myTabContent1" class="tab-content">
@@ -103,10 +103,10 @@
     <li class="nav-item"><a class="nav-link" href="#profile2" data-toggle="tab">Profile</a></li>
     <li class="dropdown nav-item">
       <a href="#" id="myTabDrop3" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop3">
-        <li><a href="#dropdown2-1" tabindex="-1" data-toggle="tab">@fat</a></li>
-        <li><a href="#dropdown2-2" tabindex="-1" data-toggle="tab">@mdo</a></li>
-      </ul>
+      <div class="dropdown-menu" role="menu" aria-labelledby="myTabDrop3">
+        <a class="dropdown-item" href="#dropdown2-1" tabindex="-1" data-toggle="tab">@fat</a>
+        <a class="dropdown-item" href="#dropdown2-2" tabindex="-1" data-toggle="tab">@mdo</a>
+      </div>
     </li>
   </ul>
   <div id="myTabContent2" class="tab-content">
@@ -135,10 +135,10 @@
     <li class="nav-item"><a class="nav-link" href="#profile3" data-toggle="tab">Profile</a></li>
     <li class="dropdown nav-item">
       <a href="#" id="myTabDrop4" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop4">
-        <li><a href="#dropdown3-1" tabindex="-1" data-toggle="tab">@fat</a></li>
-        <li><a href="#dropdown3-2" tabindex="-1" data-toggle="tab">@mdo</a></li>
-      </ul>
+      <div class="dropdown-menu" role="menu" aria-labelledby="myTabDrop4">
+        <a class="dropdown-item" href="#dropdown3-1" tabindex="-1" data-toggle="tab">@fat</a>
+        <a class="dropdown-item" href="#dropdown3-2" tabindex="-1" data-toggle="tab">@mdo</a>
+      </div>
     </li>
   </ul>
   <div id="myTabContent3" class="tab-content">