mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
overhaul the table styles and update those everywhere in the docs, update the button docs, spec out the forms docs
This commit is contained in:
Mark Otto
parent
ba597ef845
commit
02bf27592c
7 changed files with 365 additions and 162 deletions
111
bootstrap.css
vendored
111
bootstrap.css
vendored
|
|
@ -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: Sun Oct 30 20:12:53 PDT 2011
|
||||
* Date: Mon Oct 31 19:36:50 PDT 2011
|
||||
*/
|
||||
/* Reset.less
|
||||
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
|
||||
|
|
@ -927,17 +927,10 @@ textarea[readonly] {
|
|||
* ---------------------------------------- */
|
||||
table {
|
||||
width: 100%;
|
||||
margin-bottom: 18px;
|
||||
padding: 0;
|
||||
border-collapse: separate;
|
||||
*border-collapse: collapse;
|
||||
/* IE7, collapse table to remove spacing */
|
||||
|
||||
margin-bottom: 18px;
|
||||
font-size: 13px;
|
||||
border: 1px solid #ddd;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table th, table td {
|
||||
padding: 10px 10px 9px;
|
||||
|
|
@ -948,47 +941,109 @@ table th {
|
|||
padding-top: 9px;
|
||||
font-weight: bold;
|
||||
vertical-align: middle;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
table td {
|
||||
vertical-align: top;
|
||||
}
|
||||
table th + th, table td + td {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
table tr + tr td {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
table tbody tr:first-child td:first-child {
|
||||
table tbody th {
|
||||
border-top: 1px solid #ddd;
|
||||
vertical-align: top;
|
||||
}
|
||||
.condensed-table th, .condensed-table td {
|
||||
padding: 5px 5px 4px;
|
||||
}
|
||||
.bordered-table {
|
||||
border: 1px solid #ddd;
|
||||
border-collapse: separate;
|
||||
*border-collapse: collapse;
|
||||
/* IE7, collapse table to remove spacing */
|
||||
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bordered-table th + th, .bordered-table td + td, .bordered-table th + td {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
.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 tbody tr:first-child td:last-child {
|
||||
.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 tbody tr:last-child td:first-child {
|
||||
.bordered-table tbody 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 tbody tr:last-child td:last-child {
|
||||
.bordered-table tbody 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;
|
||||
}
|
||||
.zebra-striped tbody tr:nth-child(odd) td {
|
||||
table .span1 {
|
||||
width: 40px;
|
||||
}
|
||||
table .span2 {
|
||||
width: 120px;
|
||||
}
|
||||
table .span3 {
|
||||
width: 200px;
|
||||
}
|
||||
table .span4 {
|
||||
width: 280px;
|
||||
}
|
||||
table .span5 {
|
||||
width: 360px;
|
||||
}
|
||||
table .span6 {
|
||||
width: 440px;
|
||||
}
|
||||
table .span7 {
|
||||
width: 520px;
|
||||
}
|
||||
table .span8 {
|
||||
width: 600px;
|
||||
}
|
||||
table .span9 {
|
||||
width: 680px;
|
||||
}
|
||||
table .span10 {
|
||||
width: 760px;
|
||||
}
|
||||
table .span11 {
|
||||
width: 840px;
|
||||
}
|
||||
table .span12 {
|
||||
width: 920px;
|
||||
}
|
||||
table .span13 {
|
||||
width: 1000px;
|
||||
}
|
||||
table .span14 {
|
||||
width: 1080px;
|
||||
}
|
||||
table .span15 {
|
||||
width: 1160px;
|
||||
}
|
||||
table .span16 {
|
||||
width: 1240px;
|
||||
}
|
||||
.striped-table tbody tr:nth-child(odd) td, .striped-table tbody tr:nth-child(odd) th {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.zebra-striped tbody tr:hover td {
|
||||
.striped-table tbody tr:hover td, .striped-table tbody tr:hover th {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.zebra-striped .header {
|
||||
table .header {
|
||||
cursor: pointer;
|
||||
}
|
||||
.zebra-striped .header:after {
|
||||
table .header:after {
|
||||
content: "";
|
||||
float: right;
|
||||
margin-top: 7px;
|
||||
|
|
@ -997,21 +1052,21 @@ table tbody tr:last-child td:last-child {
|
|||
border-color: #000 transparent;
|
||||
visibility: hidden;
|
||||
}
|
||||
.zebra-striped .headerSortUp, .zebra-striped .headerSortDown {
|
||||
table .headerSortUp, table .headerSortDown {
|
||||
background-color: rgba(141, 192, 219, 0.25);
|
||||
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
.zebra-striped .header:hover:after {
|
||||
table .header:hover:after {
|
||||
visibility: visible;
|
||||
}
|
||||
.zebra-striped .headerSortDown:after, .zebra-striped .headerSortDown:hover:after {
|
||||
table .headerSortDown:after, table .headerSortDown:hover:after {
|
||||
visibility: visible;
|
||||
filter: alpha(opacity=60);
|
||||
-khtml-opacity: 0.6;
|
||||
-moz-opacity: 0.6;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.zebra-striped .headerSortUp:after {
|
||||
table .headerSortUp:after {
|
||||
border-bottom: none;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
|
|
|
|||
49
bootstrap.min.css
vendored
49
bootstrap.min.css
vendored
|
|
@ -154,22 +154,39 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado
|
|||
.form-horizontal .controls{margin-left:150px;}
|
||||
.form-horizontal .control-list{padding-top:6px;}
|
||||
.form-horizontal .form-actions{padding-left:150px;}
|
||||
table{width:100%;margin-bottom:18px;padding:0;border-collapse:separate;*border-collapse:collapse;font-size:13px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}table th,table td{padding:10px 10px 9px;line-height:18px;text-align:left;}
|
||||
table th{padding-top:9px;font-weight:bold;vertical-align:middle;border-bottom:1px solid #ddd;}
|
||||
table td{vertical-align:top;}
|
||||
table th+th,table td+td{border-left:1px solid #ddd;}
|
||||
table tr+tr td{border-top:1px solid #ddd;}
|
||||
table tbody 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 tbody 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 tbody 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 tbody 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;}
|
||||
.zebra-striped tbody tr:nth-child(odd) td{background-color:#f9f9f9;}
|
||||
.zebra-striped tbody tr:hover td{background-color:#f5f5f5;}
|
||||
.zebra-striped .header{cursor:pointer;}.zebra-striped .header:after{content:"";float:right;margin-top:7px;border-width:0 4px 4px;border-style:solid;border-color:#000 transparent;visibility:hidden;}
|
||||
.zebra-striped .headerSortUp,.zebra-striped .headerSortDown{background-color:rgba(141, 192, 219, 0.25);text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);}
|
||||
.zebra-striped .header:hover:after{visibility:visible;}
|
||||
.zebra-striped .headerSortDown:after,.zebra-striped .headerSortDown:hover:after{visibility:visible;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;}
|
||||
.zebra-striped .headerSortUp:after{border-bottom:none;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000;visibility:visible;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;}
|
||||
table{width:100%;padding:0;margin-bottom:18px;font-size:13px;border-collapse:collapse;}table th,table td{padding:10px 10px 9px;line-height:18px;text-align:left;}
|
||||
table th{padding-top:9px;font-weight:bold;vertical-align:middle;}
|
||||
table td{vertical-align:top;border-top:1px solid #ddd;}
|
||||
table tbody th{border-top:1px solid #ddd;vertical-align:top;}
|
||||
.condensed-table th,.condensed-table td{padding:5px 5px 4px;}
|
||||
.bordered-table{border:1px solid #ddd;border-collapse:separate;*border-collapse:collapse;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.bordered-table th+th,.bordered-table td+td,.bordered-table th+td{border-left:1px solid #ddd;}
|
||||
.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 tbody 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 tbody 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 .span1{width:40px;}
|
||||
table .span2{width:120px;}
|
||||
table .span3{width:200px;}
|
||||
table .span4{width:280px;}
|
||||
table .span5{width:360px;}
|
||||
table .span6{width:440px;}
|
||||
table .span7{width:520px;}
|
||||
table .span8{width:600px;}
|
||||
table .span9{width:680px;}
|
||||
table .span10{width:760px;}
|
||||
table .span11{width:840px;}
|
||||
table .span12{width:920px;}
|
||||
table .span13{width:1000px;}
|
||||
table .span14{width:1080px;}
|
||||
table .span15{width:1160px;}
|
||||
table .span16{width:1240px;}
|
||||
.striped-table tbody tr:nth-child(odd) td,.striped-table tbody tr:nth-child(odd) th{background-color:#f9f9f9;}
|
||||
.striped-table tbody tr:hover td,.striped-table tbody tr:hover th{background-color:#f5f5f5;}
|
||||
table .header{cursor:pointer;}table .header:after{content:"";float:right;margin-top:7px;border-width:0 4px 4px;border-style:solid;border-color:#000 transparent;visibility:hidden;}
|
||||
table .headerSortUp,table .headerSortDown{background-color:rgba(141, 192, 219, 0.25);text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);}
|
||||
table .header:hover:after{visibility:visible;}
|
||||
table .headerSortDown:after,table .headerSortDown:hover:after{visibility:visible;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;}
|
||||
table .headerSortUp:after{border-bottom:none;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000;visibility:visible;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;}
|
||||
table .blue{color:#049cdb;border-bottom-color:#049cdb;}
|
||||
table .headerSortUp.blue,table .headerSortDown.blue{background-color:#ade6fe;}
|
||||
table .green{color:#46a546;border-bottom-color:#46a546;}
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@
|
|||
|
||||
<!-- Misc Elements -->
|
||||
<h2>Emphasis, address, and abbreviation</h2>
|
||||
<table class="zebra-striped">
|
||||
<table class="bordered-table striped-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Element</th>
|
||||
|
|
@ -175,7 +175,7 @@
|
|||
|
||||
<!-- Blockquotes -->
|
||||
<h2>Blockquotes</h2>
|
||||
<table class="bordered-table">
|
||||
<table class="bordered-table striped-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Element</th>
|
||||
|
|
@ -321,7 +321,7 @@
|
|||
<!-- Code -->
|
||||
|
||||
<h2>Code <small>Inline and block</small></h2>
|
||||
<table class="zebra-striped">
|
||||
<table class="bordered-table striped-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 190px;">Element</th>
|
||||
|
|
@ -363,7 +363,7 @@
|
|||
|
||||
<!-- Labels -->
|
||||
<h2>Inline labels <small>for special attention</small></h2>
|
||||
<table class="zebra-striped">
|
||||
<table class="bordered-table striped-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 190px;">Labels</th>
|
||||
|
|
@ -428,7 +428,7 @@
|
|||
<h2>Table markup</h2>
|
||||
<div class="row">
|
||||
<div class="span8">
|
||||
<table class="zebra-striped">
|
||||
<table class="bordered-table striped-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tag</th>
|
||||
|
|
@ -517,7 +517,7 @@
|
|||
</div>
|
||||
|
||||
<h2>Table options</h2>
|
||||
<table class="striped-table">
|
||||
<table class="bordered-table striped-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
|
@ -592,9 +592,9 @@
|
|||
<table>
|
||||
...
|
||||
</table></pre>
|
||||
<h3>2. Zebra-striped</h3>
|
||||
<p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.zebra-striped</code> class.</p>
|
||||
<table class="zebra-striped">
|
||||
<h3>2. Striped table</h3>
|
||||
<p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.striped-table</code> class.</p>
|
||||
<table class="striped-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
|
|
@ -626,12 +626,12 @@
|
|||
</table>
|
||||
<p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<table class="zebra-striped">
|
||||
<table class="striped-table">
|
||||
...
|
||||
</table></pre>
|
||||
<h3>3. Zebra-striped w/ TableSorter.js</h3>
|
||||
<h3>3. Striped table w/ TableSorter.js</h3>
|
||||
<p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p>
|
||||
<table class="zebra-striped" id="sortTableExample">
|
||||
<table class="striped-table" id="sortTableExample">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
|
|
@ -668,7 +668,7 @@
|
|||
$("table#sortTableExample").tablesorter({ sortList: [[1,0]] });
|
||||
});
|
||||
</script>
|
||||
<table class="zebra-striped">
|
||||
<table class="striped-table">
|
||||
...
|
||||
</table></pre>
|
||||
|
||||
|
|
@ -682,19 +682,49 @@
|
|||
<div class="page-header">
|
||||
<h1>Forms</h1>
|
||||
</div>
|
||||
|
||||
<h2>Four types of forms</h2>
|
||||
<table class="bordered-table striped-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Class</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Vertical (default)</th>
|
||||
<td><code>.vertical-form</code> <span class="muted">(not required)</span></td>
|
||||
<td>Stacked, left-aligned labels over controls</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Horiztonal</th>
|
||||
<td><code>.horizontal-form</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>Left-aligned label and inline-block controls for compact style</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Search</th>
|
||||
<td><code>.search-form</code></td>
|
||||
<td>Extra-rounded text input for a typical search aesthetic</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h3>Four types of forms</h3>
|
||||
<p>With 2.0, we now have four types of forms to choose from:</p>
|
||||
<ul>
|
||||
<li>Search form for a super-rounded input and optional button</li>
|
||||
<li>Inline form for a series of elements on one line</li>
|
||||
<li>Horizontal form for left-aligned labels</li>
|
||||
<li>Vertical form for stacked labels and inputs</li>
|
||||
</ul>
|
||||
<h3>Why four types</h3>
|
||||
<p>With Bootstrap 2, we completely recoded our forms to allow for simple base styles and improved namespacing on labels and controls. To address the many uses of forms, we've included some base styles to help get you started.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3></h3>
|
||||
<h3>Vertical or horizontal</h3>
|
||||
<p>Our default form styles are now vertical, not horizontal. This makes it easier to customize bare-bones forms, as well as forms in tricker situations like sign-up, modals, etc. <strong>They share the same exact markup; just swap the class.</strong></p>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row">
|
||||
|
|
@ -875,79 +905,123 @@
|
|||
</div>
|
||||
</div><!-- /row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h2>Buttons</h2>
|
||||
<p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p>
|
||||
<p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class.</p>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<h3>Example buttons</h3>
|
||||
<p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code><a></code>, <code><button></code>, and select <code><input></code> elements. Here’s how it looks:</p>
|
||||
<div class="well" style="padding: 14px 19px;">
|
||||
<button class="btn primary">Primary</button> <button class="btn">Default</button> <button class="btn info">Info</button> <button class="btn success">Success</button> <button class="btn danger">Danger</button>
|
||||
</div>
|
||||
<h3>Alternate sizes</h3>
|
||||
<p>Fancy larger or smaller buttons? Have at it!</p>
|
||||
<div class="well">
|
||||
<a href="#" class="btn large primary">Primary action</a>
|
||||
<a href="#" class="btn large">Action</a>
|
||||
</div>
|
||||
<div class="well" style="padding: 16px 19px;">
|
||||
<a href="#" class="btn small primary">Primary action</a>
|
||||
<a href="#" class="btn small">Action</a>
|
||||
</div>
|
||||
<h3>Disabled state</h3>
|
||||
<p>For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s <code>.disabled</code> for links and <code>:disabled</code> for <code><button></code> elements.</p>
|
||||
<h4>Links</h4>
|
||||
<div class="well">
|
||||
<a href="#" class="btn large primary disabled">Primary action</a>
|
||||
<a href="#" class="btn large disabled">Action</a>
|
||||
</div>
|
||||
<h4>Buttons</h4>
|
||||
<div class="well">
|
||||
<button class="btn large primary disabled" disabled="disabled">Primary action</button> <button class="btn large" disabled>Action</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
|
||||
|
||||
<h2>Buttons</h2>
|
||||
<table class="bordered-table striped-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Preview</th>
|
||||
<th>Class</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Default</th>
|
||||
<td><a class="btn" href="#">Button</a></td>
|
||||
<td><code>.btn</code></td>
|
||||
<td>Standard gray button with gradient</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Primary</th>
|
||||
<td><a class="btn primary" href="#">Button</a></td>
|
||||
<td><code>.primary</code></td>
|
||||
<td>Makes button blue for more visual weight to indicate the primary action in a set of buttons</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Info</th>
|
||||
<td><a class="btn info" href="#">Button</a></td>
|
||||
<td><code>.info</code></td>
|
||||
<td>Used as an alternate to the default styles</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Success</th>
|
||||
<td><a class="btn success" href="#">Button</a></td>
|
||||
<td><code>.success</code></td>
|
||||
<td>Used to indicate a successful or positive action will be taken</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Danger</th>
|
||||
<td><a class="btn danger" href="#">Button</a></td>
|
||||
<td><code>.danger</code></td>
|
||||
<td>Used to indicate a dangerous or potentially negative action will be taken</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h2>Button groups</h2>
|
||||
<div class="span4">
|
||||
<h3>Buttons for actions</h3>
|
||||
<p>As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.</p>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<h3>Example</h3>
|
||||
<div class="well">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">Left</a>
|
||||
<a class="btn" href="#">Middle</a>
|
||||
<a class="btn" href="#">Right</a>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>For anchors and forms</h3>
|
||||
<p>Button styles can be applied to anything with the <code>.btn</code> applied. However, typically you’ll want to apply these to only <code><a></code> and <code><button></code> elements.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<p><strong>Note:</strong> All buttons must include the <code>.btn</code> class. Button styles should be applied to <code><button></code> and <code><a></code> elements for consistency.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h3>Multiple sizes</h3>
|
||||
<p>Fancy larger or smaller buttons? Have at it!</p>
|
||||
<p>
|
||||
<a href="#" class="btn large primary">Primary action</a>
|
||||
<a href="#" class="btn large">Action</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="#" class="btn small primary">Primary action</a>
|
||||
<a href="#" class="btn small">Action</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="span8">
|
||||
<h3>Disabled state</h3>
|
||||
<p>For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s <code>.disabled</code> for links and <code>:disabled</code> for <code><button></code> elements.</p>
|
||||
<p>
|
||||
<a href="#" class="btn large primary disabled">Primary action</a>
|
||||
<a href="#" class="btn large disabled">Action</a>
|
||||
</p>
|
||||
<p>
|
||||
<button class="btn large primary disabled" disabled="disabled">Primary action</button> <button class="btn large" disabled>Action</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Button groups</h2>
|
||||
|
||||
<div class="well">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">Left</a>
|
||||
<a class="btn" href="#">Middle</a>
|
||||
<a class="btn" href="#">Right</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="well">
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">1</a>
|
||||
<a class="btn" href="#">2</a>
|
||||
<a class="btn" href="#">3</a>
|
||||
<a class="btn" href="#">4</a>
|
||||
<a class="btn" href="#">5</a>
|
||||
</div>
|
||||
<div class="well">
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">1</a>
|
||||
<a class="btn" href="#">2</a>
|
||||
<a class="btn" href="#">3</a>
|
||||
<a class="btn" href="#">4</a>
|
||||
<a class="btn" href="#">5</a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">6</a>
|
||||
<a class="btn" href="#">7</a>
|
||||
<a class="btn" href="#">8</a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">9</a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">10</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">6</a>
|
||||
<a class="btn" href="#">7</a>
|
||||
<a class="btn" href="#">8</a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">9</a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">10</a>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@
|
|||
<div class="span9">
|
||||
<h3>What's included</h3>
|
||||
<p>Bring some of Bootstrap's primary components to life with new custom plugins that work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>. We encourage you to extend and modify them to fit your specific development needs.</p>
|
||||
<table class="zebra-striped">
|
||||
<table class="striped-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">File</th>
|
||||
|
|
@ -151,7 +151,7 @@
|
|||
<h3>Using bootstrap-modal</h3>
|
||||
<pre class="prettyprint linenums">$('#my-modal').modal(options)</pre>
|
||||
<h3>Options</h3>
|
||||
<table class="zebra-striped">
|
||||
<table class="striped-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
|
|
@ -209,7 +209,7 @@ $('#my-modal').modal({
|
|||
<p><span class="label notice">Notice</span> Alternatively, this can be retrieved with <code>$().data('modal')</code>.</p>
|
||||
<h3>Events</h3>
|
||||
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p>
|
||||
<table class="zebra-striped">
|
||||
<table class="striped-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event</th>
|
||||
|
|
@ -457,7 +457,7 @@ $('#my-modal').bind('hidden', function () {
|
|||
<h3>Using bootstrap-twipsy.js</h3>
|
||||
<pre class="prettyprint linenums">$('#example').twipsy(options)</pre>
|
||||
<h3>Options</h3>
|
||||
<table class="zebra-striped">
|
||||
<table class="striped-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
|
|
@ -574,7 +574,7 @@ $('#my-modal').bind('hidden', function () {
|
|||
<h3>Using boostrap-popover.js</h3>
|
||||
<pre class="prettyprint linenums">$('#example').popover(options)</pre>
|
||||
<h3>Options</h3>
|
||||
<table class="zebra-striped">
|
||||
<table class="striped-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
|
|
|
|||
|
|
@ -166,7 +166,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="zebra-striped">
|
||||
<table class="striped-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 120px;">Method</th>
|
||||
|
|
|
|||
|
|
@ -161,7 +161,7 @@
|
|||
</div>
|
||||
|
||||
<h2>Grid customization</h2>
|
||||
<table class="zebra-striped">
|
||||
<table class="striped-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Variable</th>
|
||||
|
|
@ -273,7 +273,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="zebra-striped">
|
||||
<table class="striped-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Label</th>
|
||||
|
|
|
|||
|
|
@ -9,14 +9,12 @@
|
|||
|
||||
table {
|
||||
width: 100%;
|
||||
margin-bottom: @baseLineHeight;
|
||||
padding: 0;
|
||||
border-collapse: separate; // Done so we can round those corners!
|
||||
*border-collapse: collapse; /* IE7, collapse table to remove spacing */
|
||||
margin-bottom: @baseLineHeight;
|
||||
font-size: @baseFontSize;
|
||||
border: 1px solid #ddd;
|
||||
.border-radius(4px);
|
||||
th, td {
|
||||
border-collapse: collapse;
|
||||
th,
|
||||
td {
|
||||
padding: 10px 10px 9px;
|
||||
line-height: @baseLineHeight;
|
||||
text-align: left;
|
||||
|
|
@ -25,22 +23,49 @@ table {
|
|||
padding-top: 9px;
|
||||
font-weight: bold;
|
||||
vertical-align: middle;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
td {
|
||||
vertical-align: top;
|
||||
}
|
||||
th + th,
|
||||
td + td {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
tr + tr td {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
tbody tr:first-child td:first-child {
|
||||
// When scoped to row, fix th in tbody
|
||||
tbody th {
|
||||
border-top: 1px solid #ddd;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// CONDENSED VERSION
|
||||
// -----------------
|
||||
|
||||
.condensed-table {
|
||||
th,
|
||||
td {
|
||||
padding: 5px 5px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// BORDERED VERSION
|
||||
// ----------------
|
||||
|
||||
.bordered-table {
|
||||
border: 1px solid #ddd;
|
||||
border-collapse: separate; // Done so we can round those corners!
|
||||
*border-collapse: collapse; /* IE7, collapse table to remove spacing */
|
||||
.border-radius(4px);
|
||||
th + th,
|
||||
td + td,
|
||||
th + td {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
thead:first-child tr:first-child th:first-child,
|
||||
tbody:first-child tr:first-child td:first-child {
|
||||
.border-radius(4px 0 0 0);
|
||||
}
|
||||
tbody tr:first-child td:last-child {
|
||||
thead:first-child tr:first-child th:last-child,
|
||||
tbody:first-child tr:first-child td:last-child {
|
||||
.border-radius(0 4px 0 0);
|
||||
}
|
||||
tbody tr:last-child td:first-child {
|
||||
|
|
@ -52,20 +77,55 @@ table {
|
|||
}
|
||||
|
||||
|
||||
// ----------------
|
||||
|
||||
// This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border
|
||||
.tableColumns(@columnSpan: 1) {
|
||||
width: ((@gridColumnWidth - 20) * @columnSpan) + ((@gridColumnWidth - 20) * (@columnSpan - 1));
|
||||
}
|
||||
table {
|
||||
// Default columns
|
||||
.span1 { .tableColumns(1); }
|
||||
.span2 { .tableColumns(2); }
|
||||
.span3 { .tableColumns(3); }
|
||||
.span4 { .tableColumns(4); }
|
||||
.span5 { .tableColumns(5); }
|
||||
.span6 { .tableColumns(6); }
|
||||
.span7 { .tableColumns(7); }
|
||||
.span8 { .tableColumns(8); }
|
||||
.span9 { .tableColumns(9); }
|
||||
.span10 { .tableColumns(10); }
|
||||
.span11 { .tableColumns(11); }
|
||||
.span12 { .tableColumns(12); }
|
||||
.span13 { .tableColumns(13); }
|
||||
.span14 { .tableColumns(14); }
|
||||
.span15 { .tableColumns(15); }
|
||||
.span16 { .tableColumns(16); }
|
||||
}
|
||||
|
||||
|
||||
// ZEBRA-STRIPING
|
||||
// --------------
|
||||
|
||||
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
|
||||
.zebra-striped {
|
||||
.striped-table {
|
||||
tbody {
|
||||
tr:nth-child(odd) td {
|
||||
tr:nth-child(odd) td,
|
||||
tr:nth-child(odd) th {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
tr:hover td {
|
||||
tr:hover td,
|
||||
tr:hover th {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// TABLESORTER
|
||||
// -----------
|
||||
|
||||
table {
|
||||
// Tablesorting styles w/ jQuery plugin
|
||||
.header {
|
||||
cursor: pointer;
|
||||
|
|
@ -111,9 +171,6 @@ table {
|
|||
.opacity(60);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
// Blue Table Headings
|
||||
.blue {
|
||||
color: @blue;
|
||||
|
|
|
|||
Loading…
Reference in a new issue