updating docs examples to remove 13/18 resets, fix up buttons alignments and carets
This commit is contained in:
Mark Otto
parent
410decafad
commit
9887d3cf4a
|
|
@ -2498,8 +2498,8 @@ table .span24 {
|
|||
.caret {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
vertical-align: top;
|
||||
height: 3px;
|
||||
vertical-align: middle;
|
||||
border-top: 4px solid #000000;
|
||||
border-right: 4px solid transparent;
|
||||
border-left: 4px solid transparent;
|
||||
|
|
@ -2509,7 +2509,6 @@ table .span24 {
|
|||
}
|
||||
|
||||
.dropdown .caret {
|
||||
margin-top: 8px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -2617,6 +2616,8 @@ table .span24 {
|
|||
|
||||
.dropup .caret,
|
||||
.navbar-fixed-bottom .dropdown .caret {
|
||||
height: 0;
|
||||
margin-top: -2px;
|
||||
border-top: 0;
|
||||
border-bottom: 4px solid #000000;
|
||||
content: "\2191";
|
||||
|
|
@ -3187,28 +3188,28 @@ input[type="submit"].btn.btn-mini {
|
|||
}
|
||||
|
||||
.btn-group > .dropdown-toggle {
|
||||
*padding-top: 4px;
|
||||
padding-right: 8px;
|
||||
*padding-bottom: 4px;
|
||||
padding-left: 8px;
|
||||
*padding-top: 8px;
|
||||
padding-right: 10px;
|
||||
*padding-bottom: 8px;
|
||||
padding-left: 10px;
|
||||
-webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.btn-group > .btn-mini.dropdown-toggle {
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
padding-right: 8px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.btn-group > .btn-small.dropdown-toggle {
|
||||
*padding-top: 4px;
|
||||
*padding-bottom: 4px;
|
||||
*padding-top: 6px;
|
||||
*padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.btn-group > .btn-large.dropdown-toggle {
|
||||
padding-right: 12px;
|
||||
padding-left: 12px;
|
||||
padding-right: 14px;
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
.btn-group.open .dropdown-toggle {
|
||||
|
|
@ -3247,7 +3248,6 @@ input[type="submit"].btn.btn-mini {
|
|||
}
|
||||
|
||||
.btn .caret {
|
||||
margin-top: 7px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
|
@ -3257,16 +3257,7 @@ input[type="submit"].btn.btn-mini {
|
|||
filter: alpha(opacity=100);
|
||||
}
|
||||
|
||||
.btn-mini .caret {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.btn-small .caret {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.btn-large .caret {
|
||||
margin-top: 6px;
|
||||
border-top-width: 5px;
|
||||
border-right-width: 5px;
|
||||
border-left-width: 5px;
|
||||
|
|
|
|||
|
|
@ -544,14 +544,6 @@ h2 + .row {
|
|||
|
||||
/* Tweak examples
|
||||
------------------------- */
|
||||
.bs-docs-example,
|
||||
.bs-docs-example > p {
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.bs-docs-example > p {
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
.bs-docs-example > p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -214,27 +214,13 @@
|
|||
================================================== -->
|
||||
<section id="buttonGroups">
|
||||
<div class="page-header">
|
||||
<h1>Button groups <small>Join buttons for more toolbar-like functionality</small></h1>
|
||||
<h1>Button groups</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Description and best practices</h2>
|
||||
<p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements. We recommend the following guidelines for using button groups and toolbars:</p>
|
||||
<ul>
|
||||
<li>Always use the same element in a single button group, <code><a></code> or <code><button></code>.</li>
|
||||
<li>Don't mix buttons of different colors in the same button group.</li>
|
||||
<li>Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.</li>
|
||||
</ul>
|
||||
<p><span class="label label-info">Related</span> Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.</p>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>Examples and variations</h2>
|
||||
<h2>Examples</h2>
|
||||
<p>Two basic options, along with two more specific variations.</p>
|
||||
|
||||
<h3>Basic button group</h3>
|
||||
<h3>Single button group</h3>
|
||||
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="btn-group" style="margin: 9px 0 5px;">
|
||||
|
|
@ -251,7 +237,7 @@
|
|||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>Toolbar example</h3>
|
||||
<h3>Multiple button groups</h3>
|
||||
<p>Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="btn-toolbar" style="margin: 0;">
|
||||
|
|
@ -279,11 +265,7 @@
|
|||
</div>
|
||||
</pre>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>Vertical button groups</h2>
|
||||
<h3>Vertical button groups</h3>
|
||||
<p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="btn-group btn-group-vertical">
|
||||
|
|
@ -303,10 +285,10 @@
|
|||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h3>Checkbox and radio flavors</h3>
|
||||
<h4>Checkbox and radio flavors</h4>
|
||||
<p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the Javascript docs</a> for that.</p>
|
||||
|
||||
<h3>Dropdowns in button groups</h3>
|
||||
<h4>Dropdowns in button groups</h4>
|
||||
<p><span class="label label-info">Heads up!</span> Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -144,27 +144,13 @@
|
|||
================================================== -->
|
||||
<section id="buttonGroups">
|
||||
<div class="page-header">
|
||||
<h1>{{_i}}Button groups{{/i}} <small>{{_i}}Join buttons for more toolbar-like functionality{{/i}}</small></h1>
|
||||
<h1>{{_i}}Button groups{{/i}}</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>{{_i}}Description and best practices{{/i}}</h2>
|
||||
<p>{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements. We recommend the following guidelines for using button groups and toolbars:{{/i}}</p>
|
||||
<ul>
|
||||
<li>{{_i}}Always use the same element in a single button group, <code><a></code> or <code><button></code>.{{/i}}</li>
|
||||
<li>{{_i}}Don't mix buttons of different colors in the same button group.{{/i}}</li>
|
||||
<li>{{_i}}Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.{{/i}}</li>
|
||||
</ul>
|
||||
<p>{{_i}}<span class="label label-info">Related</span> Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.{{/i}}</p>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>{{_i}}Examples and variations{{/i}}</h2>
|
||||
<h2>{{_i}}Examples{{/i}}</h2>
|
||||
<p>{{_i}}Two basic options, along with two more specific variations.{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}Basic button group{{/i}}</h3>
|
||||
<h3>{{_i}}Single button group{{/i}}</h3>
|
||||
<p>{{_i}}Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="btn-group" style="margin: 9px 0 5px;">
|
||||
|
|
@ -181,7 +167,7 @@
|
|||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Toolbar example{{/i}}</h3>
|
||||
<h3>{{_i}}Multiple button groups{{/i}}</h3>
|
||||
<p>{{_i}}Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="btn-toolbar" style="margin: 0;">
|
||||
|
|
@ -209,11 +195,7 @@
|
|||
</div>
|
||||
</pre>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>{{_i}}Vertical button groups{{/i}}</h2>
|
||||
<h3>{{_i}}Vertical button groups{{/i}}</h3>
|
||||
<p>{{_i}}Make a set of buttons appear vertically stacked rather than horizontally.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="btn-group btn-group-vertical">
|
||||
|
|
@ -233,10 +215,10 @@
|
|||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h3>{{_i}}Checkbox and radio flavors{{/i}}</h3>
|
||||
<h4>{{_i}}Checkbox and radio flavors{{/i}}</h4>
|
||||
<p>{{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the Javascript docs</a> for that.{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}Dropdowns in button groups{{/i}}</h3>
|
||||
<h4>{{_i}}Dropdowns in button groups{{/i}}</h4>
|
||||
<p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.{{/i}}</p>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -107,23 +107,23 @@
|
|||
|
||||
// Give the line between buttons some depth
|
||||
.btn-group > .dropdown-toggle {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
.box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
|
||||
*padding-top: 4px;
|
||||
*padding-bottom: 4px;
|
||||
*padding-top: 8px;
|
||||
*padding-bottom: 8px;
|
||||
}
|
||||
.btn-group > .btn-mini.dropdown-toggle {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.btn-group > .btn-small.dropdown-toggle {
|
||||
*padding-top: 4px;
|
||||
*padding-bottom: 4px;
|
||||
*padding-top: 6px;
|
||||
*padding-bottom: 6px;
|
||||
}
|
||||
.btn-group > .btn-large.dropdown-toggle {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
}
|
||||
|
||||
.btn-group.open {
|
||||
|
|
@ -162,7 +162,6 @@
|
|||
|
||||
// Reposition the caret
|
||||
.btn .caret {
|
||||
margin-top: 7px;
|
||||
margin-left: 0;
|
||||
}
|
||||
.btn:hover .caret,
|
||||
|
|
@ -171,13 +170,10 @@
|
|||
}
|
||||
// Carets in other button sizes
|
||||
.btn-mini .caret {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.btn-small .caret {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.btn-large .caret {
|
||||
margin-top: 6px;
|
||||
border-left-width: 5px;
|
||||
border-right-width: 5px;
|
||||
border-top-width: 5px;
|
||||
|
|
|
|||
|
|
@ -22,8 +22,8 @@
|
|||
.caret {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
vertical-align: top;
|
||||
height: 3px;
|
||||
vertical-align: middle;
|
||||
border-top: 4px solid @black;
|
||||
border-right: 4px solid transparent;
|
||||
border-left: 4px solid transparent;
|
||||
|
|
@ -33,7 +33,6 @@
|
|||
|
||||
// Place the caret
|
||||
.dropdown .caret {
|
||||
margin-top: 8px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.dropdown a:focus .caret,
|
||||
|
|
@ -153,6 +152,8 @@
|
|||
.navbar-fixed-bottom .dropdown {
|
||||
// Reverse the caret
|
||||
.caret {
|
||||
margin-top: -2px;
|
||||
height: 0;
|
||||
border-top: 0;
|
||||
border-bottom: 4px solid @black;
|
||||
content: "\2191";
|
||||
|
|
|
|||
Loading…
Reference in New Issue