Commit b36df463 authored by Mark Otto's avatar Mark Otto
Browse files

misc docs updates, revamped tables CSS save for grid columns and tablesorter options

parent ecc9764c
Showing with 428 additions and 460 deletions
+428 -460
This diff is collapsed.
This diff is collapsed.
...@@ -41,36 +41,62 @@ body > .navbar-fixed .brand:hover { ...@@ -41,36 +41,62 @@ body > .navbar-fixed .brand:hover {
/* Github buttons /* Github buttons
-------------------------------------------------- */ -------------------------------------------------- */
.github-btn + .github-btn {
margin-left: 10px;
}
.github-btn { .github-btn {
display: inline-block; display: inline-block;
height: 20px; height: 20px;
overflow: hidden; overflow: hidden;
} }
.github-btn .btn, .github-btn .gh-btn,
.github-btn .count { .github-btn .gh-count,
.github-btn .gh-ico {
float: left; float: left;
}
.github-btn .gh-btn,
.github-btn .gh-count {
padding: 1px 5px 1px 4px; padding: 1px 5px 1px 4px;
font-size: 11px; font-size: 11px;
font-weight: bold; font-weight: bold;
line-height: 16px; line-height: 16px;
color: #666; color: #666;
text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff;
cursor: pointer;
}
.github-btn .gh-btn {
background-color: #e6e6e6;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-repeat: no-repeat;
border: 1px solid #ccc;
border-bottom-color: #bbb;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
} }
.github-btn .btn { .github-btn .gh-btn:hover {
box-shadow: none; color: #333;
text-decoration: none;
background-position: 0 -10px;
} }
.github-btn .github-ico { .github-btn .gh-btn:active {
float: left; -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15);
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15);
box-shadow: inset 0 2px 4px rgba(0,0,0,.15);
}
.github-btn .gh-ico {
margin-right: 4px; margin-right: 4px;
opacity: .65; opacity: .65;
} }
.github-btn .count { .github-btn .gh-btn:hover .gh-ico {
opacity: .75;
}
.github-btn .gh-count {
display: inline-block; display: inline-block;
margin-left: 2px; margin-left: 2px;
background-color: #fff; background-color: #fff;
......
...@@ -519,7 +519,7 @@ ...@@ -519,7 +519,7 @@
<h2>Table options</h2> <h2>Table options</h2>
<table class="bordered-table striped-table"> <table class="bordered-table striped-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Class</th> <th>Class</th>
...@@ -551,7 +551,7 @@ ...@@ -551,7 +551,7 @@
<td> <td>
<code>.condensed-table</code> <code>.condensed-table</code>
</td> </td>
<td>Cuts padding in half, from 10px to 5px, 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>
</tbody> </tbody>
</table> </table>
......
...@@ -56,6 +56,7 @@ ...@@ -56,6 +56,7 @@
<p class="lead">Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p> <p class="lead">Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p>
<p class="download-info"> <p class="download-info">
<a href="#" class="btn primary btn-large">Download on GitHub</a> <a href="#" class="btn primary btn-large">Download on GitHub</a>
<a href="#" class="btn btn-large">Get started</a>
Currently v2.0.0 Currently v2.0.0
</p> </p>
......
...@@ -162,7 +162,7 @@ ...@@ -162,7 +162,7 @@
</div> </div>
<h2>Grid customization</h2> <h2>Grid customization</h2>
<table class="striped-table"> <table class="bordered-table striped-table">
<thead> <thead>
<tr> <tr>
<th>Variable</th> <th>Variable</th>
...@@ -173,12 +173,12 @@ ...@@ -173,12 +173,12 @@
<tbody> <tbody>
<tr> <tr>
<td><code>@gridColumns</code></td> <td><code>@gridColumns</code></td>
<td>16</td> <td>12</td>
<td>The number of columns within the grid</td> <td>The number of columns within the grid</td>
</tr> </tr>
<tr> <tr>
<td><code>@gridColumnWidth</code></td> <td><code>@gridColumnWidth</code></td>
<td>40px</td> <td>60px</td>
<td>The width of each column within the grid</td> <td>The width of each column within the grid</td>
</tr> </tr>
<tr> <tr>
...@@ -274,7 +274,7 @@ ...@@ -274,7 +274,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="striped-table"> <table class="bordered-table striped-table">
<thead> <thead>
<tr> <tr>
<th>Label</th> <th>Label</th>
......
...@@ -4,45 +4,41 @@ ...@@ -4,45 +4,41 @@
* ---------------------------------------- */ * ---------------------------------------- */
// BASELINE STYLES // BASELINE STYLES
// --------------- // ---------------
table { table {
width: 100%; width: 100%;
padding: 0;
margin-bottom: @baseLineHeight; margin-bottom: @baseLineHeight;
font-size: @baseFontSize; }
border-collapse: collapse; th,
th, td {
td { padding: 8px;
padding: 10px 10px 9px; line-height: @baseLineHeight;
line-height: @baseLineHeight; text-align: left;
text-align: left; border-bottom: 1px solid #ddd;
} }
th { th {
padding-top: 9px; font-weight: bold;
font-weight: bold; vertical-align: bottom;
vertical-align: middle; }
} td {
td { vertical-align: top;
vertical-align: top; }
border-top: 1px solid #ddd; tbody tr:last-child th,
} tbody tr:last-child td {
// When scoped to row, fix th in tbody border-bottom: 0;
tbody th {
border-top: 1px solid #ddd;
vertical-align: top;
}
} }
// CONDENSED VERSION // CONDENSED TABLE W/ HALF PADDING
// ----------------- // -------------------------------
.condensed-table { .condensed-table {
th, th,
td { td {
padding: 5px 5px 4px; padding: 4px 5px;
} }
} }
...@@ -53,13 +49,14 @@ table { ...@@ -53,13 +49,14 @@ table {
.bordered-table { .bordered-table {
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-collapse: collapse; /* IE7, collapse table to remove spacing */
.border-radius(4px); .border-radius(4px);
th + th, th + th,
td + td, td + td,
th + td { th + td,
td + th {
border-left: 1px solid #ddd; border-left: 1px solid #ddd;
} }
// For first th or td in the first row in the first thead or tbody
thead:first-child tr:first-child th:first-child, thead:first-child tr:first-child th:first-child,
tbody:first-child tr:first-child td:first-child { tbody:first-child tr:first-child td:first-child {
.border-radius(4px 0 0 0); .border-radius(4px 0 0 0);
...@@ -68,15 +65,34 @@ table { ...@@ -68,15 +65,34 @@ table {
tbody:first-child tr:first-child td:last-child { tbody:first-child tr:first-child td:last-child {
.border-radius(0 4px 0 0); .border-radius(0 4px 0 0);
} }
tbody tr:last-child td:first-child { // For first th or td in the first row in the first thead or tbody
thead:last-child tr:last-child th:first-child,
tbody:last-child tr:last-child td:first-child {
.border-radius(0 0 0 4px); .border-radius(0 0 0 4px);
} }
tbody tr:last-child td:last-child { thead:last-child tr:last-child th:last-child,
tbody:last-child tr:last-child td:last-child {
.border-radius(0 0 4px 0); .border-radius(0 0 4px 0);
} }
} }
// ZEBRA-STRIPING
// --------------
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.striped-table {
tbody {
tr:nth-child(odd) td,
tr:nth-child(odd) th {
background-color: #f9f9f9;
}
}
}
/*
// ---------------- // ----------------
// This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border // This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border
...@@ -104,24 +120,6 @@ table { ...@@ -104,24 +120,6 @@ table {
} }
// ZEBRA-STRIPING
// --------------
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.striped-table {
tbody {
tr:nth-child(odd) td,
tr:nth-child(odd) th {
background-color: #f9f9f9;
}
tr:hover td,
tr:hover th {
background-color: #f5f5f5;
}
}
}
// TABLESORTER // TABLESORTER
// ----------- // -----------
...@@ -225,4 +223,4 @@ table { ...@@ -225,4 +223,4 @@ table {
.headerSortDown.purple { .headerSortDown.purple {
background-color: lighten(@purple, 40%); background-color: lighten(@purple, 40%);
} }
} }*/
\ No newline at end of file \ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment