change up classes on tables and forms, fix nav list styles in example

6 files changed, 60 insertions, 61 deletions

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index ca1c5cb83..2f45032f2 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -116,7 +116,6 @@ section {
 /* supporting docs pages */
 .subhead {
   padding-bottom: 14px;
-  margin-bottom: 45px;
   border-bottom: 3px solid #e5e5e5;
 }
 .subhead h1,
diff --git a/docs/base-css.html b/docs/base-css.html
index c851c84e9..ccc2216c6 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -150,7 +150,7 @@
 
   <!-- Misc Elements -->
   <h2>Emphasis, address, and abbreviation</h2>
-  <table class="bordered-table striped-table">
+  <table class="table-bordered table-striped">
     <thead>
       <tr>
         <th>Element</th>
@@ -237,7 +237,7 @@
 
   <!-- Blockquotes -->
   <h2>Blockquotes</h2>
-  <table class="bordered-table striped-table">
+  <table class="table-bordered table-striped">
     <thead>
       <tr>
         <th>Element</th>
@@ -383,7 +383,7 @@
   <!-- Code -->
 
   <h2>Code <small>Inline and block</small></h2>
-  <table class="bordered-table striped-table">
+  <table class="table-bordered table-striped">
     <thead>
       <tr>
         <th style="width: 190px;">Element</th>
@@ -425,7 +425,7 @@
 
   <!-- Labels -->
   <h2>Inline labels <small>for special attention</small></h2>
-  <table class="bordered-table striped-table">
+  <table class="table-bordered table-striped">
     <thead>
       <tr>
         <th style="width: 190px;">Labels</th>
@@ -490,7 +490,7 @@
   <h2>Table markup</h2>
   <div class="row">
     <div class="span8">
-      <table class="bordered-table striped-table">
+      <table class="table-bordered table-striped">
         <thead>
           <tr>
             <th>Tag</th>
@@ -579,7 +579,7 @@
   </div>
 
   <h2>Table options</h2>
-  <table class="bordered-table striped-table">
+  <table class="table-bordered table-striped">
   <thead>
       <tr>
         <th>Name</th>
@@ -596,21 +596,21 @@
       <tr>
         <td>Bordered</td>
         <td>
-          <code>.bordered-table</code>
+          <code>.table-bordered</code>
         </td>
         <td>Rounds corners and adds outter border</td>
       </tr>
       <tr>
         <td>Zebra-stripe</td>
         <td>
-          <code>.striped-table</code>
+          <code>.table-striped</code>
         </td>
         <td>Adds light gray background color to odd rows (1, 3, 5, etc)</td>
       </tr>
       <tr>
         <td>Condensed</td>
         <td>
-          <code>.condensed-table</code>
+          <code>.table-condensed</code>
         </td>
         <td>Cuts vertical padding in half, from 8px to 4px, within all <code>td</code> and <code>th</code> elements</td>
       </tr>
@@ -667,15 +667,15 @@
   <h3>2. Striped table</h3>
   <div class="row">
     <div class="span4">
-      <p>Get a little fancy with your tables by adding zebra-striping&mdash;just add the <code>.striped-table</code> class.</p>
+      <p>Get a little fancy with your tables by adding zebra-striping&mdash;just add the <code>.table-striped</code> class.</p>
       <p class="muted"><strong>Note:</strong> Sprited tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.</p>
 <pre class="prettyprint linenums" style="margin-bottom: 18px;">
-&lt;table class="striped-table"&gt;
+&lt;table class="table-striped"&gt;
   ...
 &lt;/table&gt;</pre>
     </div>
     <div class="span8">
-      <table class="striped-table">
+      <table class="table-striped">
         <thead>
           <tr>
             <th>#</th>
@@ -714,12 +714,12 @@
     <div class="span4">
       <p>Add borders around the entire table and rounded corners for aesthetic purposes.</p>
 <pre class="prettyprint linenums">
-&lt;table class="bordered-table"&gt;
+&lt;table class="table-bordered"&gt;
   ...
 &lt;/table&gt;</pre>
     </div>
     <div class="span8">
-      <table class="bordered-table">
+      <table class="table-bordered">
         <thead>
           <tr>
             <th>#</th>
@@ -760,14 +760,14 @@
   <h3>4. Condensed table</h3>
   <div class="row">
     <div class="span4">
-      <p>Make your tables more compact by adding the <code>.condensed-table</code> class to cut table cell padding in half (from 10px to 5px).</p>
+      <p>Make your tables more compact by adding the <code>.table-condensed</code> class to cut table cell padding in half (from 10px to 5px).</p>
 <pre class="prettyprint linenums" style="margin-bottom: 18px;">
-&lt;table class="condensed-table"&gt;
+&lt;table class="table-condensed"&gt;
   ...
 &lt;/table&gt;</pre>
     </div>
     <div class="span8">
-      <table class="condensed-table">
+      <table class="table-condensed">
         <thead>
           <tr>
             <th>#</th>
@@ -816,12 +816,12 @@
     });
   });
 &lt;/script&gt;
