Add responsive tables with help of `.table-responsive` wrapper
This commit is contained in:
Mark Otto
parent
1a8d1b7586
commit
e989acfc79
|
|
@ -46,6 +46,7 @@
|
|||
<li><a href="#tables-hover-rows">Hover rows</a></li>
|
||||
<li><a href="#tables-condensed">Condensed table</a></li>
|
||||
<li><a href="#tables-contextual-classes">Contextual classes</a></li>
|
||||
<li><a href="#tables-responsive">Responsive tables</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
|
|
|
|||
|
|
@ -862,36 +862,7 @@ body {
|
|||
*/
|
||||
|
||||
/* Responsive (scrollable) doc tables */
|
||||
@media (max-width: 768px) {
|
||||
.bs-table-scrollable {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
.bs-table-scrollable .table {
|
||||
margin-bottom: 0;
|
||||
border: 0;
|
||||
}
|
||||
.bs-table-scrollable .table th,
|
||||
.bs-table-scrollable .table td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.bs-table-scrollable .table th:first-child,
|
||||
.bs-table-scrollable .table td:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
.bs-table-scrollable .table th:last-child,
|
||||
.bs-table-scrollable .table td:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
.bs-table-scrollable .table tr:last-child th,
|
||||
.bs-table-scrollable .table tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
.bs-table-scrollable .highlight pre {
|
||||
.table-responsive .highlight pre {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
|
|
|
|||
115
css.html
115
css.html
|
|
@ -98,8 +98,8 @@ base_url: "../"
|
|||
|
||||
<h3 id="grid-options">Grid options</h3>
|
||||
<p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped bs-table">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
|
|
@ -1217,11 +1217,10 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
<h2 id="tables-contextual-classes">Contextual classes</h2>
|
||||
<p>Use contextual classes to color table rows or individual cells.</p>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped bs-table">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<colgroup>
|
||||
<col class="col-lg-1">
|
||||
<col class="col-lg-7">
|
||||
|
|
@ -1332,6 +1331,108 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
</tr>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
<h2 id="tables-responsive">Responsive tables</h2>
|
||||
<p>Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> to make them scroll horizontally up to small devices (under 768px).</p>
|
||||
<div class="bs-example">
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Table heading</th>
|
||||
<th>Table heading</th>
|
||||
<th>Table heading</th>
|
||||
<th>Table heading</th>
|
||||
<th>Table heading</th>
|
||||
<th>Table heading</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.table-responsive -->
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Table heading</th>
|
||||
<th>Table heading</th>
|
||||
<th>Table heading</th>
|
||||
<th>Table heading</th>
|
||||
<th>Table heading</th>
|
||||
<th>Table heading</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.table-responsive -->
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
...
|
||||
</table>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -2117,7 +2218,7 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
<p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
|
||||
|
||||
<h3>Responsive classes</h3>
|
||||
<div class="bs-table-scrollable">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped responsive-utilities">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -2204,7 +2305,7 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
</div>
|
||||
|
||||
<h3>Print classes</h3>
|
||||
<div class="bs-table-scrollable">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped responsive-utilities">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -1573,6 +1573,55 @@ table th[class^="col-"] {
|
|||
border-color: #f8e5be;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.table-responsive {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
border: 1px solid #dddddd;
|
||||
}
|
||||
.table-responsive > .table {
|
||||
margin-bottom: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.table-responsive > .table > thead > tr > th,
|
||||
.table-responsive > .table > tbody > tr > th,
|
||||
.table-responsive > .table > tfoot > tr > th,
|
||||
.table-responsive > .table > thead > tr > td,
|
||||
.table-responsive > .table > tbody > tr > td,
|
||||
.table-responsive > .table > tfoot > tr > td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.table-responsive > .table-bordered {
|
||||
border: 0;
|
||||
}
|
||||
.table-responsive > .table-bordered > thead > tr > th:first-child,
|
||||
.table-responsive > .table-bordered > tbody > tr > th:first-child,
|
||||
.table-responsive > .table-bordered > tfoot > tr > th:first-child,
|
||||
.table-responsive > .table-bordered > thead > tr > td:first-child,
|
||||
.table-responsive > .table-bordered > tbody > tr > td:first-child,
|
||||
.table-responsive > .table-bordered > tfoot > tr > td:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
.table-responsive > .table-bordered > thead > tr > th:last-child,
|
||||
.table-responsive > .table-bordered > tbody > tr > th:last-child,
|
||||
.table-responsive > .table-bordered > tfoot > tr > th:last-child,
|
||||
.table-responsive > .table-bordered > thead > tr > td:last-child,
|
||||
.table-responsive > .table-bordered > tbody > tr > td:last-child,
|
||||
.table-responsive > .table-bordered > tfoot > tr > td:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
.table-responsive > .table-bordered > thead > tr:last-child > th,
|
||||
.table-responsive > .table-bordered > tbody > tr:last-child > th,
|
||||
.table-responsive > .table-bordered > tfoot > tr:last-child > th,
|
||||
.table-responsive > .table-bordered > thead > tr:last-child > td,
|
||||
.table-responsive > .table-bordered > tbody > tr:last-child > td,
|
||||
.table-responsive > .table-bordered > tfoot > tr:last-child > td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
fieldset {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -328,304 +328,312 @@ bootstrap/
|
|||
|
||||
<h3 id="migration-classes">Major class changes</h3>
|
||||
<p></p>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Bootstrap 2.x</th>
|
||||
<th>Bootstrap 3.0</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>.container-fluid</code></td>
|
||||
<td><code>.container</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.row-fluid</code></td>
|
||||
<td><code>.row</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.span*</code></td>
|
||||
<td><code>.col-md-*</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.offset*</code></td>
|
||||
<td><code>.col-md-offset-*</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.brand</code></td>
|
||||
<td><code>.navbar-brand</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.hero-unit</code></td>
|
||||
<td><code>.jumbotron</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.icon-*</code></td>
|
||||
<td><code>.glyphicon .glyphicon-*</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.btn</code></td>
|
||||
<td><code>.btn .btn-default</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.btn-mini</code></td>
|
||||
<td><code>.btn-xs</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.btn-small</code></td>
|
||||
<td><code>.btn-sm</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.btn-large</code></td>
|
||||
<td><code>.btn-lg</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.visible-phone</code></td>
|
||||
<td><code>.visible-sm</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.visible-tablet</code></td>
|
||||
<td><code>.visible-md</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.visible-desktop</code></td>
|
||||
<td><code>.visible-lg</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.hidden-phone</code></td>
|
||||
<td><code>.hidden-sm</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.hidden-tablet</code></td>
|
||||
<td><code>.hidden-md</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.hidden-desktop</code></td>
|
||||
<td><code>.hidden-lg</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.input-small</code></td>
|
||||
<td><code>.input-sm</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.input-large</code></td>
|
||||
<td><code>.input-lg</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.input-prepend</code></td>
|
||||
<td><code>.input-group</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.input-append</code></td>
|
||||
<td><code>.input-group</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.add-on</code></td>
|
||||
<td><code>.input-group-addon</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.btn-navbar</code></td>
|
||||
<td><code>.navbar-btn</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.thumbnail</code></td>
|
||||
<td><code>.img-thumbnail</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>ul.inline</code></td>
|
||||
<td><code>.list-inline</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Bootstrap 2.x</th>
|
||||
<th>Bootstrap 3.0</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>.container-fluid</code></td>
|
||||
<td><code>.container</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.row-fluid</code></td>
|
||||
<td><code>.row</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.span*</code></td>
|
||||
<td><code>.col-md-*</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.offset*</code></td>
|
||||
<td><code>.col-md-offset-*</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.brand</code></td>
|
||||
<td><code>.navbar-brand</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.hero-unit</code></td>
|
||||
<td><code>.jumbotron</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.icon-*</code></td>
|
||||
<td><code>.glyphicon .glyphicon-*</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.btn</code></td>
|
||||
<td><code>.btn .btn-default</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.btn-mini</code></td>
|
||||
<td><code>.btn-xs</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.btn-small</code></td>
|
||||
<td><code>.btn-sm</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.btn-large</code></td>
|
||||
<td><code>.btn-lg</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.visible-phone</code></td>
|
||||
<td><code>.visible-sm</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.visible-tablet</code></td>
|
||||
<td><code>.visible-md</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.visible-desktop</code></td>
|
||||
<td><code>.visible-lg</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.hidden-phone</code></td>
|
||||
<td><code>.hidden-sm</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.hidden-tablet</code></td>
|
||||
<td><code>.hidden-md</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.hidden-desktop</code></td>
|
||||
<td><code>.hidden-lg</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.input-small</code></td>
|
||||
<td><code>.input-sm</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.input-large</code></td>
|
||||
<td><code>.input-lg</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.input-prepend</code></td>
|
||||
<td><code>.input-group</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.input-append</code></td>
|
||||
<td><code>.input-group</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.add-on</code></td>
|
||||
<td><code>.input-group-addon</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.btn-navbar</code></td>
|
||||
<td><code>.navbar-btn</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.thumbnail</code></td>
|
||||
<td><code>.img-thumbnail</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>ul.inline</code></td>
|
||||
<td><code>.list-inline</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.table-responsive -->
|
||||
|
||||
|
||||
<h3 id="migration-new">What's new</h3>
|
||||
<p>We've added a few new elements and changed some existing ones. Here's their new or updated classes.</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Element</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Panels</td>
|
||||
<td><code>.panel</code> <code>.panel-body</code> <code>.panel-title</code> <code>.panel-heading</code> <code>.panel-footer</code> <code>.panel-collapse</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>List groups</td>
|
||||
<td><code>.list-group</code> <code>.list-group-item</code> <code>.list-group-item-text</code> <code>.list-group-item-heading</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Glyphicons</td>
|
||||
<td><code>.glyphicon</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jumbotron</td>
|
||||
<td><code>.jumbotron</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tiny grid (<768 px)</td>
|
||||
<td><code>.col-xs-*</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Small grid (>768 px)</td>
|
||||
<td><code>.col-sm-*</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Medium grid (>992 px)</td>
|
||||
<td><code>.col-md-*</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Large grid (>1200 px)</td>
|
||||
<td><code>.col-lg-*</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Offsets</td>
|
||||
<td><code>.col-sm-offset-*</code> <code>.col-md-offset-*</code> <code>.col-lg-offset-*</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Push</td>
|
||||
<td><code>.col-sm-push-*</code> <code>.col-md-push-*</code> <code>.col-lg-push-*</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pull</td>
|
||||
<td><code>.col-sm-pull-*</code> <code>.col-md-pull-*</code> <code>.col-lg-pull-*</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Input groups</td>
|
||||
<td><code>.input-group</code> <code>.input-group-addon</code> <code>.input-group-btn</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Form controls</td>
|
||||
<td><code>.form-control</code> <code>.form-group</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Inline controls</td>
|
||||
<td><code>.checkbox-inline</code> <code>.radio-inline</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Button group sizes</td>
|
||||
<td><code>.btn-group-xs</code> <code>.btn-group-sm</code> <code>.btn-group-lg</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Navbar text</td>
|
||||
<td><code>.navbar-text</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Navbar header</td>
|
||||
<td><code>.navbar-header</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Justified tabs / pills</td>
|
||||
<td><code>.nav-justified</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Responsive images</td>
|
||||
<td><code>.img-responsive</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Contextual table rows</td>
|
||||
<td><code>.success</code> <code>.danger</code> <code>.warning</code> <code>.active</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Contextual panels</td>
|
||||
<td><code>.panel-success</code> <code>.panel-danger</code> <code>.panel-warning</code> <code>.panel-info</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Modal</td>
|
||||
<td><code>.modal-dialog</code> <code>.modal-content</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thumbnail image</td>
|
||||
<td><code>.img-thumbnail</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Well sizes</td>
|
||||
<td><code>.well-sm</code> <code>.well-lg</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alert links</td>
|
||||
<td><code>.alert-link</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Element</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Panels</td>
|
||||
<td><code>.panel</code> <code>.panel-body</code> <code>.panel-title</code> <code>.panel-heading</code> <code>.panel-footer</code> <code>.panel-collapse</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>List groups</td>
|
||||
<td><code>.list-group</code> <code>.list-group-item</code> <code>.list-group-item-text</code> <code>.list-group-item-heading</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Glyphicons</td>
|
||||
<td><code>.glyphicon</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jumbotron</td>
|
||||
<td><code>.jumbotron</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tiny grid (<768 px)</td>
|
||||
<td><code>.col-xs-*</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Small grid (>768 px)</td>
|
||||
<td><code>.col-sm-*</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Medium grid (>992 px)</td>
|
||||
<td><code>.col-md-*</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Large grid (>1200 px)</td>
|
||||
<td><code>.col-lg-*</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Offsets</td>
|
||||
<td><code>.col-sm-offset-*</code> <code>.col-md-offset-*</code> <code>.col-lg-offset-*</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Push</td>
|
||||
<td><code>.col-sm-push-*</code> <code>.col-md-push-*</code> <code>.col-lg-push-*</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pull</td>
|
||||
<td><code>.col-sm-pull-*</code> <code>.col-md-pull-*</code> <code>.col-lg-pull-*</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Input groups</td>
|
||||
<td><code>.input-group</code> <code>.input-group-addon</code> <code>.input-group-btn</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Form controls</td>
|
||||
<td><code>.form-control</code> <code>.form-group</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Inline controls</td>
|
||||
<td><code>.checkbox-inline</code> <code>.radio-inline</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Button group sizes</td>
|
||||
<td><code>.btn-group-xs</code> <code>.btn-group-sm</code> <code>.btn-group-lg</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Navbar text</td>
|
||||
<td><code>.navbar-text</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Navbar header</td>
|
||||
<td><code>.navbar-header</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Justified tabs / pills</td>
|
||||
<td><code>.nav-justified</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Responsive images</td>
|
||||
<td><code>.img-responsive</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Contextual table rows</td>
|
||||
<td><code>.success</code> <code>.danger</code> <code>.warning</code> <code>.active</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Contextual panels</td>
|
||||
<td><code>.panel-success</code> <code>.panel-danger</code> <code>.panel-warning</code> <code>.panel-info</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Modal</td>
|
||||
<td><code>.modal-dialog</code> <code>.modal-content</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thumbnail image</td>
|
||||
<td><code>.img-thumbnail</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Well sizes</td>
|
||||
<td><code>.well-sm</code> <code>.well-lg</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alert links</td>
|
||||
<td><code>.alert-link</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.table-responsive -->
|
||||
|
||||
|
||||
<h3 id="migration-dropped">What's removed</h3>
|
||||
<p>The following elements have been dropped or changed in v3.</p>
|
||||
<table class="table table-bordered table-striped bs-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Element</th>
|
||||
<th>Removed from 2.x</th>
|
||||
<th>3.0 Equivalent</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Hero Unit</td>
|
||||
<td><code>.hero-unit</code></td>
|
||||
<td><code>.jumbotron</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Form actions</td>
|
||||
<td><code>.form-actions</code></td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Grid</td>
|
||||
<td><code>.span*</code></td>
|
||||
<td><code>.col-md-*</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fluid container</td>
|
||||
<td><code>.container-fluid</code></td>
|
||||
<td><code>.container</code> (no more fixed grid)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fluid row</td>
|
||||
<td><code>.row-fluid</code></td>
|
||||
<td><code>.row</code> (no more fixed grid)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Icons</td>
|
||||
<td><code>.icon-*</code></td>
|
||||
<td><code>.glyphicon-*</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Navbar button</td>
|
||||
<td><code>.btn-navbar</code></td>
|
||||
<td><code>.navbar-btn</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Navbar inner</td>
|
||||
<td><code>.navbar-inner</code></td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thumbnails</td>
|
||||
<td><code>.thumbnails</code></td>
|
||||
<td><code>.col-*</code> and <code>.thumbnail</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Input append / prepend</td>
|
||||
<td><code>.input-append</code> <code>.input-prepend</code> <code>.add-on</code></td>
|
||||
<td><code>.input-group</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dropdown submenu</td>
|
||||
<td><code>.dropdown-submenu</code></td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tab alignments</td>
|
||||
<td><code>.tabs-left</code> <code>.tabs-right</code> <code>.tabs-below</code></td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Element</th>
|
||||
<th>Removed from 2.x</th>
|
||||
<th>3.0 Equivalent</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Hero Unit</td>
|
||||
<td><code>.hero-unit</code></td>
|
||||
<td><code>.jumbotron</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Form actions</td>
|
||||
<td><code>.form-actions</code></td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Grid</td>
|
||||
<td><code>.span*</code></td>
|
||||
<td><code>.col-md-*</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fluid container</td>
|
||||
<td><code>.container-fluid</code></td>
|
||||
<td><code>.container</code> (no more fixed grid)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fluid row</td>
|
||||
<td><code>.row-fluid</code></td>
|
||||
<td><code>.row</code> (no more fixed grid)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Icons</td>
|
||||
<td><code>.icon-*</code></td>
|
||||
<td><code>.glyphicon-*</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Navbar button</td>
|
||||
<td><code>.btn-navbar</code></td>
|
||||
<td><code>.navbar-btn</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Navbar inner</td>
|
||||
<td><code>.navbar-inner</code></td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thumbnails</td>
|
||||
<td><code>.thumbnails</code></td>
|
||||
<td><code>.col-*</code> and <code>.thumbnail</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Input append / prepend</td>
|
||||
<td><code>.input-append</code> <code>.input-prepend</code> <code>.add-on</code></td>
|
||||
<td><code>.input-group</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dropdown submenu</td>
|
||||
<td><code>.dropdown-submenu</code></td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tab alignments</td>
|
||||
<td><code>.tabs-left</code> <code>.tabs-right</code> <code>.tabs-below</code></td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.table-responsive -->
|
||||
|
||||
|
||||
<h3 id="migration-notes">Additional notes</h3>
|
||||
<p>We've made many underlying changes in v3 that are not immediately apparent without closer inspection. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach.</p>
|
||||
|
|
|
|||
|
|
@ -240,7 +240,7 @@ $('#myModal').on('show.bs.modal', function (e) {
|
|||
|
||||
<h3>Options</h3>
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.</p>
|
||||
<div class="bs-table-scrollable">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -280,7 +280,7 @@ $('#myModal').on('show.bs.modal', function (e) {
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
</div><!-- /.table-responsive -->
|
||||
|
||||
<h3>Methods</h3>
|
||||
|
||||
|
|
@ -306,7 +306,7 @@ $('#myModal').modal({
|
|||
|
||||
<h3>Events</h3>
|
||||
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p>
|
||||
<div class="bs-table-scrollable">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -333,7 +333,7 @@ $('#myModal').modal({
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
</div><!-- /.table-responsive -->
|
||||
{% highlight js %}
|
||||
$('#myModal').on('hidden.bs.modal', function () {
|
||||
// do something…
|
||||
|
|
@ -480,7 +480,7 @@ $('.dropdown-toggle').dropdown()
|
|||
<p>Toggles the dropdown menu of a given navbar or tabbed navigation.</p>
|
||||
|
||||
<h3>Events</h3>
|
||||
<div class="bs-table-scrollable">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -507,7 +507,7 @@ $('.dropdown-toggle').dropdown()
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- ./bs-table-scrollable -->
|
||||
</div><!-- ./bs-table-responsive -->
|
||||
{% highlight js %}
|
||||
$('#myDropdown').on('show.bs.dropdown', function () {
|
||||
// do something…
|
||||
|
|
@ -602,7 +602,7 @@ $('[data-spy="scroll"]').each(function () {
|
|||
|
||||
<h3>Options</h3>
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset=""</code>.</p>
|
||||
<div class="bs-table-scrollable">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -621,10 +621,10 @@ $('[data-spy="scroll"]').each(function () {
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- ./bs-table-scrollable -->
|
||||
</div><!-- ./bs-table-responsive -->
|
||||
|
||||
<h3>Events</h3>
|
||||
<div class="bs-table-scrollable">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -639,7 +639,7 @@ $('[data-spy="scroll"]').each(function () {
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- ./bs-table-scrollable -->
|
||||
</div><!-- ./bs-table-responsive -->
|
||||
{% highlight js %}
|
||||
$('#myScrollspy').on('activate.bs.scrollspy', function () {
|
||||
// do something…
|
||||
|
|
@ -745,7 +745,7 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
|
|||
{% endhighlight %}
|
||||
|
||||
<h3>Events</h3>
|
||||
<div class="bs-table-scrollable">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -764,7 +764,7 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
</div><!-- /.table-responsive -->
|
||||
{% highlight js %}
|
||||
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
||||
e.target // activated tab
|
||||
|
|
@ -814,7 +814,7 @@ $('#example').tooltip(options)
|
|||
|
||||
<h3>Options</h3>
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
|
||||
<div class="bs-table-scrollable">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -881,7 +881,7 @@ $('#example').tooltip(options)
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
</div><!-- /.table-responsive -->
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<h4>Data attributes for individual tooltips</h4>
|
||||
<p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p>
|
||||
|
|
@ -914,7 +914,7 @@ $('#example').tooltip(options)
|
|||
{% highlight js %}$('#element').tooltip('destroy'){% endhighlight %}
|
||||
|
||||
<h3>Events</h3>
|
||||
<div class="bs-table-scrollable">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -941,7 +941,7 @@ $('#example').tooltip(options)
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
</div><!-- /.table-responsive -->
|
||||
{% highlight js %}
|
||||
$('#myTooltip').on('hidden.bs.tooltip', function () {
|
||||
// do something…
|
||||
|
|
@ -1036,7 +1036,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
|
|||
|
||||
<h3>Options</h3>
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
|
||||
<div class="bs-table-scrollable">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -1109,7 +1109,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
</div><!-- /.table-responsive -->
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<h4>Data attributes for individual popovers</h4>
|
||||
<p>Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.</p>
|
||||
|
|
@ -1138,7 +1138,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
|
|||
<p>Hides and destroys an element's popover.</p>
|
||||
{% highlight js %}$('#element').popover('destroy'){% endhighlight %}
|
||||
<h3>Events</h3>
|
||||
<div class="bs-table-scrollable">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -1165,7 +1165,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
</div><!-- /.table-responsive -->
|
||||
{% highlight js %}
|
||||
$('#myPopover').on('hidden.bs.popover', function () {
|
||||
// do something…
|
||||
|
|
@ -1222,7 +1222,7 @@ $('#myPopover').on('hidden.bs.popover', function () {
|
|||
|
||||
<h3>Events</h3>
|
||||
<p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p>
|
||||
<div class="bs-table-scrollable">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -1241,7 +1241,7 @@ $('#myPopover').on('hidden.bs.popover', function () {
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
</div><!-- /.table-responsive -->
|
||||
{% highlight js %}
|
||||
$('#my-alert').bind('closed.bs.alert', function () {
|
||||
// do something…
|
||||
|
|
@ -1528,7 +1528,7 @@ $(".collapse").collapse()
|
|||
|
||||
<h3>Options</h3>
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-parent=""</code>.</p>
|
||||
<div class="bs-table-scrollable">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -1553,7 +1553,7 @@ $(".collapse").collapse()
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
</div><!-- /.table-responsive -->
|
||||
|
||||
<h3>Methods</h3>
|
||||
|
||||
|
|
@ -1576,7 +1576,7 @@ $('#myCollapsible').collapse({
|
|||
|
||||
<h3>Events</h3>
|
||||
<p>Bootstrap's collapse class exposes a few events for hooking into collapse functionality.</p>
|
||||
<div class="bs-table-scrollable">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -1605,7 +1605,7 @@ $('#myCollapsible').collapse({
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
</div><!-- /.table-responsive -->
|
||||
{% highlight js %}
|
||||
$('#myCollapsible').on('hidden.bs.collapse', function () {
|
||||
// do something…
|
||||
|
|
@ -1752,7 +1752,7 @@ $('.carousel').carousel()
|
|||
|
||||
<h3>Options</h3>
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.</p>
|
||||
<div class="bs-table-scrollable">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -1783,7 +1783,7 @@ $('.carousel').carousel()
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
</div><!-- /.table-responsive -->
|
||||
|
||||
<h3>Methods</h3>
|
||||
|
||||
|
|
@ -1813,7 +1813,7 @@ $('.carousel').carousel({
|
|||
|
||||
<h3>Events</h3>
|
||||
<p>Bootstrap's carousel class exposes two events for hooking into carousel functionality.</p>
|
||||
<div class="bs-table-scrollable">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -1832,7 +1832,7 @@ $('.carousel').carousel({
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
</div><!-- /.table-responsive -->
|
||||
{% highlight js %}
|
||||
$('#myCarousel').on('slide.bs.carousel', function () {
|
||||
// do something…
|
||||
|
|
@ -1888,7 +1888,7 @@ $('#myCarousel').on('slide.bs.carousel', function () {
|
|||
<h3>Options</h3>
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.</p>
|
||||
|
||||
<div class="bs-table-scrollable">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -1907,6 +1907,6 @@ $('#myCarousel').on('slide.bs.carousel', function () {
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
</div><!-- /.table-responsive -->
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@ th {
|
|||
|
||||
|
||||
// Baseline styles
|
||||
// ---------------
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
|
|
@ -59,9 +58,7 @@ th {
|
|||
}
|
||||
|
||||
|
||||
|
||||
// Condensed table w/ half padding
|
||||
// -------------------------------
|
||||
|
||||
.table-condensed {
|
||||
thead,
|
||||
|
|
@ -77,9 +74,9 @@ th {
|
|||
}
|
||||
|
||||
|
||||
|
||||
// Bordered version
|
||||
// ----------------
|
||||
//
|
||||
// Add borders all around the table and between all the columns.
|
||||
|
||||
.table-bordered {
|
||||
border: 1px solid @table-border-color;
|
||||
|
|
@ -104,11 +101,10 @@ th {
|
|||
}
|
||||
|
||||
|
||||
|
||||
// Zebra-striping
|
||||
// --------------
|
||||
|
||||
//
|
||||
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
|
||||
|
||||
.table-striped {
|
||||
> tbody {
|
||||
> tr:nth-child(odd) {
|
||||
|
|
@ -121,11 +117,10 @@ th {
|
|||
}
|
||||
|
||||
|
||||
|
||||
// Hover effect
|
||||
// ------------
|
||||
|
||||
//
|
||||
// Placed here since it has to come after the potential zebra striping
|
||||
|
||||
.table-hover {
|
||||
> tbody {
|
||||
> tr:hover {
|
||||
|
|
@ -138,11 +133,10 @@ th {
|
|||
}
|
||||
|
||||
|
||||
|
||||
// Table cell sizing
|
||||
// -----------------
|
||||
|
||||
//
|
||||
// Reset default table behavior
|
||||
|
||||
table col[class^="col-"] {
|
||||
float: none;
|
||||
display: table-column;
|
||||
|
|
@ -158,9 +152,8 @@ table {
|
|||
}
|
||||
|
||||
|
||||
|
||||
// Table backgrounds
|
||||
// -----------------
|
||||
//
|
||||
// Exact selectors below required to override `.table-striped` and prevent
|
||||
// inheritance to nested tables.
|
||||
|
||||
|
|
@ -175,10 +168,69 @@ table {
|
|||
}
|
||||
}
|
||||
|
||||
// Contextual variants
|
||||
// -------------------
|
||||
// Generate the contextual variants
|
||||
.table-row-variant(success; @state-success-bg; @state-success-border);
|
||||
|
||||
.table-row-variant(danger; @state-danger-bg; @state-danger-border);
|
||||
|
||||
.table-row-variant(warning; @state-warning-bg; @state-warning-border);
|
||||
|
||||
|
||||
// Responsive tables
|
||||
//
|
||||
// Wrap your tables in `.table-scrollable` and we'll make them mobile friendly
|
||||
// by enabling horizontal scrolling. Only applies <768px. Everything above that
|
||||
// will display normally.
|
||||
|
||||
@media (max-width: @screen-sm) {
|
||||
.table-responsive {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
border: 1px solid @table-border-color;
|
||||
|
||||
// Tighten up spacing and give a background color
|
||||
> .table {
|
||||
margin-bottom: 0;
|
||||
background-color: #fff;
|
||||
|
||||
// Ensure the content doesn't wrap
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Special overrides for the bordered tables
|
||||
> .table-bordered {
|
||||
border: 0;
|
||||
|
||||
// Nuke the appropriate borders so that the parent can handle them
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th:first-child,
|
||||
> td:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
> th:last-child,
|
||||
> td:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
> tr:last-child {
|
||||
> th,
|
||||
> td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue