Newfangled input and button group sizing (fixes #9295)
Instead of applying `.btn-` or `.input-` to individual elements in button and input groups, we now have new sizing classes to keep your markup a little leaner. * Add `.input-group-sm` or `.input-group-lg` to your `.input-group` to replicate `.input-sm` and `.input-lg`, respectively. * Add `.btn-group-xs`, `.btn-group-sm`, or `.btn-group-lg` to your `.btn-group` to replicate `.btn-xs`, `.btn-sm`, and `. btn-lg`, respectively. Both sets of new sizing classes simply use the existing individual sizing classes as mixins, so customization of them is automatically inherited when compiling.
This commit is contained in:
Mark Otto
parent
abedd38c5b
commit
a78c8d9c04
|
|
@ -12,6 +12,8 @@
|
|||
<ul class="nav">
|
||||
<li><a href="#btn-groups-single">Basic button group</a></li>
|
||||
<li><a href="#btn-groups-toolbar">Button toolbar</a></li>
|
||||
<li><a href="#btn-groups-sizing">Button group sizing</a></li>
|
||||
<li><a href="#btn-groups-nested">Nested button groups</a></li>
|
||||
<li><a href="#btn-groups-vertical">Vertical variation</a></li>
|
||||
<li><a href="#btn-groups-justified">Justified link buttons</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -152,6 +152,39 @@ base_url: "../"
|
|||
<div class="btn-group">...</div>
|
||||
<div class="btn-group">...</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="btn-groups-sizing">Button group sizing</h3>
|
||||
<p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to the <code>.btn-group</code>.</p>
|
||||
<div class="bs-example">
|
||||
<div class="btn-group btn-group-lg">
|
||||
<button type="button" class="btn btn-default">Left</button>
|
||||
<button type="button" class="btn btn-default">Middle</button>
|
||||
<button type="button" class="btn btn-default">Right</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default">Left</button>
|
||||
<button type="button" class="btn btn-default">Middle</button>
|
||||
<button type="button" class="btn btn-default">Right</button>
|
||||
</div>
|
||||
<div class="btn-group btn-group-sm">
|
||||
<button type="button" class="btn btn-default">Left</button>
|
||||
<button type="button" class="btn btn-default">Middle</button>
|
||||
<button type="button" class="btn btn-default">Right</button>
|
||||
</div>
|
||||
<div class="btn-group btn-group-xs">
|
||||
<button type="button" class="btn btn-default">Left</button>
|
||||
<button type="button" class="btn btn-default">Middle</button>
|
||||
<button type="button" class="btn btn-default">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group btn-group-lg">...</div>
|
||||
<div class="btn-group">...</div>
|
||||
<div class="btn-group btn-group-sm">...</div>
|
||||
<div class="btn-group btn-group-xs">...</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="btn-groups-nested">Nested button groups</h3>
|
||||
|
|
@ -568,11 +601,11 @@ base_url: "../"
|
|||
{% endhighlight %}
|
||||
|
||||
<h2 id="input-groups-sizes">Optional sizes</h2>
|
||||
<p>Add the relative form sizing classes to the <code>.input-group-addon</code>.</p>
|
||||
<p>Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p>
|
||||
<form class="bs-example bs-example-form" role="form">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon input-lg">@</span>
|
||||
<input type="text" class="form-control input-lg" placeholder="Username">
|
||||
<div class="input-group input-group-lg">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-group">
|
||||
|
|
@ -580,14 +613,14 @@ base_url: "../"
|
|||
<input type="text" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon input-sm">@</span>
|
||||
<input type="text" class="form-control input-sm" placeholder="Username">
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
</form>
|
||||
{% highlight html %}
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon input-lg">@</span>
|
||||
<div class="input-group input-group-lg">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" class="form-control input-lg" placeholder="Username">
|
||||
</div>
|
||||
|
||||
|
|
@ -596,9 +629,9 @@ base_url: "../"
|
|||
<input type="text" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon input-sm">@</span>
|
||||
<input type="text" class="form-control input-sm" placeholder="Username">
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
|
|
|
|||
|
|
@ -2262,6 +2262,24 @@ input[type="button"].btn-block {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.input-group-lg > .form-control,
|
||||
.input-group-lg > .input-group-addon {
|
||||
height: 45px;
|
||||
padding: 10px 16px;
|
||||
font-size: 18px;
|
||||
line-height: 1.33;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.input-group-sm > .form-control,
|
||||
.input-group-sm > .input-group-addon {
|
||||
height: 30px;
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.input-group-addon,
|
||||
.input-group-btn,
|
||||
.input-group .form-control {
|
||||
|
|
@ -3487,6 +3505,28 @@ button.close {
|
|||
outline: 0;
|
||||
}
|
||||
|
||||
.btn-group-xs > .btn {
|
||||
padding: 5px 10px;
|
||||
padding: 3px 5px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.btn-group-sm > .btn {
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.btn-group-lg > .btn {
|
||||
padding: 10px 16px;
|
||||
font-size: 18px;
|
||||
line-height: 1.33;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.btn-group > .btn + .dropdown-toggle {
|
||||
padding-right: 8px;
|
||||
padding-left: 8px;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -117,6 +117,14 @@
|
|||
}
|
||||
|
||||
|
||||
// Sizing
|
||||
//
|
||||
// Remix the default button sizing classes into new ones for easier manipulation.
|
||||
|
||||
.btn-group-xs > .btn { .btn-xs(); }
|
||||
.btn-group-sm > .btn { .btn-sm(); }
|
||||
.btn-group-lg > .btn { .btn-lg(); }
|
||||
|
||||
|
||||
// Split button dropdowns
|
||||
// ----------------------
|
||||
|
|
|
|||
|
|
@ -22,6 +22,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Sizing options
|
||||
//
|
||||
// Remix the default form control sizing classes into new ones for easier
|
||||
// manipulation.
|
||||
|
||||
.input-group-lg > .form-control,
|
||||
.input-group-lg > .input-group-addon { .input-lg(); }
|
||||
.input-group-sm > .form-control,
|
||||
.input-group-sm > .input-group-addon { .input-sm(); }
|
||||
|
||||
|
||||
// Display as table-cell
|
||||
// -------------------------
|
||||
.input-group-addon,
|
||||
|
|
|
|||
Loading…
Reference in New Issue