change up classes on tables and forms, fix nav list styles in example
This commit is contained in:
Mark Otto
parent
6d916763f8
commit
dab6d2b17c
|
|
@ -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,
|
||||
.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 {
|
||||
.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 {
|
||||
.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,
|
||||
.bordered-table td + td,
|
||||
.bordered-table th + td,
|
||||
.bordered-table td + th {
|
||||
.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 {
|
||||
.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 {
|
||||
|
|
|
|||
|
|
@ -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;}
|
||||
.search-form label,.inline-form label{display:inline-block;}
|
||||
.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;}
|
||||
.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;}
|
||||
.horizontal-form .controls{margin-left:150px;}
|
||||
.horizontal-form .form-actions{padding-left:150px;}
|
||||
.form-horizontal .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;}
|
||||
.form-horizontal .controls{margin-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;}
|
||||
.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;}
|
||||
.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;}
|
||||
.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;}
|
||||
.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;}
|
||||
.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;}
|
||||
.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;}
|
||||
.striped-table tbody tr:nth-child(odd) td,.striped-table tbody tr:nth-child(odd) th{background-color:#f9f9f9;}
|
||||
.table-condensed th,.table-condensed td{padding:4px 5px;}
|
||||
.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;}
|
||||
.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;}
|
||||
.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;}
|
||||
.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;}
|
||||
.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;}
|
||||
.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;}
|
||||
.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:"↓";} .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;}}
|
||||
|
|
|
|||
|
|
@ -116,7 +116,6 @@ section {
|
|||
/* supporting docs pages */
|
||||
.subhead {
|
||||
padding-bottom: 14px;
|
||||
margin-bottom: 45px;
|
||||
border-bottom: 3px solid #e5e5e5;
|
||||
}
|
||||
.subhead h1,
|
||||
|
|
|
|||
|
|
@ -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—just add the <code>.striped-table</code> class.</p>
|
||||
<p>Get a little fancy with your tables by adding zebra-striping—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;">
|
||||
<table class="striped-table">
|
||||
<table class="table-striped">
|
||||
...
|
||||
</table></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">
|
||||
<table class="bordered-table">
|
||||
<table class="table-bordered">
|
||||
...
|
||||
</table></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;">
|
||||
<table class="condensed-table">
|
||||
<table class="table-condensed">
|
||||
...
|
||||
</table></pre>
|
||||
</div>
|
||||
<div class="span8">
|
||||
<table class="condensed-table">
|
||||
<table class="table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
|
|
@ -816,12 +816,12 @@
|
|||
});
|
||||
});
|
||||
</script>
|
||||
<table class="striped-table">
|
||||
<table class="table-striped">
|
||||
...
|
||||
</table></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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 () {
|
|||
</script></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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -441,9 +441,9 @@ input::-webkit-input-placeholder {
|
|||
// Common properties
|
||||
// -----------------
|
||||
|
||||
.search-form,
|
||||
.inline-form,
|
||||
.horizontal-form {
|
||||
.form-search,
|
||||
.form-inline,
|
||||
.form-horizontal {
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
|
|
@ -452,8 +452,8 @@ input::-webkit-input-placeholder {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.search-form label,
|
||||
.inline-form label {
|
||||
.form-search 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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue