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

dab6d2b1 · Mark Otto · 6d916763 · dab6d2b1 · dab6d2b1 · dab6d2b1
Commit dab6d2b1 authored Jan 14, 2012 by Mark Otto
11 changed files
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,7 +6,7 @@
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Sat Jan 14 20:53:46 PST 2012
+ * Date: Sat Jan 14 21:26:13 PST 2012
 */
 html, body {
  margin: 0;
@@ -942,22 +942,22 @@ input::-webkit-input-placeholder {
  -moz-border-radius: 14px;
  border-radius: 14px;
 }
-.search-form input,
+.form-search input,
-.inline-form input,
+.form-inline input,
-.horizontal-form input,
+.form-horizontal input,
-.search-form textarea,
+.form-search textarea,
-.inline-form textarea,
+.form-inline textarea,
-.horizontal-form textarea,
+.form-horizontal textarea,
-.search-form select,
+.form-search select,
-.inline-form select,
+.form-inline select,
-.horizontal-form select,
+.form-horizontal select,
-.search-form .uneditable-input,
+.form-search .uneditable-input,
-.inline-form .uneditable-input,
+.form-inline .uneditable-input,
-.horizontal-form .uneditable-input {
+.form-horizontal .uneditable-input {
  display: inline-block;
  margin-bottom: 0;
 }
-.search-form label, .inline-form label {
+.form-search label, .form-inline label {
  display: inline-block;
 }
 .control-group {
@@ -966,16 +966,16 @@ input::-webkit-input-placeholder {
 .control-group > label {
  font-weight: bold;
 }
-.horizontal-form .control-group > label {
+.form-horizontal .control-group > label {
  float: left;
  width: 130px;
  padding-top: 5px;
  text-align: right;
 }
-.horizontal-form .controls {
+.form-horizontal .controls {
  margin-left: 150px;
 }
-.horizontal-form .form-actions {
+.form-horizontal .form-actions {
  padding-left: 150px;
 }
 table {
@@ -1001,46 +1001,46 @@ thead:first-child tr th, thead:first-child tr td {
 tbody + tbody {
  border-top: 2px solid #ddd;
 }
-.condensed-table th, .condensed-table td {
+.table-condensed th, .table-condensed td {
  padding: 4px 5px;
 }
-.bordered-table {
+.table-bordered {
  border: 1px solid #ddd;
  border-collapse: separate;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
 }
-.bordered-table th + th,
+.table-bordered th + th,
-.bordered-table td + td,
+.table-bordered td + td,
-.bordered-table th + td,
+.table-bordered th + td,
-.bordered-table td + th {
+.table-bordered td + th {
  border-left: 1px solid #ddd;
 }
-.bordered-table thead:first-child tr:first-child th, .bordered-table tbody:first-child tr:first-child th, .bordered-table tbody:first-child tr:first-child td {
+.table-bordered thead:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child td {
  border-top: 0;
 }
-.bordered-table thead:first-child tr:first-child th:first-child, .bordered-table tbody:first-child tr:first-child td:first-child {
+.table-bordered thead:first-child tr:first-child th:first-child, .table-bordered tbody:first-child tr:first-child td:first-child {
  -webkit-border-radius: 4px 0 0 0;
  -moz-border-radius: 4px 0 0 0;
  border-radius: 4px 0 0 0;
 }
-.bordered-table thead:first-child tr:first-child th:last-child, .bordered-table tbody:first-child tr:first-child td:last-child {
+.table-bordered thead:first-child tr:first-child th:last-child, .table-bordered tbody:first-child tr:first-child td:last-child {
  -webkit-border-radius: 0 4px 0 0;
  -moz-border-radius: 0 4px 0 0;
  border-radius: 0 4px 0 0;
 }
-.bordered-table thead:last-child tr:last-child th:first-child, .bordered-table tbody:last-child tr:last-child td:first-child {
+.table-bordered thead:last-child tr:last-child th:first-child, .table-bordered tbody:last-child tr:last-child td:first-child {
  -webkit-border-radius: 0 0 0 4px;
  -moz-border-radius: 0 0 0 4px;
  border-radius: 0 0 0 4px;
 }
-.bordered-table thead:last-child tr:last-child th:last-child, .bordered-table tbody:last-child tr:last-child td:last-child {
+.table-bordered thead:last-child tr:last-child th:last-child, .table-bordered tbody:last-child tr:last-child td:last-child {
  -webkit-border-radius: 0 0 4px 0;
  -moz-border-radius: 0 0 4px 0;
  border-radius: 0 0 4px 0;
 }
-.striped-table tbody tr:nth-child(odd) td, .striped-table tbody tr:nth-child(odd) th {
+.table-striped tbody tr:nth-child(odd) td, .table-striped tbody tr:nth-child(odd) th {
  background-color: #f9f9f9;
 }
 table .span1 {
@@ -3071,19 +3071,19 @@ a.thumbnail:hover {
  .navbar .nav:hover > li > a:hover {
    background-color: #333;
  }
-  .horizontal-form .control-group > label {
+  .form-horizontal .control-group > label {
    float: none;
    width: auto;
    padding-top: 0;
    text-align: left;
  }
-  .horizontal-form .controls {
+  .form-horizontal .controls {
    margin-left: 0;
  }
-  .horizontal-form .control-list {
+  .form-horizontal .control-list {
    padding-top: 0;
  }
-  .horizontal-form .form-actions {
+  .form-horizontal .form-actions {
    padding-left: 0;
  }
  .modal {

--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -169,27 +169,27 @@ input::-webkit-input-placeholder{color:#999999;}
 .input-append .uneditable-input{border-right-color:#ccc;}
 .input-append .add-on{margin-right:0;margin-left:-1px;-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
 .search-query{padding-left:14px;padding-right:14px;margin-bottom:0;-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;}
-.search-form input,.inline-form input,.horizontal-form input,.search-form textarea,.inline-form textarea,.horizontal-form textarea,.search-form select,.inline-form select,.horizontal-form select,.search-form .uneditable-input,.inline-form .uneditable-input,.horizontal-form .uneditable-input{display:inline-block;margin-bottom:0;}
+.form-search input,.form-inline input,.form-horizontal input,.form-search textarea,.form-inline textarea,.form-horizontal textarea,.form-search select,.form-inline select,.form-horizontal select,.form-search .uneditable-input,.form-inline .uneditable-input,.form-horizontal .uneditable-input{display:inline-block;margin-bottom:0;}
-.search-form label,.inline-form label{display:inline-block;}
+.form-search label,.form-inline label{display:inline-block;}
 .control-group{margin-bottom:18px;}
 .control-group>label{font-weight:bold;}
-.horizontal-form .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;}
+.form-horizontal .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;}
-.horizontal-form .controls{margin-left:150px;}
+.form-horizontal .controls{margin-left:150px;}
-.horizontal-form .form-actions{padding-left:150px;}
+.form-horizontal .form-actions{padding-left:150px;}
 table{width:100%;margin-bottom:18px;}
 th,td{padding:8px;line-height:18px;text-align:left;border-top:1px solid #ddd;}
 th{font-weight:bold;vertical-align:bottom;}
 td{vertical-align:top;}
 thead:first-child tr th,thead:first-child tr td{border-top:0;}
 tbody+tbody{border-top:2px solid #ddd;}
-.condensed-table th,.condensed-table td{padding:4px 5px;}
+.table-condensed th,.table-condensed td{padding:4px 5px;}
-.bordered-table{border:1px solid #ddd;border-collapse:separate;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.bordered-table th+th,.bordered-table td+td,.bordered-table th+td,.bordered-table td+th{border-left:1px solid #ddd;}
+.table-bordered{border:1px solid #ddd;border-collapse:separate;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.table-bordered th+th,.table-bordered td+td,.table-bordered th+td,.table-bordered td+th{border-left:1px solid #ddd;}
-.bordered-table thead:first-child tr:first-child th,.bordered-table tbody:first-child tr:first-child th,.bordered-table tbody:first-child tr:first-child td{border-top:0;}
+.table-bordered thead:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child td{border-top:0;}
-.bordered-table thead:first-child tr:first-child th:first-child,.bordered-table tbody:first-child tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;}
+.table-bordered thead:first-child tr:first-child th:first-child,.table-bordered tbody:first-child tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;}
-.bordered-table thead:first-child tr:first-child th:last-child,.bordered-table tbody:first-child tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;}
+.table-bordered thead:first-child tr:first-child th:last-child,.table-bordered tbody:first-child tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;}
-.bordered-table thead:last-child tr:last-child th:first-child,.bordered-table tbody:last-child tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;}
+.table-bordered thead:last-child tr:last-child th:first-child,.table-bordered tbody:last-child tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;}
-.bordered-table thead:last-child tr:last-child th:last-child,.bordered-table tbody:last-child tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;}
+.table-bordered thead:last-child tr:last-child th:last-child,.table-bordered tbody:last-child tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;}
-.striped-table tbody tr:nth-child(odd) td,.striped-table tbody tr:nth-child(odd) th{background-color:#f9f9f9;}
+.table-striped tbody tr:nth-child(odd) td,.table-striped tbody tr:nth-child(odd) th{background-color:#f9f9f9;}
 table .span1{float:none;width:44px;margin-left:0;}
 table .span2{float:none;width:124px;margin-left:0;}
 table .span3{float:none;width:204px;margin-left:0;}
@@ -529,4 +529,4 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105,
 .show{display:block;}
 .invisible{visibility:hidden;}
 .hidden{display:none;visibility:hidden;}
-@media (max-width: 480px){.navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"&darr;";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal.fade.in{top:auto;} .modal-header .close{padding:10px;}}@media (max-width: 768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}
+@media (max-width: 480px){.navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"&darr;";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal.fade.in{top:auto;} .modal-header .close{padding:10px;}}@media (max-width: 768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}
--- 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,

--- 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>
+      <p>Reflecting default WebKit styles, just add <code>.form-search</code> for extra rounded search fields.</p>
-      <form class="well search-form">
+      <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>
+      <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 search-form">
+      <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">
+      <div class="well" style="padding: 8px 0;">
-        <ul class="nav-group">
+        <ul class="nav list">
-          <li class="active"><a class="nav-item" href="#"><i class="home"></i> Home</a></li>
+          <li class="active"><a href="#"><i class="home"></i> Home</a></li>
-          <li><a class="nav-item" href="#"><i class="book"></i> Library</a></li>
+          <li><a href="#"><i class="book"></i> Library</a></li>
-          <li><a class="nav-item" href="#"><i class="cog"></i> Settings</a></li>
+          <li><a href="#"><i class="pencil"></i> Applications</a></li>
        </ul>
-      </div>
+      </div> <!-- /well -->
    </div>
  </div>
 </section>

--- 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">

--- 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>

--- 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>

--- 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>

--- a/lib/forms.less
+++ b/lib/forms.less
@@ -441,9 +441,9 @@ input::-webkit-input-placeholder {
 // Common properties
 // -----------------
-.search-form,
+.form-search,
-.inline-form,
+.form-inline,
-.horizontal-form {
+.form-horizontal {
  input,
  textarea,
  select,
@@ -452,8 +452,8 @@ input::-webkit-input-placeholder {
    margin-bottom: 0;
  }
 }
-.search-form label,
+.form-search label,
-.inline-form label {
+.form-inline label {
  display: inline-block;
 }
@@ -469,7 +469,7 @@ input::-webkit-input-placeholder {
 // Horizontal-specific styles
 // --------------------------
-.horizontal-form {
+.form-horizontal {
  // Float the labels left
  .control-group > label {
    float: left;

--- a/lib/responsive.less
+++ b/lib/responsive.less
@@ -76,22 +76,22 @@
  }
  // Remove the horizontal form styles
-  .horizontal-form .control-group > label {
+  .form-horizontal .control-group > label {
    float: none;
    width: auto;
    padding-top: 0;
    text-align: left;
  }
  // Move over all input controls and content
-  .horizontal-form .controls {
+  .form-horizontal .controls {
    margin-left: 0;
  }
  // Move the options list down to align with labels
-  .horizontal-form .control-list {
+  .form-horizontal .control-list {
    padding-top: 0; // has to be padding because margin collaspes
  }
  // Move over buttons in .form-actions to align with .controls
-  .horizontal-form .form-actions {
+  .form-horizontal .form-actions {
    padding-left: 0;
  }

--- a/lib/tables.less
+++ b/lib/tables.less
@@ -42,7 +42,7 @@ tbody + tbody {
 // CONDENSED TABLE W/ HALF PADDING
 // -------------------------------
-.condensed-table {
+.table-condensed {
  th,
  td {
    padding: 4px 5px;
@@ -53,7 +53,7 @@ tbody + tbody {
 // BORDERED VERSION
 // ----------------
-.bordered-table {
+.table-bordered {
  border: 1px solid #ddd;
  border-collapse: separate; // Done so we can round those corners!
  .border-radius(4px);
@@ -94,7 +94,7 @@ tbody + tbody {
 // --------------
 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
-.striped-table {
+.table-striped {
  tbody {
    tr:nth-child(odd) td,
    tr:nth-child(odd) th {