mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-19 16:54:24 +01:00
Use grid classes or mixins on .dl-horizontal, update docs to include it, removes auto truncate and makes .text-overflow mixin into a .text-truncate class and mixin combo for better granularity
This commit is contained in:
parent
8ba213c9aa
commit
3737cb1d46
29
dist/css/bootstrap.css
vendored
29
dist/css/bootstrap.css
vendored
@ -486,28 +486,17 @@ dd {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.dl-horizontal dd:before, .dl-horizontal dd:after {
|
||||
.dl-horizontal {
|
||||
margin-right: -1.5rem;
|
||||
margin-left: -1.5rem;
|
||||
}
|
||||
.dl-horizontal:before, .dl-horizontal:after {
|
||||
display: table;
|
||||
content: " ";
|
||||
}
|
||||
.dl-horizontal dd:after {
|
||||
.dl-horizontal:after {
|
||||
clear: both;
|
||||
}
|
||||
@media (min-width: 34em) {
|
||||
.dl-horizontal dt {
|
||||
float: left;
|
||||
width: 160px;
|
||||
overflow: hidden;
|
||||
clear: left;
|
||||
text-align: right;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dl-horizontal dd {
|
||||
margin-left: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
abbr[title], abbr[data-original-title] {
|
||||
cursor: help;
|
||||
@ -5072,6 +5061,12 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.text-truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.text-lowercase {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
2
dist/css/bootstrap.css.map
vendored
2
dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap.min.css
vendored
2
dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
@ -16,7 +16,7 @@
|
||||
"../../../scss/mixins/_size.scss",
|
||||
"../../../scss/mixins/_tab-focus.scss",
|
||||
"../../../scss/mixins/_text-emphasis.scss",
|
||||
"../../../scss/mixins/_text-overflow.scss",
|
||||
"../../../scss/mixins/_text-truncate.scss",
|
||||
"../../../scss/mixins/_alert.scss",
|
||||
"../../../scss/mixins/_buttons.scss",
|
||||
"../../../scss/mixins/_pagination.scss",
|
||||
|
@ -334,19 +334,22 @@ A list of terms with their associated descriptions.
|
||||
|
||||
### Horizontal description
|
||||
|
||||
Make terms and descriptions in `<dl>` line up side-by-side. Starts off stacked like default `<dl>`s, but when the navbar expands, so do these.
|
||||
Align terms and descriptions horizontally by using our grid system's predefined classes (or semantic mixins). For longer terms, you can optionally add a `.text-truncate` class to truncate the text with an ellipsis.
|
||||
|
||||
{% example html %}
|
||||
<dl class="dl-horizontal">
|
||||
<dt>Description lists</dt>
|
||||
<dd>A description list is perfect for defining terms.</dd>
|
||||
<dt>Euismod</dt>
|
||||
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
|
||||
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
|
||||
<dt>Malesuada porta</dt>
|
||||
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
|
||||
<dt>Felis euismod semper eget lacinia</dt>
|
||||
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
|
||||
<dt class="col-sm-3">Description lists</dt>
|
||||
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
|
||||
|
||||
<dt class="col-sm-3">Euismod</dt>
|
||||
<dd class="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
|
||||
<dd class="col-sm-9 col-sm-offset-3">Donec id elit non mi porta gravida at eget metus.</dd>
|
||||
|
||||
<dt class="col-sm-3">Malesuada porta</dt>
|
||||
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
|
||||
|
||||
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
|
||||
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
|
||||
</dl>
|
||||
{% endexample %}
|
||||
|
||||
|
29
docs/dist/css/bootstrap.css
vendored
29
docs/dist/css/bootstrap.css
vendored
@ -486,28 +486,17 @@ dd {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.dl-horizontal dd:before, .dl-horizontal dd:after {
|
||||
.dl-horizontal {
|
||||
margin-right: -1.5rem;
|
||||
margin-left: -1.5rem;
|
||||
}
|
||||
.dl-horizontal:before, .dl-horizontal:after {
|
||||
display: table;
|
||||
content: " ";
|
||||
}
|
||||
.dl-horizontal dd:after {
|
||||
.dl-horizontal:after {
|
||||
clear: both;
|
||||
}
|
||||
@media (min-width: 34em) {
|
||||
.dl-horizontal dt {
|
||||
float: left;
|
||||
width: 160px;
|
||||
overflow: hidden;
|
||||
clear: left;
|
||||
text-align: right;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dl-horizontal dd {
|
||||
margin-left: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
abbr[title], abbr[data-original-title] {
|
||||
cursor: help;
|
||||
@ -5072,6 +5061,12 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.text-truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.text-lowercase {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
2
docs/dist/css/bootstrap.css.map
vendored
2
docs/dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/css/bootstrap.min.css
vendored
2
docs/dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
@ -34,7 +34,7 @@
|
||||
@import "mixins/size";
|
||||
@import "mixins/tab-focus";
|
||||
@import "mixins/text-emphasis";
|
||||
@import "mixins/text-overflow";
|
||||
@import "mixins/text-truncate";
|
||||
|
||||
// // Components
|
||||
@import "mixins/alert";
|
||||
|
@ -142,28 +142,11 @@ dd {
|
||||
margin-left: 0; // Undo browser default
|
||||
}
|
||||
|
||||
// Horizontal description lists
|
||||
//
|
||||
// Defaults to being stacked without any of the below styles applied, until the
|
||||
// grid breakpoint is reached (default of ~768px).
|
||||
|
||||
// Horizontal description lists w/ grid classes
|
||||
.dl-horizontal {
|
||||
dd {
|
||||
@include clearfix(); // Clear the floated `dt` if an empty `dd` is present
|
||||
}
|
||||
|
||||
@media (min-width: $grid-float-breakpoint) {
|
||||
dt {
|
||||
float: left;
|
||||
width: ($dl-horizontal-offset - 20);
|
||||
clear: left;
|
||||
text-align: right;
|
||||
@include text-overflow();
|
||||
}
|
||||
dd {
|
||||
margin-left: $dl-horizontal-offset;
|
||||
}
|
||||
}
|
||||
margin-right: -$grid-gutter-width;
|
||||
margin-left: -$grid-gutter-width;
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
|
||||
|
@ -79,6 +79,7 @@
|
||||
.text-center { text-align: center; }
|
||||
.text-justify { text-align: justify; }
|
||||
.text-nowrap { white-space: nowrap; }
|
||||
.text-truncate { @include text-truncate; }
|
||||
|
||||
// Transformation
|
||||
.text-lowercase { text-transform: lowercase; }
|
||||
|
@ -1,7 +1,7 @@
|
||||
// Text overflow
|
||||
// Text truncate
|
||||
// Requires inline-block or block for proper styling
|
||||
|
||||
@mixin text-overflow() {
|
||||
@mixin text-truncate() {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
Loading…
x
Reference in New Issue
Block a user