-&lt;table class="striped-table"&gt;
+&lt;table class="table-striped"&gt;
   ...
 &lt;/table&gt;</pre>
     </div>
     <div class="span8">
-      <table class="striped-table tablesorter-example">
+      <table class="table-striped tablesorter-example">
         <thead>
           <tr>
             <th>#</th>
@@ -858,7 +858,7 @@
         </tbody>
       </table>
       <p>Styles for the Tablesorter, zebra striping, borders, and condensing may all compound in any variation to fit your needs.</p>
-      <table class="striped-table bordered-table condensed-table tablesorter-example">
+      <table class="table-striped table-bordered table-condensed tablesorter-example">
         <thead>
           <tr>
             <th>#</th>
@@ -932,7 +932,7 @@
 
   <h2>Four types of forms</h2>
   <p>Bootstrap provides simple markup and styles for four styles of common web forms.</p>
-  <table class="bordered-table striped-table">
+  <table class="table-bordered table-striped">
     <thead>
       <tr>
         <th>Name</th>
@@ -948,17 +948,17 @@
       </tr>
       <tr>
         <th>Horizontal</th>
-        <td><code>.horizontal-form</code></td>
+        <td><code>.form-horizontal</code></td>
         <td>Float left, right-aligned labels on same line as controls</td>
       </tr>
       <tr>
         <th>Inline</th>
-        <td><code>.inline-form</code></td>
+        <td><code>.form-inline</code></td>
         <td>Left-aligned label and inline-block controls for compact style</td>
       </tr>
       <tr>
         <th>Search</th>
-        <td><code>.search-form</code></td>
+        <td><code>.form-search</code></td>
         <td>Extra-rounded text input for a typical search aesthetic</td>
       </tr>
     </tbody>
@@ -981,16 +981,16 @@
     </div>
     <div class="span4">
       <h3>Search form</h3>
-      <p>Reflecting default WebKit styles, just add <code>.search-form</code> for extra rounded search fields.</p>
-      <form class="well search-form">
+      <p>Reflecting default WebKit styles, just add <code>.form-search</code> for extra rounded search fields.</p>
+      <form class="well form-search">
         <input type="text" class="input-medium search-query">
         <button type="submit" class="btn">Search</button>
       </form>
     </div>
     <div class="span4">
       <h3>Inline form</h3>
-      <p>Inputs are block level to start. For <code>.inline-form</code> and <code>.horizontal-form</code>, we use inline-block.</p>
-      <form class="well search-form">
+      <p>Inputs are block level to start. For <code>.form-inline</code> and <code>.form-horizontal</code>, we use inline-block.</p>
+      <form class="well form-search">
         <input type="text" class="input-small" placeholder="Email">
         <input type="password" class="input-small" placeholder="Password">
         <button type="submit" class="btn">Go</button>
@@ -1003,7 +1003,7 @@
   <h2>Horizontal forms</h2>
   <div class="row">
     <div class="span8">
-      <form class="horizontal-form">
+      <form class="form-horizontal">
         <legend>Controls Bootstrap supports</legend>
         <fieldset class="control-group">
           <label class="control-label" for="input01">Text input</label>
@@ -1087,7 +1087,7 @@
 
   <div class="row">
     <div class="span8">
-      <form class="horizontal-form">
+      <form class="form-horizontal">
         <legend>Form control states</legend>
         <fieldset class="control-group">
           <label class="control-label" for="focusedInput">Focused input</label>
@@ -1158,7 +1158,7 @@
 
   <div class="row">
     <div class="span8">
-      <form class="horizontal-form">
+      <form class="form-horizontal">
         <legend>Extending form controls</legend>
         <fieldset class="control-group">
           <label class="control-label">Form sizes</label>
