mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-14 18:42:30 +03:00
Code Activity

Move .table-responsive from wrapper to .table

Browse Source
This commit is contained in:
Quy
2016-12-31 16:12:28 -08:00
committed by Mark Otto
parent bccb8ce213
commit ff8d28cf25
11 changed files with 785 additions and 822 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/browser-bugs.md
+4 -8
View File
@@ -15,8 +15,7 @@ See also:
* [WebKit bug 159753: [meta] Issues affecting Bootstrap](https://bugs.webkit.org/show_bug.cgi?id=159753) * [WebKit bug 159753: [meta] Issues affecting Bootstrap](https://bugs.webkit.org/show_bug.cgi?id=159753)
* [jQuery's browser bug workarounds](https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o) * [jQuery's browser bug workarounds](https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o)
<div class="table-responsive"> <table class="bd-browser-bugs table table-bordered table-hover table-responsive">
<table class="bd-browser-bugs table table-bordered table-hover">
<thead> <thead>
<tr> <tr>
<th>Browser(s)</th> <th>Browser(s)</th>
@@ -35,8 +34,7 @@ See also:
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
</div>
# Most wanted features # Most wanted features
@@ -44,8 +42,7 @@ There are several features specified in Web standards which would allow us to ma
We publicly list these "most wanted" feature requests here, in the hopes of expediting the process of getting them implemented. We publicly list these "most wanted" feature requests here, in the hopes of expediting the process of getting them implemented.
<div class="table-responsive"> <table class="bd-browser-bugs table table-bordered table-hover table-responsive">
<table class="bd-browser-bugs table table-bordered table-hover">
<thead> <thead>
<tr> <tr>
<th>Browser(s)</th> <th>Browser(s)</th>
@@ -64,5 +61,4 @@ We publicly list these "most wanted" feature requests here, in the hopes of expe
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
</div>
docs/components/carousel.md
+4 -8
View File
@@ -184,8 +184,7 @@ $('.carousel').carousel()
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-interval=""`. Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-interval=""`.
<div class="table-responsive"> <table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th style="width: 100px;">Name</th>
@@ -226,8 +225,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>Whether the carousel should cycle continuously or have hard stops.</td> <td>Whether the carousel should cycle continuously or have hard stops.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
### Methods ### Methods
@@ -270,8 +268,7 @@ Bootstrap's carousel class exposes two events for hooking into carousel function
All carousel events are fired at the carousel itself (i.e. at the `<div class="carousel">`). All carousel events are fired at the carousel itself (i.e. at the `<div class="carousel">`).
<div class="table-responsive"> <table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 150px;">Event Type</th> <th style="width: 150px;">Event Type</th>
@@ -288,8 +285,7 @@ All carousel events are fired at the carousel itself (i.e. at the `<div class="c
<td>This event is fired when the carousel has completed its slide transition.</td> <td>This event is fired when the carousel has completed its slide transition.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
{% highlight js %} {% highlight js %}
$('#myCarousel').on('slide.bs.carousel', function () { $('#myCarousel').on('slide.bs.carousel', function () {
docs/components/collapse.md
+4 -8
View File
@@ -124,8 +124,7 @@ $('.collapse').collapse()
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-parent=""`. Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-parent=""`.
<div class="table-responsive"> <table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th style="width: 100px;">Name</th>
@@ -148,8 +147,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>Toggles the collapsible element on invocation</td> <td>Toggles the collapsible element on invocation</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
### Methods ### Methods
@@ -179,8 +177,7 @@ Hides a collapsible element.
Bootstrap's collapse class exposes a few events for hooking into collapse functionality. Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
<div class="table-responsive"> <table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 150px;">Event Type</th> <th style="width: 150px;">Event Type</th>
@@ -207,8 +204,7 @@ Bootstrap's collapse class exposes a few events for hooking into collapse functi
<td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td> <td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
{% highlight js %} {% highlight js %}
$('#myCollapsible').on('hidden.bs.collapse', function () { $('#myCollapsible').on('hidden.bs.collapse', function () {
docs/components/modal.md
+4 -8
View File
@@ -508,8 +508,7 @@ Call a modal with id `myModal` with a single line of JavaScript:
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-backdrop=""`. Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-backdrop=""`.
<div class="table-responsive"> <table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th style="width: 100px;">Name</th>
@@ -544,8 +543,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>Shows the modal when initialized.</td> <td>Shows the modal when initialized.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
### Methods ### Methods
@@ -581,8 +579,7 @@ Manually hides a modal. **Returns to the caller before the modal has actually be
Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `<div class="modal">`). Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `<div class="modal">`).
<div class="table-responsive"> <table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 150px;">Event Type</th> <th style="width: 150px;">Event Type</th>
@@ -607,8 +604,7 @@ Bootstrap's modal class exposes a few events for hooking into modal functionalit
<td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td> <td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
{% highlight js %} {% highlight js %}
$('#myModal').on('hidden.bs.modal', function (e) { $('#myModal').on('hidden.bs.modal', function (e) {
docs/components/popovers.md
+4 -8
View File
@@ -163,8 +163,7 @@ Enable popovers via JavaScript:
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`. Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`.
<div class="table-responsive"> <table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th style="width: 100px;">Name</th>
@@ -268,8 +267,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://tether.io/#offset">offset docs</a>.</td> <td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://tether.io/#offset">offset docs</a>.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
{% callout info %} {% callout info %}
#### Data attributes for individual popovers #### Data attributes for individual popovers
@@ -310,8 +308,7 @@ Hides and destroys an element's popover. Popovers that use delegation (which are
### Events ### Events
<div class="table-responsive"> <table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 150px;">Event Type</th> <th style="width: 150px;">Event Type</th>
@@ -336,8 +333,7 @@ Hides and destroys an element's popover. Popovers that use delegation (which are
<td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td> <td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
{% highlight js %} {% highlight js %}
$('#myPopover').on('hidden.bs.popover', function () { $('#myPopover').on('hidden.bs.popover', function () {
docs/components/scrollspy.md
+5 -8
View File
@@ -117,8 +117,7 @@ $('[data-spy="scroll"]').each(function () {
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-offset=""`. Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-offset=""`.
<div class="table-responsive"> <table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th style="width: 100px;">Name</th>
@@ -135,13 +134,11 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>Pixels to offset from top when calculating position of scroll.</td> <td>Pixels to offset from top when calculating position of scroll.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
### Events ### Events
<div class="table-responsive"> <table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 150px;">Event Type</th> <th style="width: 150px;">Event Type</th>
@@ -154,8 +151,8 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>This event fires whenever a new item becomes activated by the scrollspy.</td> <td>This event fires whenever a new item becomes activated by the scrollspy.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
{% highlight js %} {% highlight js %}
$('#myScrollspy').on('activate.bs.scrollspy', function () { $('#myScrollspy').on('activate.bs.scrollspy', function () {
// do something… // do something…
docs/components/tooltips.md
+4 -8
View File
@@ -146,8 +146,7 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`. Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`.
<div class="table-responsive"> <table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th style="width: 100px;">Name</th>
@@ -245,8 +244,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://tether.io/#constraints">offset docs</a>.</td> <td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://tether.io/#constraints">offset docs</a>.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
{% callout info %} {% callout info %}
#### Data attributes for individual tooltips #### Data attributes for individual tooltips
@@ -286,8 +284,7 @@ Hides and destroys an element's tooltip. Tooltips that use delegation (which are
### Events ### Events
<div class="table-responsive"> <table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 150px;">Event Type</th> <th style="width: 150px;">Event Type</th>
@@ -312,8 +309,7 @@ Hides and destroys an element's tooltip. Tooltips that use delegation (which are
<td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td> <td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
{% highlight js %} {% highlight js %}
$('#myTooltip').on('hidden.bs.tooltip', function () { $('#myTooltip').on('hidden.bs.tooltip', function () {
docs/content/tables.md
+1 -1
View File
@@ -765,7 +765,7 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
</div> </div>
{% highlight html %} {% highlight html %}
<table class="table table-responsive""> <table class="table table-responsive">
... ...
</table> </table>
{% endhighlight %} {% endhighlight %}
docs/getting-started/browsers-devices.md
+4 -8
View File
@@ -22,8 +22,7 @@ Alternative browsers which use the latest version of WebKit, Blink, or Gecko, wh
Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) are not supported. Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) are not supported.
<div class="table-responsive"> <table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<td></td> <td></td>
@@ -60,15 +59,13 @@ Generally speaking, Bootstrap supports the latest versions of each major platfor
<td class="text-success">Supported</td> <td class="text-success">Supported</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
### Desktop browsers ### Desktop browsers
Similarly, the latest versions of most desktop browsers are supported. Similarly, the latest versions of most desktop browsers are supported.
<div class="table-responsive"> <table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<td></td> <td></td>
@@ -100,8 +97,7 @@ Similarly, the latest versions of most desktop browsers are supported.
<td class="text-danger">Not supported</td> <td class="text-danger">Not supported</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
For Firefox, in addition to the latest normal stable release, we also support the latest [Extended Support Release (ESR)](https://www.mozilla.org/en-US/firefox/organizations/faq/) version of Firefox. For Firefox, in addition to the latest normal stable release, we also support the latest [Extended Support Release (ESR)](https://www.mozilla.org/en-US/firefox/organizations/faq/) version of Firefox.
docs/layout/grid.md
+2 -4
View File
@@ -57,8 +57,7 @@ While Bootstrap uses `em`s or `rem`s for defining most sizes, `px`s are used for
See how aspects of the Bootstrap grid system work across multiple devices with a handy table. See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
<div class="table-responsive"> <table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th></th> <th></th>
@@ -127,8 +126,7 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
<td colspan="5">Yes</td> <td colspan="5">Yes</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
## Auto-layout columns ## Auto-layout columns
docs/layout/responsive-utilities.md
+4 -8
View File
@@ -22,8 +22,7 @@ Try to use these on a limited basis and avoid creating entirely different versio
* You can combine one `.hidden-*-up` class with one `.hidden-*-down` class to show an element only on a given interval of screen sizes. For example, `.hidden-sm-down.hidden-xl-up` shows the element only on medium and large viewports. Using multiple `.hidden-*-up` classes or multiple `.hidden-*-down` classes is redundant and pointless. * You can combine one `.hidden-*-up` class with one `.hidden-*-down` class to show an element only on a given interval of screen sizes. For example, `.hidden-sm-down.hidden-xl-up` shows the element only on medium and large viewports. Using multiple `.hidden-*-up` classes or multiple `.hidden-*-down` classes is redundant and pointless.
* These classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport breakpoint sizes; you will instead need to use custom CSS in such cases. * These classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport breakpoint sizes; you will instead need to use custom CSS in such cases.
<div class="table-responsive"> <table class="table table-bordered table-striped responsive-utilities table-responsive">
<table class="table table-bordered table-striped responsive-utilities">
<thead> <thead>
<tr> <tr>
<th></th> <th></th>
@@ -131,13 +130,11 @@ Try to use these on a limited basis and avoid creating entirely different versio
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
<h2 id="responsive-utilities-print">Print classes</h2> <h2 id="responsive-utilities-print">Print classes</h2>
<p>Similar to the regular responsive classes, use these for toggling content for print.</p> <p>Similar to the regular responsive classes, use these for toggling content for print.</p>
<div class="table-responsive"> <table class="table table-bordered table-striped responsive-utilities table-responsive">
<table class="table table-bordered table-striped responsive-utilities">
<thead> <thead>
<tr> <tr>
<th>Class</th> <th>Class</th>
@@ -167,8 +164,7 @@ Try to use these on a limited basis and avoid creating entirely different versio
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
## Test cases ## Test cases