mirror/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-24 12:40:58 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #2267 from dominicbarnes/dl_horizontal

Browse Source 
Horizontal mode for description lists
This commit is contained in:
Mark Otto 2012-03-05 00:38:26 -08:00
commit fb1d4a0f04
3 changed files with 70 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
docs/base-css.html
View File

@ -287,7 +287,7 @@
<!-- Lists -->
<h2>Lists</h2>
<div class="row">
<div class="span3">
<div class="span4">
<h4>Unordered</h4>
<p><code>&lt;ul&gt;</code></p>
<ul>
@ -308,7 +308,7 @@
<li>Eget porttitor lorem</li>
</ul>
</div>
<div class="span3">
<div class="span4">
<h4>Unstyled</h4>
<p><code>&lt;ul class="unstyled"&gt;</code></p>
<ul class="unstyled">
@ -329,7 +329,7 @@
<li>Eget porttitor lorem</li>
</ul>
</div>
<div class="span3">
<div class="span4">
<h4>Ordered</h4>
<p><code>&lt;ol&gt;</code></p>
<ol>
@ -343,7 +343,9 @@
<li>Eget porttitor lorem</li>
</ol>
</div>
<div class="span3">
</div><!-- /row -->
<div class="row">
<div class="span4">
<h4>Description</h4>
<p><code>&lt;dl&gt;</code></p>
<dl>
@ -356,6 +358,19 @@
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
</div>
<div class="span8">
<h4>Horizontal</h4>
<p><code>&lt;dl class="horizontal"&gt;</code></p>
<dl class="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>
</dl>
</div>
</div><!-- /row -->
</section>

30
docs/templates/pages/base-css.mustache vendored
View File

@ -211,7 +211,7 @@
<!-- Lists -->
<h2>{{_i}}Lists{{/i}}</h2>
<div class="row">
<div class="span3">
<div class="span4">
<h4>{{_i}}Unordered{{/i}}</h4>
<p><code>&lt;ul&gt;</code></p>
<ul>
@ -232,7 +232,7 @@
<li>Eget porttitor lorem</li>
</ul>
</div>
<div class="span3">
<div class="span4">
<h4>{{_i}}Unstyled{{/i}}</h4>
<p><code>&lt;ul class="unstyled"&gt;</code></p>
<ul class="unstyled">
@ -253,7 +253,7 @@
<li>Eget porttitor lorem</li>
</ul>
</div>
<div class="span3">
<div class="span4">
<h4>{{_i}}Ordered{{/i}}</h4>
<p><code>&lt;ol&gt;</code></p>
<ol>
@ -267,7 +267,9 @@
<li>Eget porttitor lorem</li>
</ol>
</div>
<div class="span3">
</div><!-- /row -->
<div class="row">
<div class="span4">
<h4>{{_i}}Description{{/i}}</h4>
<p><code>&lt;dl&gt;</code></p>
<dl>
@ -280,7 +282,25 @@
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
</div>
</div><!-- /row -->
<div class="span4">
<h4>{{_i}}Horizontal{{/i}}</h4>
<p><code>&lt;dl class="horizontal"&gt;</code></p>
<dl class="horizontal">
<dt>{{_i}}Description lists{{/i}}</dt>
<dd>{{_i}}A description list is perfect for defining terms.{{/i}}</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>
</dl>
</div>
<div class="span4">
<div class="well">
<p>{{_i}}Horizontal description lists have two additional sizes: <code>.horizontal-small</code> and <code>.horizontal-large</code>.{{/i}}</p>
</div>
</div>
</div>
</section>

23
less/type.less
View File

@ -130,6 +130,29 @@ dt {
dd {
margin-left: @baseLineHeight / 2;
}
// Horizontal layout (like forms)
dl.horizontal {
dt {
float: left;
clear: left;
width: 120px;
text-align: right;
}
dd {
margin-left: 130px;
}
&.horizontal-small {
dt { width: 50px; }
dd { margin-left: 60px; }
}
&.horizontal-normal {
// no additional styles needed
}
&.horizontal-large {
dt { width: 190px; }
dd { margin-left: 200px; }
}
}
// MISC
// ----