@@ -1259,7 +1259,7 @@
   <div class="page-header">
     <h1>Buttons</h1>
   </div>
-  <table class="bordered-table striped-table">
+  <table class="table-bordered table-striped">
     <thead>
       <tr>
         <th>Button</th>
@@ -1517,13 +1517,13 @@
     </div>
     <div class="span3">
       <p>Or, use them in navigation.</p>
-      <div class="well side-nav">
-        <ul class="nav-group">
-          <li class="active"><a class="nav-item" href="#"><i class="home"></i> Home</a></li>
-          <li><a class="nav-item" href="#"><i class="book"></i> Library</a></li>
-          <li><a class="nav-item" href="#"><i class="cog"></i> Settings</a></li>
+      <div class="well" style="padding: 8px 0;">
+        <ul class="nav list">
+          <li class="active"><a href="#"><i class="home"></i> Home</a></li>
+          <li><a href="#"><i class="book"></i> Library</a></li>
+          <li><a href="#"><i class="pencil"></i> Applications</a></li>
         </ul>
-      </div>
+      </div> <!-- /well -->
     </div>
   </div>
 </section>
diff --git a/docs/index.html b/docs/index.html
index ffdac0b3f..cb924bae6 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -268,7 +268,7 @@
           ================================================== -->
           <h1>Get started in no time.</h1>
           <p class="marketing-byline">Quickly start using Bootstrap within your workflow and development process.</p>
-          <table class="bordered-table getting-started">
+          <table class="table-bordered getting-started">
             <tbody>
               <tr>
                 <td class="quick-start">
diff --git a/docs/javascript.html b/docs/javascript.html
index afe9c329e..64159ede7 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -284,7 +284,7 @@
           <p>Call the modal via javascript:</p>
           <pre class="prettyprint linenums">$('#myModal').modal(options)</pre>
           <h3>Options</h3>
-          <table class="bordered-table striped-table">
+          <table class="table-bordered table-striped">
             <thead>
              <tr>
                <th style="width: 100px;">Name</th>
