rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-06 04:08:22 +01:00
Code Issues Actions Packages Releases 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/browser-bugs.md
View File

@ -15,8 +15,7 @@ See also:
* [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)
<div class="table-responsive">
<table class="bd-browser-bugs table table-bordered table-hover">
<table class="bd-browser-bugs table table-bordered table-hover table-responsive">
<thead>
<tr>
<th>Browser(s)</th>
@ -36,7 +35,6 @@ See also:
{% endfor %}
</tbody>
</table>
</div>
# 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.
<div class="table-responsive">
<table class="bd-browser-bugs table table-bordered table-hover">
<table class="bd-browser-bugs table table-bordered table-hover table-responsive">
<thead>
<tr>
<th>Browser(s)</th>
@ -65,4 +62,3 @@ We publicly list these "most wanted" feature requests here, in the hopes of expe
{% endfor %}
</tbody>
</table>
</div>

8
docs/components/carousel.md
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=""`.
<div class="table-responsive">
<table class="table table-bordered table-striped">
<table class="table table-bordered table-striped table-responsive">
<thead>
<tr>
<th style="width: 100px;">Name</th>
@ -227,7 +226,6 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
</tr>
</tbody>
</table>
</div>
### 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">`).
<div class="table-responsive">
<table class="table table-bordered table-striped">
<table class="table table-bordered table-striped table-responsive">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>
@ -289,7 +286,6 @@ All carousel events are fired at the carousel itself (i.e. at the `<div class="c
</tr>
</tbody>
</table>
</div>
{% highlight js %}
$('#myCarousel').on('slide.bs.carousel', function () {

8
docs/components/collapse.md
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=""`.
<div class="table-responsive">
<table class="table table-bordered table-striped">
<table class="table table-bordered table-striped table-responsive">
<thead>
<tr>
<th style="width: 100px;">Name</th>
@ -149,7 +148,6 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
</tr>
</tbody>
</table>
</div>
### Methods
@ -179,8 +177,7 @@ Hides a collapsible element.
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 class="table table-bordered table-striped table-responsive">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>
@ -208,7 +205,6 @@ Bootstrap's collapse class exposes a few events for hooking into collapse functi
</tr>
</tbody>
</table>
</div>
{% highlight js %}
$('#myCollapsible').on('hidden.bs.collapse', function () {

8
docs/components/modal.md
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=""`.
<div class="table-responsive">
<table class="table table-bordered table-striped">
<table class="table table-bordered table-striped table-responsive">
<thead>
<tr>
<th style="width: 100px;">Name</th>
@ -545,7 +544,6 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
</tr>
</tbody>
</table>
</div>
### 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">`).
<div class="table-responsive">
<table class="table table-bordered table-striped">
<table class="table table-bordered table-striped table-responsive">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>
@ -608,7 +605,6 @@ Bootstrap's modal class exposes a few events for hooking into modal functionalit
</tr>
</tbody>
</table>
</div>
{% highlight js %}
$('#myModal').on('hidden.bs.modal', function (e) {

8
docs/components/popovers.md
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=""`.
<div class="table-responsive">
<table class="table table-bordered table-striped">
<table class="table table-bordered table-striped table-responsive">
<thead>
<tr>
<th style="width: 100px;">Name</th>
@ -269,7 +268,6 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
</tr>
</tbody>
</table>
</div>
{% callout info %}
#### Data attributes for individual popovers
@ -310,8 +308,7 @@ Hides and destroys an element's popover. Popovers that use delegation (which are
### Events
<div class="table-responsive">
<table class="table table-bordered table-striped">
<table class="table table-bordered table-striped table-responsive">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>
@ -337,7 +334,6 @@ Hides and destroys an element's popover. Popovers that use delegation (which are
</tr>
</tbody>
</table>
</div>
{% highlight js %}
$('#myPopover').on('hidden.bs.popover', function () {

9
docs/components/scrollspy.md
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=""`.
<div class="table-responsive">
<table class="table table-bordered table-striped">
<table class="table table-bordered table-striped table-responsive">
<thead>
<tr>
<th style="width: 100px;">Name</th>
@ -136,12 +135,10 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
</tr>
</tbody>
</table>
</div>
### Events
<div class="table-responsive">
<table class="table table-bordered table-striped">
<table class="table table-bordered table-striped table-responsive">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>
@ -155,7 +152,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
</tr>
</tbody>
</table>
</div>
{% highlight js %}
$('#myScrollspy').on('activate.bs.scrollspy', function () {
// do something…

8
docs/components/tooltips.md
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=""`.
<div class="table-responsive">
<table class="table table-bordered table-striped">
<table class="table table-bordered table-striped table-responsive">
<thead>
<tr>
<th style="width: 100px;">Name</th>
@ -246,7 +245,6 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
</tr>
</tbody>
</table>
</div>
{% callout info %}
#### Data attributes for individual tooltips
@ -286,8 +284,7 @@ Hides and destroys an element's tooltip. Tooltips that use delegation (which are
### Events
<div class="table-responsive">
<table class="table table-bordered table-striped">
<table class="table table-bordered table-striped table-responsive">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>
@ -313,7 +310,6 @@ Hides and destroys an element's tooltip. Tooltips that use delegation (which are
</tr>
</tbody>
</table>
</div>
{% highlight js %}
$('#myTooltip').on('hidden.bs.tooltip', function () {

2
docs/content/tables.md
View File

@ -765,7 +765,7 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
</div>
{% highlight html %}
<table class="table table-responsive"">
<table class="table table-responsive">
...
</table>
{% endhighlight %}

8
docs/getting-started/browsers-devices.md
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.
<div class="table-responsive">
<table class="table table-bordered table-striped">
<table class="table table-bordered table-striped table-responsive">
<thead>
<tr>
<td></td>
@ -61,14 +60,12 @@ Generally speaking, Bootstrap supports the latest versions of each major platfor
</tr>
</tbody>
</table>
</div>
### Desktop browsers
Similarly, the latest versions of most desktop browsers are supported.
<div class="table-responsive">
<table class="table table-bordered table-striped">
<table class="table table-bordered table-striped table-responsive">
<thead>
<tr>
<td></td>
@ -101,7 +98,6 @@ Similarly, the latest versions of most desktop browsers are supported.
</tr>
</tbody>
</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.

4
docs/layout/grid.md
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.
<div class="table-responsive">
<table class="table table-bordered table-striped">
<table class="table table-bordered table-striped table-responsive">
<thead>
<tr>
<th></th>
@ -128,7 +127,6 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
</tr>
</tbody>
</table>
</div>
## Auto-layout columns

8
docs/layout/responsive-utilities.md
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.
* 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 class="table table-bordered table-striped responsive-utilities table-responsive">
<thead>
<tr>
<th></th>
@ -132,12 +131,10 @@ Try to use these on a limited basis and avoid creating entirely different versio
</tr>
</tbody>
</table>
</div>
<h2 id="responsive-utilities-print">Print classes</h2>
<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 class="table table-bordered table-striped responsive-utilities table-responsive">
<thead>
<tr>
<th>Class</th>
@ -168,7 +165,6 @@ Try to use these on a limited basis and avoid creating entirely different versio
</tr>
</tbody>
</table>
</div>
## Test cases