diff options
| author | Mark Otto <[email protected]> | 2014-12-11 14:12:10 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-12-11 14:12:10 -0800 |
| commit | 3737cb1d46418203bae2b01de1cacefe91df741c (patch) | |
| tree | 531687158ae982205a51ad34d867aa7f105e1721 /docs/components/typography.md | |
| parent | 8ba213c9aa0ee78185588758f021a38b0367cbee (diff) | |
| download | bootstrap-3737cb1d46418203bae2b01de1cacefe91df741c.tar.xz bootstrap-3737cb1d46418203bae2b01de1cacefe91df741c.zip | |
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
Diffstat (limited to 'docs/components/typography.md')
| -rw-r--r-- | docs/components/typography.md | 23 |
1 files changed, 13 insertions, 10 deletions
diff --git a/docs/components/typography.md b/docs/components/typography.md index 2b1b8166c..4ef521a43 100644 --- a/docs/components/typography.md +++ b/docs/components/typography.md @@ -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 %} |