@@ -349,7 +349,7 @@ $('#myModal').modal({
           <pre class="prettyprint linenums">$('#myModal').modal('hide')</pre>
           <h3>Events</h3>
           <p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p>
-          <table class="bordered-table striped-table">
+          <table class="table-bordered table-striped">
             <thead>
              <tr>
                <th style="width: 150px;">Event</th>
@@ -666,7 +666,7 @@ $('#myModal').on('hidden', function () {
 &lt;/script&gt;</pre>
           </p>
           <h3>Events</h3>
-          <table class="bordered-table striped-table">
+          <table class="table-bordered table-striped">
             <thead>
              <tr>
                <th style="width: 150px;">Event</th>
@@ -719,7 +719,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           <p>Trigger the tooltip via javascript:</p>
           <pre class="prettyprint linenums">$('#example').tooltip(options)</pre>
           <h3>Options</h3>
-          <table class="bordered-table striped-table">
+          <table class="table-bordered table-striped">
             <thead>
              <tr>
                <th style="width: 100px;">Name</th>
@@ -813,7 +813,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           <p>Enable popovers via javascript:</p>
           <pre class="prettyprint linenums">$('#example').popover(options)</pre>
           <h3>Options</h3>
-          <table class="bordered-table striped-table">
+          <table class="table-bordered table-striped">
             <thead>
              <tr>
                <th style="width: 100px;">Name</th>
@@ -932,7 +932,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           <pre class="prettyprint linenums">$(".alert-message").alert('close')</pre>
           <h3>Events</h3>
           <p>Bootstrap's alert class exposes a few events for hooking into alert functionality. </p>
-          <table class="bordered-table striped-table">
+          <table class="table-bordered table-striped">
             <thead>
              <tr>
                <th style="width: 150px;">Event</th>
@@ -975,7 +975,7 @@ $('#my-alert').bind('closed', function () {
         <div class="span9 columns">
           <h2>Example uses</h2>
           <p>Use the buttons plugin for states and toggles.</p>
-          <table class="bordered-table striped-table">
+          <table class="table-bordered table-striped">
             <tbody>
              <tr>
                <td>Stateful</td>
@@ -1115,7 +1115,7 @@ $('#my-alert').bind('closed', function () {
           <p>Enable via javascript:</p>
           <pre class="prettyprint linenums">$(".collapse").collapse()</pre>
           <h3>Options</h3>
-          <table class="bordered-table striped-table">
+          <table class="table-bordered table-striped">
             <thead>
              <tr>
                <th style="width: 100px;">Name</th>
@@ -1165,7 +1165,7 @@ $('#myCollapsible').collapse({
           <p>
             Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
           </p>
-          <table class="bordered-table striped-table">
+          <table class="table-bordered table-striped">
             <thead>
              <tr>
                <th style="width: 150px;">Event</th>
@@ -1251,7 +1251,7 @@ $('#myCollapsible').on('hidden', function () {
           <p>Call via javascript:</p>
           <pre class="prettyprint linenums">$('.carousel').carousel()</pre>
           <h3>Options</h3>
-          <table class="bordered-table striped-table">
+          <table class="table-bordered table-striped">
             <thead>
              <tr>
                <th style="width: 100px;">Name</th>
@@ -1300,7 +1300,7 @@ $('#myCollapsible').on('hidden', function () {
           <p>Cycles to the next item.</p>
           <h3>Events</h3>
           <p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p>
-          <table class="bordered-table striped-table">
+          <table class="table-bordered table-striped">
             <thead>
              <tr>
                <th style="width: 150px;">Event</th>
@@ -1348,7 +1348,7 @@ $('#myCollapsible').on('hidden', function () {
           <p>Call the typeahead via javascript:</p>
           <pre class="prettyprint linenums">$('.typeahead').typeahead()</pre>
           <h3>Options</h3>
-          <table class="bordered-table striped-table">
+          <table class="table-bordered table-striped">
             <thead>
              <tr>
                <th style="width: 100px;">Name</th>
diff --git a/docs/less.html b/docs/less.html
index f3bfa3059..357f242b1 100644
--- a/docs/less.html
+++ b/docs/less.html
@@ -160,7 +160,7 @@
       </div>
 
           <h3>Hyperlinks</h3>
-          <table class="bordered-table striped-table">
+          <table class="table-bordered table-striped">
             <thead>
               <tr>
                 <th>Variable</th>
@@ -185,7 +185,7 @@
       <div class="row">
         <div class="span6">
           <h3>Grayscale colors</h3>
-          <table class="bordered-table striped-table">
+          <table class="table-bordered table-striped">
             <tbody>
               <tr>
                 <td><code>@black</code></td>
@@ -216,7 +216,7 @@
         </div>
         <div class="span6">
           <h3>Accent colors</h3>
-          <table class="bordered-table striped-table">
+          <table class="table-bordered table-striped">
             <tbody>
               <tr>
                 <td><code>@blue</code></td>
@@ -254,7 +254,7 @@
       <div class="row">
         <div class="span6">
           <h3>Grid system</h3>
-          <table class="bordered-table striped-table">
+          <table class="table-bordered table-striped">
             <tbody>
               <tr>
                 <td><code>@gridColumns</code></td>
@@ -277,7 +277,7 @@
         </div>
         <div class="span6">
           <h3>Typography</h3>
-          <table class="bordered-table striped-table">
+          <table class="table-bordered table-striped">
             <tbody>
               <tr>
                 <td><code>@baseFontSize</code></td>
@@ -302,7 +302,7 @@
           <h3>Visuals</h3>
         </div>
         <div class="span9">
-          <table class="bordered-table striped-table">
+          <table class="table-bordered table-striped">
             <tbody>
               <tr>
                 <td><code>@primaryButtonColor</code></td>
@@ -453,7 +453,7 @@
     <h2 id="compiling">Compiling Less</h2>
     <p>After modifying the <code>.less</code> files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.</p>
     <h3>Ways to compile</h3>
-    <table class="bordered-table striped-table">
+    <table class="table-bordered table-striped">
       <thead>
         <tr>
           <th style="width: 120px;">Method</th>
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index b2b4b5647..eab6fedf5 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -223,7 +223,7 @@
   </div>
 
   <h2>Grid customization</h2>
-  <table class="bordered-table striped-table">
+  <table class="table-bordered table-striped">
     <thead>
       <tr>
         <th>Variable</th>
@@ -335,7 +335,7 @@
     <div class="span8">
       <h2>Supported devices</h2>
       <p>Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:</p>
-      <table class="bordered-table striped-table">
+      <table class="table-bordered table-striped">
         <thead>
           <tr>
             <th>Label</th>