mirror/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-24 03:40:10 +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

25
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>
@ -1299,7 +1314,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<td><code>.btn-danger</code></td>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
<tr>
<tr>
<td><button class="btn btn-inverse" href="#">Inverse</button></td>
<td><code>.btn-inverse</code></td>
<td>Alternate dark gray button, not tied to a semantic action or use</td>

32
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>
@ -1223,7 +1243,7 @@
<td><code>.btn-danger</code></td>
<td>{{_i}}Indicates a dangerous or potentially negative action{{/i}}</td>
</tr>
<tr>
<tr>
<td><button class="btn btn-inverse" href="#">{{_i}}Inverse{{/i}}</button></td>
<td><code>.btn-inverse</code></td>
<td>{{_i}}Alternate dark gray button, not tied to a semantic action or use{{/i}}</td>

25
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
// ----
@ -198,7 +221,7 @@ blockquote {
// Quotes
q:before,
q:after,
blockquote:before,
blockquote:before,
blockquote:after {
content: "";
}