0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +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 { dt {
font-weight: bold; font-weight: bold;
line-height: 17px;
} }
dd { dd {
margin-left: 9px; margin-left: 9px;
} }
.dl-horizontal dt {
float: left;
clear: left;
width: 120px;
text-align: right;
}
.dl-horizontal dd {
margin-left: 130px;
}
hr { hr {
margin: 18px 0; margin: 18px 0;
border: 0; border: 0;

View File

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

View File

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

View File

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