root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 12 Packages Projects Releases Wiki Activity

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

This commit is contained in:
Mark Otto 2012-01-14 21:28:47 -08:00
parent 6d916763f8
commit dab6d2b17c
11 changed files with 120 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
bootstrap.css vendored
View File

@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Designed and built with all the love in the world @twitter by @mdo and @fat. * 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 { html, body {
margin: 0; margin: 0;
@ -942,22 +942,22 @@ input::-webkit-input-placeholder {
-moz-border-radius: 14px; -moz-border-radius: 14px;
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; display: inline-block;
margin-bottom: 0; margin-bottom: 0;
} }
.search-form label, .inline-form label { .form-search label, .form-inline label {
display: inline-block; display: inline-block;
} }
.control-group { .control-group {
@ -966,16 +966,16 @@ input::-webkit-input-placeholder {
.control-group > label { .control-group > label {
font-weight: bold; font-weight: bold;
} }
.horizontal-form .control-group > label { .form-horizontal .control-group > label {
float: left; float: left;
width: 130px; width: 130px;
padding-top: 5px; padding-top: 5px;
text-align: right; text-align: right;
} }
.horizontal-form .controls { .form-horizontal .controls {
margin-left: 150px; margin-left: 150px;
} }
.horizontal-form .form-actions { .form-horizontal .form-actions {
padding-left: 150px; padding-left: 150px;
} }
table { table {
@ -1001,46 +1001,46 @@ thead:first-child tr th, thead:first-child tr td {
tbody + tbody { tbody + tbody {
border-top: 2px solid #ddd; border-top: 2px solid #ddd;
} }
.condensed-table th, .condensed-table td { .table-condensed th, .table-condensed td {
padding: 4px 5px; padding: 4px 5px;
} }
.bordered-table { .table-bordered {
border: 1px solid #ddd; border: 1px solid #ddd;
border-collapse: separate; border-collapse: separate;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
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; 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; 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; -webkit-border-radius: 4px 0 0 0;
-moz-border-radius: 4px 0 0 0; -moz-border-radius: 4px 0 0 0;
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; -webkit-border-radius: 0 4px 0 0;
-moz-border-radius: 0 4px 0 0; -moz-border-radius: 0 4px 0 0;
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; -webkit-border-radius: 0 0 0 4px;
-moz-border-radius: 0 0 0 4px; -moz-border-radius: 0 0 0 4px;
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; -webkit-border-radius: 0 0 4px 0;
-moz-border-radius: 0 0 4px 0; -moz-border-radius: 0 0 4px 0;
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; background-color: #f9f9f9;
} }
table .span1 { table .span1 {
@ -3071,19 +3071,19 @@ a.thumbnail:hover {
.navbar .nav:hover > li > a:hover { .navbar .nav:hover > li > a:hover {
background-color: #333; background-color: #333;
} }
.horizontal-form .control-group > label { .form-horizontal .control-group > label {
float: none; float: none;
width: auto; width: auto;
padding-top: 0; padding-top: 0;
text-align: left; text-align: left;
} }
.horizontal-form .controls { .form-horizontal .controls {
margin-left: 0; margin-left: 0;
} }
.horizontal-form .control-list { .form-horizontal .control-list {
padding-top: 0; padding-top: 0;
} }
.horizontal-form .form-actions { .form-horizontal .form-actions {
padding-left: 0; padding-left: 0;
} }
.modal { .modal {

28
bootstrap.min.css vendored
View File

@ -169,27 +169,27 @@ input::-webkit-input-placeholder{color:#999999;}
.input-append .uneditable-input{border-right-color:#ccc;} .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;} .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-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{margin-bottom:18px;}
.control-group>label{font-weight:bold;} .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;} table{width:100%;margin-bottom:18px;}
th,td{padding:8px;line-height:18px;text-align:left;border-top:1px solid #ddd;} th,td{padding:8px;line-height:18px;text-align:left;border-top:1px solid #ddd;}
th{font-weight:bold;vertical-align:bottom;} th{font-weight:bold;vertical-align:bottom;}
td{vertical-align:top;} td{vertical-align:top;}
thead:first-child tr th,thead:first-child tr td{border-top:0;} thead:first-child tr th,thead:first-child tr td{border-top:0;}
tbody+tbody{border-top:2px solid #ddd;} 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 .span1{float:none;width:44px;margin-left:0;}
table .span2{float:none;width:124px;margin-left:0;} table .span2{float:none;width:124px;margin-left:0;}
table .span3{float:none;width:204px;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;} .show{display:block;}
.invisible{visibility:hidden;} .invisible{visibility:hidden;}
.hidden{display:none;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:"↓";} .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:"↓";} .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;}}

1
docs/assets/css/docs.css
View File

@ -116,7 +116,6 @@ section {
/* supporting docs pages */ /* supporting docs pages */
.subhead { .subhead {
padding-bottom: 14px; padding-bottom: 14px;
margin-bottom: 45px;
border-bottom: 3px solid #e5e5e5; border-bottom: 3px solid #e5e5e5;
} }
.subhead h1, .subhead h1,

76
docs/base-css.html
View File

@ -150,7 +150,7 @@
<!-- Misc Elements --> <!-- Misc Elements -->
<h2>Emphasis, address, and abbreviation</h2> <h2>Emphasis, address, and abbreviation</h2>
<table class="bordered-table striped-table"> <table class="table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th>Element</th> <th>Element</th>
@ -237,7 +237,7 @@
<!-- Blockquotes --> <!-- Blockquotes -->
<h2>Blockquotes</h2> <h2>Blockquotes</h2>
<table class="bordered-table striped-table"> <table class="table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th>Element</th> <th>Element</th>
@ -383,7 +383,7 @@
<!-- Code --> <!-- Code -->
<h2>Code <small>Inline and block</small></h2> <h2>Code <small>Inline and block</small></h2>
<table class="bordered-table striped-table"> <table class="table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 190px;">Element</th> <th style="width: 190px;">Element</th>
@ -425,7 +425,7 @@
<!-- Labels --> <!-- Labels -->
<h2>Inline labels <small>for special attention</small></h2> <h2>Inline labels <small>for special attention</small></h2>
<table class="bordered-table striped-table"> <table class="table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 190px;">Labels</th> <th style="width: 190px;">Labels</th>
@ -490,7 +490,7 @@
<h2>Table markup</h2> <h2>Table markup</h2>
<div class="row"> <div class="row">
<div class="span8"> <div class="span8">
<table class="bordered-table striped-table"> <table class="table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th>Tag</th> <th>Tag</th>
@ -579,7 +579,7 @@
</div> </div>
<h2>Table options</h2> <h2>Table options</h2>
<table class="bordered-table striped-table"> <table class="table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -596,21 +596,21 @@
<tr> <tr>
<td>Bordered</td> <td>Bordered</td>
<td> <td>
<code>.bordered-table</code> <code>.table-bordered</code>
</td> </td>
<td>Rounds corners and adds outter border</td> <td>Rounds corners and adds outter border</td>
</tr> </tr>
<tr> <tr>
<td>Zebra-stripe</td> <td>Zebra-stripe</td>
<td> <td>
<code>.striped-table</code> <code>.table-striped</code>
</td> </td>
<td>Adds light gray background color to odd rows (1, 3, 5, etc)</td> <td>Adds light gray background color to odd rows (1, 3, 5, etc)</td>
</tr> </tr>
<tr> <tr>
<td>Condensed</td> <td>Condensed</td>
<td> <td>
<code>.condensed-table</code> <code>.table-condensed</code>
</td> </td>
<td>Cuts vertical padding in half, from 8px to 4px, within all <code>td</code> and <code>th</code> elements</td> <td>Cuts vertical padding in half, from 8px to 4px, within all <code>td</code> and <code>th</code> elements</td>
</tr> </tr>
@ -667,15 +667,15 @@
<h3>2. Striped table</h3> <h3>2. Striped table</h3>
<div class="row"> <div class="row">
<div class="span4"> <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> <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;"> <pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="striped-table"&gt; &lt;table class="table-striped"&gt;
... ...
&lt;/table&gt;</pre> &lt;/table&gt;</pre>
</div> </div>
<div class="span8"> <div class="span8">
<table class="striped-table"> <table class="table-striped">
<thead> <thead>
<tr> <tr>
<th>#</th> <th>#</th>
@ -714,12 +714,12 @@
<div class="span4"> <div class="span4">
<p>Add borders around the entire table and rounded corners for aesthetic purposes.</p> <p>Add borders around the entire table and rounded corners for aesthetic purposes.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;table class="bordered-table"&gt; &lt;table class="table-bordered"&gt;
... ...
&lt;/table&gt;</pre> &lt;/table&gt;</pre>
</div> </div>
<div class="span8"> <div class="span8">
<table class="bordered-table"> <table class="table-bordered">
<thead> <thead>
<tr> <tr>
<th>#</th> <th>#</th>
@ -760,14 +760,14 @@
<h3>4. Condensed table</h3> <h3>4. Condensed table</h3>
<div class="row"> <div class="row">
<div class="span4"> <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;"> <pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="condensed-table"&gt; &lt;table class="table-condensed"&gt;
... ...
&lt;/table&gt;</pre> &lt;/table&gt;</pre>
</div> </div>
<div class="span8"> <div class="span8">
<table class="condensed-table"> <table class="table-condensed">
<thead> <thead>
<tr> <tr>
<th>#</th> <th>#</th>
@ -816,12 +816,12 @@
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
&lt;table class="striped-table"&gt; &lt;table class="table-striped"&gt;
... ...
&lt;/table&gt;</pre> &lt;/table&gt;</pre>
</div> </div>
<div class="span8"> <div class="span8">
<table class="striped-table tablesorter-example"> <table class="table-striped tablesorter-example">
<thead> <thead>
<tr> <tr>
<th>#</th> <th>#</th>
@ -858,7 +858,7 @@
</tbody> </tbody>
</table> </table>
<p>Styles for the Tablesorter, zebra striping, borders, and condensing may all compound in any variation to fit your needs.</p> <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> <thead>
<tr> <tr>
<th>#</th> <th>#</th>
@ -932,7 +932,7 @@
<h2>Four types of forms</h2> <h2>Four types of forms</h2>
<p>Bootstrap provides simple markup and styles for four styles of common web forms.</p> <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> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -948,17 +948,17 @@
</tr> </tr>
<tr> <tr>
<th>Horizontal</th> <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> <td>Float left, right-aligned labels on same line as controls</td>
</tr> </tr>
<tr> <tr>
<th>Inline</th> <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> <td>Left-aligned label and inline-block controls for compact style</td>
</tr> </tr>
<tr> <tr>
<th>Search</th> <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> <td>Extra-rounded text input for a typical search aesthetic</td>
</tr> </tr>
</tbody> </tbody>
@ -981,16 +981,16 @@
</div> </div>
<div class="span4"> <div class="span4">
<h3>Search form</h3> <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"> <input type="text" class="input-medium search-query">
<button type="submit" class="btn">Search</button> <button type="submit" class="btn">Search</button>
</form> </form>
</div> </div>
<div class="span4"> <div class="span4">
<h3>Inline form</h3> <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="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password"> <input type="password" class="input-small" placeholder="Password">
<button type="submit" class="btn">Go</button> <button type="submit" class="btn">Go</button>
@ -1003,7 +1003,7 @@
<h2>Horizontal forms</h2> <h2>Horizontal forms</h2>
<div class="row"> <div class="row">
<div class="span8"> <div class="span8">
<form class="horizontal-form"> <form class="form-horizontal">
<legend>Controls Bootstrap supports</legend> <legend>Controls Bootstrap supports</legend>
<fieldset class="control-group"> <fieldset class="control-group">
<label class="control-label" for="input01">Text input</label> <label class="control-label" for="input01">Text input</label>
@ -1087,7 +1087,7 @@
<div class="row"> <div class="row">
<div class="span8"> <div class="span8">
<form class="horizontal-form"> <form class="form-horizontal">
<legend>Form control states</legend> <legend>Form control states</legend>
<fieldset class="control-group"> <fieldset class="control-group">
<label class="control-label" for="focusedInput">Focused input</label> <label class="control-label" for="focusedInput">Focused input</label>
@ -1158,7 +1158,7 @@
<div class="row"> <div class="row">
<div class="span8"> <div class="span8">
<form class="horizontal-form"> <form class="form-horizontal">
<legend>Extending form controls</legend> <legend>Extending form controls</legend>
<fieldset class="control-group"> <fieldset class="control-group">
<label class="control-label">Form sizes</label> <label class="control-label">Form sizes</label>
@ -1259,7 +1259,7 @@
<div class="page-header"> <div class="page-header">
<h1>Buttons</h1> <h1>Buttons</h1>
</div> </div>
<table class="bordered-table striped-table"> <table class="table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th>Button</th> <th>Button</th>
@ -1517,13 +1517,13 @@
</div> </div>
<div class="span3"> <div class="span3">
<p>Or, use them in navigation.</p> <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> </ul>
</div> </div> <!-- /well -->
</div> </div>
</div> </div>
</section> </section>

2
docs/index.html
View File

@ -268,7 +268,7 @@
================================================== --> ================================================== -->
<h1>Get started in no time.</h1> <h1>Get started in no time.</h1>
<p class="marketing-byline">Quickly start using Bootstrap within your workflow and development process.</p> <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> <tbody>
<tr> <tr>
<td class="quick-start"> <td class="quick-start">

24
docs/javascript.html
View File

@ -284,7 +284,7 @@
<p>Call the modal via javascript:</p> <p>Call the modal via javascript:</p>
<pre class="prettyprint linenums">$('#myModal').modal(options)</pre> <pre class="prettyprint linenums">$('#myModal').modal(options)</pre>
<h3>Options</h3> <h3>Options</h3>
<table class="bordered-table striped-table"> <table class="table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th style="width: 100px;">Name</th>
@ -349,7 +349,7 @@ $('#myModal').modal({
<pre class="prettyprint linenums">$('#myModal').modal('hide')</pre> <pre class="prettyprint linenums">$('#myModal').modal('hide')</pre>
<h3>Events</h3> <h3>Events</h3>
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p> <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> <thead>
<tr> <tr>
<th style="width: 150px;">Event</th> <th style="width: 150px;">Event</th>
@ -666,7 +666,7 @@ $('#myModal').on('hidden', function () {
&lt;/script&gt;</pre> &lt;/script&gt;</pre>
</p> </p>
<h3>Events</h3> <h3>Events</h3>
<table class="bordered-table striped-table"> <table class="table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 150px;">Event</th> <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> <p>Trigger the tooltip via javascript:</p>
<pre class="prettyprint linenums">$('#example').tooltip(options)</pre> <pre class="prettyprint linenums">$('#example').tooltip(options)</pre>
<h3>Options</h3> <h3>Options</h3>
<table class="bordered-table striped-table"> <table class="table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th style="width: 100px;">Name</th>
@ -813,7 +813,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<p>Enable popovers via javascript:</p> <p>Enable popovers via javascript:</p>
<pre class="prettyprint linenums">$('#example').popover(options)</pre> <pre class="prettyprint linenums">$('#example').popover(options)</pre>
<h3>Options</h3> <h3>Options</h3>
<table class="bordered-table striped-table"> <table class="table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <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> <pre class="prettyprint linenums">$(".alert-message").alert('close')</pre>
<h3>Events</h3> <h3>Events</h3>
<p>Bootstrap's alert class exposes a few events for hooking into alert functionality. </p> <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> <thead>
<tr> <tr>
<th style="width: 150px;">Event</th> <th style="width: 150px;">Event</th>
@ -975,7 +975,7 @@ $('#my-alert').bind('closed', function () {
<div class="span9 columns"> <div class="span9 columns">
<h2>Example uses</h2> <h2>Example uses</h2>
<p>Use the buttons plugin for states and toggles.</p> <p>Use the buttons plugin for states and toggles.</p>
<table class="bordered-table striped-table"> <table class="table-bordered table-striped">
<tbody> <tbody>
<tr> <tr>
<td>Stateful</td> <td>Stateful</td>
@ -1115,7 +1115,7 @@ $('#my-alert').bind('closed', function () {
<p>Enable via javascript:</p> <p>Enable via javascript:</p>
<pre class="prettyprint linenums">$(".collapse").collapse()</pre> <pre class="prettyprint linenums">$(".collapse").collapse()</pre>
<h3>Options</h3> <h3>Options</h3>
<table class="bordered-table striped-table"> <table class="table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th style="width: 100px;">Name</th>
@ -1165,7 +1165,7 @@ $('#myCollapsible').collapse({
<p> <p>
Bootstrap's collapse class exposes a few events for hooking into collapse functionality. Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
</p> </p>
<table class="bordered-table striped-table"> <table class="table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 150px;">Event</th> <th style="width: 150px;">Event</th>
@ -1251,7 +1251,7 @@ $('#myCollapsible').on('hidden', function () {
<p>Call via javascript:</p> <p>Call via javascript:</p>
<pre class="prettyprint linenums">$('.carousel').carousel()</pre> <pre class="prettyprint linenums">$('.carousel').carousel()</pre>
<h3>Options</h3> <h3>Options</h3>
<table class="bordered-table striped-table"> <table class="table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th style="width: 100px;">Name</th>
@ -1300,7 +1300,7 @@ $('#myCollapsible').on('hidden', function () {
<p>Cycles to the next item.</p> <p>Cycles to the next item.</p>
<h3>Events</h3> <h3>Events</h3>
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p> <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> <thead>
<tr> <tr>
<th style="width: 150px;">Event</th> <th style="width: 150px;">Event</th>
@ -1348,7 +1348,7 @@ $('#myCollapsible').on('hidden', function () {
<p>Call the typeahead via javascript:</p> <p>Call the typeahead via javascript:</p>
<pre class="prettyprint linenums">$('.typeahead').typeahead()</pre> <pre class="prettyprint linenums">$('.typeahead').typeahead()</pre>
<h3>Options</h3> <h3>Options</h3>
<table class="bordered-table striped-table"> <table class="table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th style="width: 100px;">Name</th>

14
docs/less.html
View File

@ -160,7 +160,7 @@
</div> </div>
<h3>Hyperlinks</h3> <h3>Hyperlinks</h3>
<table class="bordered-table striped-table"> <table class="table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th>Variable</th> <th>Variable</th>
@ -185,7 +185,7 @@
<div class="row"> <div class="row">
<div class="span6"> <div class="span6">
<h3>Grayscale colors</h3> <h3>Grayscale colors</h3>
<table class="bordered-table striped-table"> <table class="table-bordered table-striped">
<tbody> <tbody>
<tr> <tr>
<td><code>@black</code></td> <td><code>@black</code></td>
@ -216,7 +216,7 @@
</div> </div>
<div class="span6"> <div class="span6">
<h3>Accent colors</h3> <h3>Accent colors</h3>
<table class="bordered-table striped-table"> <table class="table-bordered table-striped">
<tbody> <tbody>
<tr> <tr>
<td><code>@blue</code></td> <td><code>@blue</code></td>
@ -254,7 +254,7 @@
<div class="row"> <div class="row">
<div class="span6"> <div class="span6">
<h3>Grid system</h3> <h3>Grid system</h3>
<table class="bordered-table striped-table"> <table class="table-bordered table-striped">
<tbody> <tbody>
<tr> <tr>
<td><code>@gridColumns</code></td> <td><code>@gridColumns</code></td>
@ -277,7 +277,7 @@
</div> </div>
<div class="span6"> <div class="span6">
<h3>Typography</h3> <h3>Typography</h3>
<table class="bordered-table striped-table"> <table class="table-bordered table-striped">
<tbody> <tbody>
<tr> <tr>
<td><code>@baseFontSize</code></td> <td><code>@baseFontSize</code></td>
@ -302,7 +302,7 @@
<h3>Visuals</h3> <h3>Visuals</h3>
</div> </div>
<div class="span9"> <div class="span9">
<table class="bordered-table striped-table"> <table class="table-bordered table-striped">
<tbody> <tbody>
<tr> <tr>
<td><code>@primaryButtonColor</code></td> <td><code>@primaryButtonColor</code></td>
@ -453,7 +453,7 @@
<h2 id="compiling">Compiling Less</h2> <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> <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> <h3>Ways to compile</h3>
<table class="bordered-table striped-table"> <table class="table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 120px;">Method</th> <th style="width: 120px;">Method</th>

4
docs/scaffolding.html
View File

@ -223,7 +223,7 @@
</div> </div>
<h2>Grid customization</h2> <h2>Grid customization</h2>
<table class="bordered-table striped-table"> <table class="table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th>Variable</th> <th>Variable</th>
@ -335,7 +335,7 @@
<div class="span8"> <div class="span8">
<h2>Supported devices</h2> <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> <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> <thead>
<tr> <tr>
<th>Label</th> <th>Label</th>

12
lib/forms.less
View File

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

8
lib/responsive.less
View File

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

6
lib/tables.less
View File

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