mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-23 09:41:11 +00:00
Adding a 'horizontal' option to description lists, similar to .form-horizontal
This commit is contained in:
Dominic Barnes
parent
43760eb202
commit
0a8efd5320
Binary file not shown.
148
docs/assets/css/bootstrap-responsive.css
vendored
148
docs/assets/css/bootstrap-responsive.css
vendored
@ -10,7 +10,8 @@
|
||||
.clearfix {
|
||||
*zoom: 1;
|
||||
}
|
||||
.clearfix:before, .clearfix:after {
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
@ -99,10 +100,12 @@
|
||||
/* CSS3 spec*/
|
||||
|
||||
}
|
||||
.input-prepend input[class*="span"], .input-append input[class*="span"] {
|
||||
.input-prepend input[class*="span"],
|
||||
.input-append input[class*="span"] {
|
||||
width: auto;
|
||||
}
|
||||
input[type="checkbox"], input[type="radio"] {
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
.form-horizontal .control-group > label {
|
||||
@ -151,7 +154,8 @@
|
||||
.row {
|
||||
margin-left: 0;
|
||||
}
|
||||
.row > [class*="span"], .row-fluid > [class*="span"] {
|
||||
.row > [class*="span"],
|
||||
.row-fluid > [class*="span"] {
|
||||
float: none;
|
||||
display: block;
|
||||
width: auto;
|
||||
@ -163,7 +167,8 @@
|
||||
margin-left: -20px;
|
||||
*zoom: 1;
|
||||
}
|
||||
.row:before, .row:after {
|
||||
.row:before,
|
||||
.row:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
@ -174,7 +179,9 @@
|
||||
float: left;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
|
||||
.container,
|
||||
.navbar-fixed-top .container,
|
||||
.navbar-fixed-bottom .container {
|
||||
width: 724px;
|
||||
}
|
||||
.span1 {
|
||||
@ -253,7 +260,8 @@
|
||||
width: 100%;
|
||||
*zoom: 1;
|
||||
}
|
||||
.row-fluid:before, .row-fluid:after {
|
||||
.row-fluid:before,
|
||||
.row-fluid:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
@ -303,43 +311,69 @@
|
||||
.row-fluid > .span12 {
|
||||
width: 99.999999993%;
|
||||
}
|
||||
input, textarea, .uneditable-input {
|
||||
input,
|
||||
textarea,
|
||||
.uneditable-input {
|
||||
margin-left: 0;
|
||||
}
|
||||
input > .span1, textarea > .span1, .uneditable-input > .span1 {
|
||||
input > .span1,
|
||||
textarea > .span1,
|
||||
.uneditable-input > .span1 {
|
||||
width: 32px;
|
||||
}
|
||||
input > .span2, textarea > .span2, .uneditable-input > .span2 {
|
||||
input > .span2,
|
||||
textarea > .span2,
|
||||
.uneditable-input > .span2 {
|
||||
width: 94px;
|
||||
}
|
||||
input > .span3, textarea > .span3, .uneditable-input > .span3 {
|
||||
input > .span3,
|
||||
textarea > .span3,
|
||||
.uneditable-input > .span3 {
|
||||
width: 156px;
|
||||
}
|
||||
input > .span4, textarea > .span4, .uneditable-input > .span4 {
|
||||
input > .span4,
|
||||
textarea > .span4,
|
||||
.uneditable-input > .span4 {
|
||||
width: 218px;
|
||||
}
|
||||
input > .span5, textarea > .span5, .uneditable-input > .span5 {
|
||||
input > .span5,
|
||||
textarea > .span5,
|
||||
.uneditable-input > .span5 {
|
||||
width: 280px;
|
||||
}
|
||||
input > .span6, textarea > .span6, .uneditable-input > .span6 {
|
||||
input > .span6,
|
||||
textarea > .span6,
|
||||
.uneditable-input > .span6 {
|
||||
width: 342px;
|
||||
}
|
||||
input > .span7, textarea > .span7, .uneditable-input > .span7 {
|
||||
input > .span7,
|
||||
textarea > .span7,
|
||||
.uneditable-input > .span7 {
|
||||
width: 404px;
|
||||
}
|
||||
input > .span8, textarea > .span8, .uneditable-input > .span8 {
|
||||
input > .span8,
|
||||
textarea > .span8,
|
||||
.uneditable-input > .span8 {
|
||||
width: 466px;
|
||||
}
|
||||
input > .span9, textarea > .span9, .uneditable-input > .span9 {
|
||||
input > .span9,
|
||||
textarea > .span9,
|
||||
.uneditable-input > .span9 {
|
||||
width: 528px;
|
||||
}
|
||||
input > .span10, textarea > .span10, .uneditable-input > .span10 {
|
||||
input > .span10,
|
||||
textarea > .span10,
|
||||
.uneditable-input > .span10 {
|
||||
width: 590px;
|
||||
}
|
||||
input > .span11, textarea > .span11, .uneditable-input > .span11 {
|
||||
input > .span11,
|
||||
textarea > .span11,
|
||||
.uneditable-input > .span11 {
|
||||
width: 652px;
|
||||
}
|
||||
input > .span12, textarea > .span12, .uneditable-input > .span12 {
|
||||
input > .span12,
|
||||
textarea > .span12,
|
||||
.uneditable-input > .span12 {
|
||||
width: 714px;
|
||||
}
|
||||
}
|
||||
@ -383,7 +417,8 @@
|
||||
color: #999999;
|
||||
text-shadow: none;
|
||||
}
|
||||
.navbar .nav > li > a, .navbar .dropdown-menu a {
|
||||
.navbar .nav > li > a,
|
||||
.navbar .dropdown-menu a {
|
||||
padding: 6px 15px;
|
||||
font-weight: bold;
|
||||
color: #999999;
|
||||
@ -394,7 +429,8 @@
|
||||
.navbar .dropdown-menu li + li a {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.navbar .nav > li > a:hover, .navbar .dropdown-menu a:hover {
|
||||
.navbar .nav > li > a:hover,
|
||||
.navbar .dropdown-menu a:hover {
|
||||
background-color: #222222;
|
||||
}
|
||||
.navbar .dropdown-menu {
|
||||
@ -415,13 +451,15 @@
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
|
||||
.navbar .dropdown-menu:before,
|
||||
.navbar .dropdown-menu:after {
|
||||
display: none;
|
||||
}
|
||||
.navbar .dropdown-menu .divider {
|
||||
display: none;
|
||||
}
|
||||
.navbar-form, .navbar-search {
|
||||
.navbar-form,
|
||||
.navbar-search {
|
||||
float: none;
|
||||
padding: 9px 15px;
|
||||
margin: 9px 0;
|
||||
@ -458,7 +496,8 @@
|
||||
margin-left: -30px;
|
||||
*zoom: 1;
|
||||
}
|
||||
.row:before, .row:after {
|
||||
.row:before,
|
||||
.row:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
@ -469,7 +508,9 @@
|
||||
float: left;
|
||||
margin-left: 30px;
|
||||
}
|
||||
.container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
|
||||
.container,
|
||||
.navbar-fixed-top .container,
|
||||
.navbar-fixed-bottom .container {
|
||||
width: 1170px;
|
||||
}
|
||||
.span1 {
|
||||
@ -548,7 +589,8 @@
|
||||
width: 100%;
|
||||
*zoom: 1;
|
||||
}
|
||||
.row-fluid:before, .row-fluid:after {
|
||||
.row-fluid:before,
|
||||
.row-fluid:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
@ -598,43 +640,69 @@
|
||||
.row-fluid > .span12 {
|
||||
width: 100%;
|
||||
}
|
||||
input, textarea, .uneditable-input {
|
||||
input,
|
||||
textarea,
|
||||
.uneditable-input {
|
||||
margin-left: 0;
|
||||
}
|
||||
input > .span1, textarea > .span1, .uneditable-input > .span1 {
|
||||
input > .span1,
|
||||
textarea > .span1,
|
||||
.uneditable-input > .span1 {
|
||||
width: 60px;
|
||||
}
|
||||
input > .span2, textarea > .span2, .uneditable-input > .span2 {
|
||||
input > .span2,
|
||||
textarea > .span2,
|
||||
.uneditable-input > .span2 {
|
||||
width: 160px;
|
||||
}
|
||||
input > .span3, textarea > .span3, .uneditable-input > .span3 {
|
||||
input > .span3,
|
||||
textarea > .span3,
|
||||
.uneditable-input > .span3 {
|
||||
width: 260px;
|
||||
}
|
||||
input > .span4, textarea > .span4, .uneditable-input > .span4 {
|
||||
input > .span4,
|
||||
textarea > .span4,
|
||||
.uneditable-input > .span4 {
|
||||
width: 360px;
|
||||
}
|
||||
input > .span5, textarea > .span5, .uneditable-input > .span5 {
|
||||
input > .span5,
|
||||
textarea > .span5,
|
||||
.uneditable-input > .span5 {
|
||||
width: 460px;
|
||||
}
|
||||
input > .span6, textarea > .span6, .uneditable-input > .span6 {
|
||||
input > .span6,
|
||||
textarea > .span6,
|
||||
.uneditable-input > .span6 {
|
||||
width: 560px;
|
||||
}
|
||||
input > .span7, textarea > .span7, .uneditable-input > .span7 {
|
||||
input > .span7,
|
||||
textarea > .span7,
|
||||
.uneditable-input > .span7 {
|
||||
width: 660px;
|
||||
}
|
||||
input > .span8, textarea > .span8, .uneditable-input > .span8 {
|
||||
input > .span8,
|
||||
textarea > .span8,
|
||||
.uneditable-input > .span8 {
|
||||
width: 760px;
|
||||
}
|
||||
input > .span9, textarea > .span9, .uneditable-input > .span9 {
|
||||
input > .span9,
|
||||
textarea > .span9,
|
||||
.uneditable-input > .span9 {
|
||||
width: 860px;
|
||||
}
|
||||
input > .span10, textarea > .span10, .uneditable-input > .span10 {
|
||||
input > .span10,
|
||||
textarea > .span10,
|
||||
.uneditable-input > .span10 {
|
||||
width: 960px;
|
||||
}
|
||||
input > .span11, textarea > .span11, .uneditable-input > .span11 {
|
||||
input > .span11,
|
||||
textarea > .span11,
|
||||
.uneditable-input > .span11 {
|
||||
width: 1060px;
|
||||
}
|
||||
input > .span12, textarea > .span12, .uneditable-input > .span12 {
|
||||
input > .span12,
|
||||
textarea > .span12,
|
||||
.uneditable-input > .span12 {
|
||||
width: 1160px;
|
||||
}
|
||||
.thumbnails {
|
||||
|
||||
545
docs/assets/css/bootstrap.css
vendored
545
docs/assets/css/bootstrap.css
vendored
File diff suppressed because it is too large
Load Diff
2
docs/assets/js/bootstrap-tooltip.js
vendored
2
docs/assets/js/bootstrap-tooltip.js
vendored
@ -206,7 +206,7 @@
|
||||
title = $e.attr('data-original-title')
|
||||
|| (typeof o.title == 'function' ? o.title.call($e[0]) : o.title)
|
||||
|
||||
title = title.toString().replace(/(^\s*|\s*$)/, "")
|
||||
title = (title || '').toString().replace(/(^\s*|\s*$)/, "")
|
||||
|
||||
return title
|
||||
}
|
||||
|
||||
@ -287,7 +287,7 @@
|
||||
<!-- Lists -->
|
||||
<h2>Lists</h2>
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<div class="span4">
|
||||
<h4>Unordered</h4>
|
||||
<p><code><ul></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><ul class="unstyled"></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><ol></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><dl></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><dl class="horizontal"></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, <code>section</code> 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>
|
||||
|
||||
25
docs/templates/pages/base-css.mustache
vendored
25
docs/templates/pages/base-css.mustache
vendored
@ -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><ul></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><ul class="unstyled"></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><ol></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><dl></code></p>
|
||||
<dl>
|
||||
@ -280,6 +282,19 @@
|
||||
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="span8">
|
||||
<h4>{{_i}}Horizontal{{/i}}</h4>
|
||||
<p><code><dl class="horizontal"></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><!-- /row -->
|
||||
</section>
|
||||
|
||||
@ -1223,7 +1238,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>
|
||||
|
||||
@ -130,6 +130,41 @@ 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-mini {
|
||||
dt { width: 50px; }
|
||||
dd { margin-left: 60px; }
|
||||
}
|
||||
&.horizontal-small {
|
||||
dt { width: 90px; }
|
||||
dd { margin-left: 100px; }
|
||||
}
|
||||
&.horizontal-normal {
|
||||
// no additional styles needed
|
||||
}
|
||||
&.horizontal-large {
|
||||
dt { width: 140px; }
|
||||
dd { margin-left: 150px; }
|
||||
}
|
||||
&.horizontal-xlarge {
|
||||
dt { width: 170px; }
|
||||
dd { margin-left: 180px; }
|
||||
}
|
||||
&.horizontal-xxlarge {
|
||||
dt { width: 190px; }
|
||||
dd { margin-left: 200px; }
|
||||
}
|
||||
}
|
||||
|
||||
// MISC
|
||||
// ----
|
||||
@ -198,7 +233,7 @@ blockquote {
|
||||
// Quotes
|
||||
q:before,
|
||||
q:after,
|
||||
blockquote:before,
|
||||
blockquote:before,
|
||||
blockquote:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user