0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-28 10:24:19 +01:00

clean up horizontal dl option and docs

This commit is contained in:
Mark Otto 2012-03-05 00:42:37 -08:00
parent fb1d4a0f04
commit 7a8d6b1976
5 changed files with 30 additions and 33 deletions

Binary file not shown.

View File

@ -400,10 +400,20 @@ dt, dd {
}
dt {
font-weight: bold;
line-height: 17px;
}
dd {
margin-left: 9px;
}
.dl-horizontal dt {
float: left;
clear: left;
width: 120px;
text-align: right;
}
.dl-horizontal dd {
margin-left: 130px;
}
hr {
margin: 18px 0;
border: 0;

View File

@ -288,7 +288,7 @@
<h2>Lists</h2>
<div class="row">
<div class="span4">
<h4>Unordered</h4>
<h3>Unordered</h3>
<p><code>&lt;ul&gt;</code></p>
<ul>
<li>Lorem ipsum dolor sit amet</li>
@ -309,7 +309,7 @@
</ul>
</div>
<div class="span4">
<h4>Unstyled</h4>
<h3>Unstyled</h3>
<p><code>&lt;ul class="unstyled"&gt;</code></p>
<ul class="unstyled">
<li>Lorem ipsum dolor sit amet</li>
@ -330,7 +330,7 @@
</ul>
</div>
<div class="span4">
<h4>Ordered</h4>
<h3>Ordered</h3>
<p><code>&lt;ol&gt;</code></p>
<ol>
<li>Lorem ipsum dolor sit amet</li>
@ -344,9 +344,10 @@
</ol>
</div>
</div><!-- /row -->
<br>
<div class="row">
<div class="span4">
<h4>Description</h4>
<h3>Description</h3>
<p><code>&lt;dl&gt;</code></p>
<dl>
<dt>Description lists</dt>
@ -359,9 +360,9 @@
</dl>
</div>
<div class="span8">
<h4>Horizontal</h4>
<p><code>&lt;dl class="horizontal"&gt;</code></p>
<dl class="horizontal">
<h3>Horizontal description</h3>
<p><code>&lt;dl class="dl-horizontal"&gt;</code></p>
<dl class="dl-horizontal">
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>

View File

@ -212,7 +212,7 @@
<h2>{{_i}}Lists{{/i}}</h2>
<div class="row">
<div class="span4">
<h4>{{_i}}Unordered{{/i}}</h4>
<h3>{{_i}}Unordered{{/i}}</h3>
<p><code>&lt;ul&gt;</code></p>
<ul>
<li>Lorem ipsum dolor sit amet</li>
@ -233,7 +233,7 @@
</ul>
</div>
<div class="span4">
<h4>{{_i}}Unstyled{{/i}}</h4>
<h3>{{_i}}Unstyled{{/i}}</h3>
<p><code>&lt;ul class="unstyled"&gt;</code></p>
<ul class="unstyled">
<li>Lorem ipsum dolor sit amet</li>
@ -254,7 +254,7 @@
</ul>
</div>
<div class="span4">
<h4>{{_i}}Ordered{{/i}}</h4>
<h3>{{_i}}Ordered{{/i}}</h3>
<p><code>&lt;ol&gt;</code></p>
<ol>
<li>Lorem ipsum dolor sit amet</li>
@ -268,9 +268,10 @@
</ol>
</div>
</div><!-- /row -->
<br>
<div class="row">
<div class="span4">
<h4>{{_i}}Description{{/i}}</h4>
<h3>{{_i}}Description{{/i}}</h3>
<p><code>&lt;dl&gt;</code></p>
<dl>
<dt>{{_i}}Description lists{{/i}}</dt>
@ -282,10 +283,10 @@
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
</div>
<div class="span4">
<h4>{{_i}}Horizontal{{/i}}</h4>
<p><code>&lt;dl class="horizontal"&gt;</code></p>
<dl class="horizontal">
<div class="span8">
<h3>{{_i}}Horizontal description{{/i}}</h3>
<p><code>&lt;dl class="dl-horizontal"&gt;</code></p>
<dl class="dl-horizontal">
<dt>{{_i}}Description lists{{/i}}</dt>
<dd>{{_i}}A description list is perfect for defining terms.{{/i}}</dd>
<dt>Euismod</dt>
@ -295,12 +296,7 @@
<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>
</div><!-- /row -->
</section>

View File

@ -126,12 +126,13 @@ dd {
}
dt {
font-weight: bold;
line-height: @baseLineHeight - 1; // fix jank Helvetica Neue font bug
}
dd {
margin-left: @baseLineHeight / 2;
}
// Horizontal layout (like forms)
dl.horizontal {
.dl-horizontal {
dt {
float: left;
clear: left;
@ -141,17 +142,6 @@ dl.horizontal {
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