Minimal forms appearance improvements

rest_framework/static/rest_framework/css/default.css

@@ -150,6 +150,17 @@ html, body {
   margin: 0 auto -60px;
 }
 
+.form-switcher {
+    margin-bottom: 0;
+}
+
+.tab-content {
+    padding-top: 25px;
+    background: #fff;
+    border: 1px solid #ddd;
+    border-top: none;
+    border-radius: 0 0 4px 4px;
+}
 
 #footer, #push {
   height: 60px; /* .push must be the same height as .footer */

rest_framework/static/rest_framework/js/default.js

@@ -4,4 +4,4 @@ $('.js-tooltip').tooltip({
     delay: 1000
 });
 
-$('#form-switcher a:first').tab('show');
\ No newline at end of file
+$('.form-switcher a:first').tab('show');
\ No newline at end of file

rest_framework/templates/rest_framework/base.html

@@ -125,11 +125,11 @@
 
                 {% if post_form %}
                 <div class="well">
-                    <ul class="nav nav-pills" id="form-switcher">
+                    <ul class="nav nav-tabs form-switcher">
                         {% if post_form %}
-                        <li><a href="#object-form" data-toggle="pill">Object form</a></li>
+                        <li><a href="#object-form" data-toggle="tab">HTML</a></li>
                         {% endif %}
-                        <li><a href="#generic-content-form" data-toggle="pill">Generic content form</a></li>
+                        <li><a href="#generic-content-form" data-toggle="tab">Generic content</a></li>
                     </ul>
                     <div class="tab-content">
                         {% if post_form %}
@@ -164,11 +164,11 @@
 
                 {% if 'PUT' in allowed_methods or 'PATCH' in allowed_methods %}
                 <div class="well">
-                    <ul class="nav nav-pills" id="form-switcher">
+                    <ul class="nav nav-tabs form-switcher">
                         {% if put_form %}
-                        <li><a href="#object-form" data-toggle="pill">Object form</a></li>
+                        <li><a href="#object-form" data-toggle="tab">HTML</a></li>
                         {% endif %}
-                        <li><a href="#generic-content-form" data-toggle="pill">Generic content form</a></li>
+                        <li><a href="#generic-content-form" data-toggle="tab">Generic content</a></li>
                     </ul>
                     <div class="tab-content">
                         {% if put_form %}