mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-28 15:50:01 +02:00
Code Issues Releases Wiki Activity

scope table styles to a class, .table, instead of on the generic element as a smarter default

Browse Source
This commit is contained in:
Mark Otto
2012-01-17 23:39:18 -08:00
parent 51f5b7b8af
commit 47b8184bbb
8 changed files with 86 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
docs/base-css.html
View File

@@ -150,7 +150,7 @@
<!-- Misc Elements -->
<h2>Emphasis, address, and abbreviation</h2>
<table class="table-bordered table-striped">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Element</th>
@@ -237,7 +237,7 @@
<!-- Blockquotes -->
<h2>Blockquotes</h2>
<table class="table-bordered table-striped">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Element</th>
@@ -383,7 +383,7 @@
<!-- Code -->
<h2>Code <small>Inline and block</small></h2>
<table class="table-bordered table-striped">
<table class="table 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="table-bordered table-striped">
<table class="table 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="table-bordered table-striped">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Tag</th>
@@ -579,7 +579,7 @@
</div>
<h2>Table options</h2>
<table class="table-bordered table-striped">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
@@ -591,6 +591,13 @@
<tr>
<td>Default</td>
<td class="muted">None</td>
<td>No styles, just columns and rows</td>
</tr>
<tr>
<td>Basic</td>
<td>
<code>.table</code>
</td>
<td>Only horizontal lines between rows</td>
</tr>
<tr>
@@ -623,14 +630,14 @@
<h3>1. Default table styles</h3>
<div class="row">
<div class="span4">
<p>Tables are automatically styled with only a few borders to ensure readability and maintain structure. No classes are required.</p>
<p>Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the <code>.table</code> class is required.</p>
<pre class="prettyprint linenums">
&lt;table&gt;
&lt;table class="table"&gt;
...
&lt;/table&gt;</pre>
</div>
<div class="span8">
<table>
<table class="table">
<thead>
<tr>
<th>#</th>
@@ -670,12 +677,12 @@
<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>
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="table-striped"&gt;
&lt;table class="table table-striped"&gt;
...
&lt;/table&gt;</pre>
</div>
<div class="span8">
<table class="table-striped">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
@@ -714,12 +721,12 @@
<div class="span4">
<p>Add borders around the entire table and rounded corners for aesthetic purposes.</p>
<pre class="prettyprint linenums">
&lt;table class="table-bordered"&gt;
&lt;table class="table table-bordered"&gt;
...
&lt;/table&gt;</pre>
</div>
<div class="span8">
<table class="table-bordered">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
@@ -762,12 +769,12 @@
<div class="span4">
<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;">
&lt;table class="table-condensed"&gt;
&lt;table class="table table-condensed"&gt;
...
&lt;/table&gt;</pre>
</div>
<div class="span8">
<table class="table-condensed">
<table class="table table-condensed">
<thead>
<tr>
<th>#</th>
@@ -816,12 +823,12 @@
});
});
&lt;/script&gt;
&lt;table class="table-striped"&gt;
&lt;table class="table table-striped"&gt;
...
&lt;/table&gt;</pre>
</div>
<div class="span8">
<table class="table-striped tablesorter-example">
<table class="table table-striped tablesorter-example">
<thead>
<tr>
<th>#</th>
@@ -858,7 +865,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="table-striped table-bordered table-condensed tablesorter-example">
<table class="table table-striped table-bordered table-condensed tablesorter-example">
<thead>
<tr>
<th>#</th>
@@ -932,7 +939,7 @@
<h2>Four types of forms</h2>
<p>Bootstrap provides simple markup and styles for four styles of common web forms.</p>
<table class="table-bordered table-striped">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
@@ -1259,7 +1266,7 @@
<div class="page-header">
<h1>Buttons</h1>
</div>
<table class="table-bordered table-striped">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Button</th>

2
docs/index.html
View File

@@ -267,7 +267,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="table-bordered getting-started">
<table class="table table-bordered getting-started">
<tbody>
<tr>
<td class="quick-start">

24
docs/javascript.html
View File

@@ -284,7 +284,7 @@
<p>Call the modal via javascript:</p>
<pre class="prettyprint linenums">$('#myModal').modal(options)</pre>
<h3>Options</h3>
<table class="table-bordered table-striped">
<table class="table 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="table-bordered table-striped">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event</th>
@@ -666,7 +666,7 @@ $('#myModal').on('hidden', function () {
&lt;/script&gt;</pre>
</p>
<h3>Events</h3>
<table class="table-bordered table-striped">
<table class="table 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="table-bordered table-striped">
<table class="table 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="table-bordered table-striped">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
@@ -933,7 +933,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="table-bordered table-striped">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event</th>
@@ -976,7 +976,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="table-bordered table-striped">
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td>Stateful</td>
@@ -1125,7 +1125,7 @@ $('#my-alert').bind('closed', function () {
<p>Enable via javascript:</p>
<pre class="prettyprint linenums">$(".collapse").collapse()</pre>
<h3>Options</h3>
<table class="table-bordered table-striped">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
@@ -1175,7 +1175,7 @@ $('#myCollapsible').collapse({
<p>
Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
</p>
<table class="table-bordered table-striped">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event</th>
@@ -1261,7 +1261,7 @@ $('#myCollapsible').on('hidden', function () {
<p>Call via javascript:</p>
<pre class="prettyprint linenums">$('.carousel').carousel()</pre>
<h3>Options</h3>
<table class="table-bordered table-striped">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
@@ -1310,7 +1310,7 @@ $('.myCarousel').carousel({
<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="table-bordered table-striped">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event</th>
@@ -1358,7 +1358,7 @@ $('.myCarousel').carousel({
<p>Call the typeahead via javascript:</p>
<pre class="prettyprint linenums">$('.typeahead').typeahead()</pre>
<h3>Options</h3>
<table class="table-bordered table-striped">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>

14
docs/less.html
View File

@@ -160,7 +160,7 @@
</div>
<h3>Hyperlinks</h3>
<table class="table-bordered table-striped">
<table class="table 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="table-bordered table-striped">
<table class="table 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="table-bordered table-striped">
<table class="table 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="table-bordered table-striped">
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td><code>@gridColumns</code></td>
@@ -277,7 +277,7 @@
</div>
<div class="span6">
<h3>Typography</h3>
<table class="table-bordered table-striped">
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td><code>@baseFontSize</code></td>
@@ -302,7 +302,7 @@
<h3>Visuals</h3>
</div>
<div class="span9">
<table class="table-bordered table-striped">
<table class="table 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="table-bordered table-striped">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 120px;">Method</th>

4
docs/scaffolding.html
View File

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