| Element | @@ -175,7 +175,7 @@
|---|
| Element | @@ -321,7 +321,7 @@
|---|
| Element | @@ -363,7 +363,7 @@
|---|
| Labels | @@ -428,7 +428,7 @@
|---|
| Tag | @@ -517,7 +517,7 @@
|---|
| Name | @@ -592,9 +592,9 @@ <table> ... </table> -
|---|
| # | @@ -626,12 +626,12 @@
|---|
Note: Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.
-<table class="zebra-striped"> +<table class="striped-table"> ... </table>-
Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via jQuery and the Tablesorter plugin. Click any column’s header to change the sort.
-| # | @@ -668,7 +668,7 @@ $("table#sortTableExample").tablesorter({ sortList: [[1,0]] }); }); </script> -<table class="zebra-striped"> +<table class="striped-table"> ... </table> @@ -682,19 +682,49 @@
|---|
| Name | +Class | +Description | +
|---|---|---|
| Vertical (default) | +.vertical-form (not required) |
+ Stacked, left-aligned labels over controls | +
| Horiztonal | +.horizontal-form |
+ Float left, right-aligned labels on same line as controls | +
| Inline | +.inline-form |
+ Left-aligned label and inline-block controls for compact style | +
| Search | +.search-form |
+ Extra-rounded text input for a typical search aesthetic | +
With 2.0, we now have four types of forms to choose from:
-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.
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. They share the same exact markup; just swap the class.
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.
-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 .primary class, a light-blue .info class, a green .success class, and a red .danger class.
Button styles can be applied to anything with the .btn applied. Typically you’ll want to apply these to only <a>, <button>, and select <input> elements. Here’s how it looks:
Fancy larger or smaller buttons? Have at it!
-For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s .disabled for links and :disabled for <button> elements.
| Name | +Preview | +Class | +Description | +
|---|---|---|---|
| Default | +Button | +.btn |
+ Standard gray button with gradient | +
| Primary | +Button | +.primary |
+ Makes button blue for more visual weight to indicate the primary action in a set of buttons | +
| Info | +Button | +.info |
+ Used as an alternate to the default styles | +
| Success | +Button | +.success |
+ Used to indicate a successful or positive action will be taken | +
| Danger | +Button | +.danger |
+ Used to indicate a dangerous or potentially negative action will be taken | +
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.
Button styles can be applied to anything with the .btn applied. However, typically you’ll want to apply these to only <a> and <button> elements.
Note: All buttons must include the .btn class. Button styles should be applied to <button> and <a> elements for consistency.
Fancy larger or smaller buttons? Have at it!
++ Primary action + Action +
++ Primary action + Action +
+For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s .disabled for links and :disabled for <button> elements.
+ Primary action + Action +
++ +
+Bring some of Bootstrap's primary components to life with new custom plugins that work with jQuery and Ender. We encourage you to extend and modify them to fit your specific development needs.
-| File | @@ -151,7 +151,7 @@
|---|
| Name | @@ -209,7 +209,7 @@ $('#my-modal').modal({
|---|
| Event | @@ -457,7 +457,7 @@ $('#my-modal').bind('hidden', function () {
|---|
| Name | @@ -574,7 +574,7 @@ $('#my-modal').bind('hidden', function () {
|---|
| Name | diff --git a/docs/less.html b/docs/less.html index d5a467bfa2..4fa0f0bdd2 100644 --- a/docs/less.html +++ b/docs/less.html @@ -166,7 +166,7 @@
|---|
| Method | diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 4a5aa9a0b0..de50caf8d8 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -161,7 +161,7 @@
|---|
| Variable | @@ -273,7 +273,7 @@
|---|
| Label | diff --git a/lib/tables.less b/lib/tables.less index 8a786ffd2a..b02087fbd2 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -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;
|---|