Add justified button groups for link buttons; reorganize dropdowns and button groups docs sections
This commit is contained in:
Mark Otto
parent
5c1cc722e7
commit
c09b994eea
|
|
@ -3515,6 +3515,17 @@ button.close {
|
|||
border-radius: 0 0 6px 6px;
|
||||
}
|
||||
|
||||
.btn-group-justified {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-group-justified .btn {
|
||||
display: table-cell;
|
||||
float: none;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
padding: 8px 15px;
|
||||
margin: 0 0 20px;
|
||||
|
|
|
|||
|
|
@ -109,9 +109,10 @@
|
|||
<div class="page-header">
|
||||
<h1>Dropdown menus</h1>
|
||||
</div>
|
||||
<p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="./javascript.html#dropdowns">dropdown JavaScript plugin</a>.</p>
|
||||
|
||||
<h2>Example</h2>
|
||||
<p>Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="./javascript.html#dropdowns">dropdown JavaScript plugin</a>.</p>
|
||||
<h3>Example</h3>
|
||||
<p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="dropdown clearfix">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
|
||||
|
|
@ -124,22 +125,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
|
||||
<li><a tabindex="-1" href="#">Action</a></li>
|
||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a tabindex="-1" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h2>Markup</h2>
|
||||
<p>Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then just create the menu.</p>
|
||||
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="dropdown">
|
||||
<!-- Link or button to toggle dropdown -->
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
|
||||
<li><a tabindex="-1" href="#">Action</a></li>
|
||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
|
|
@ -149,9 +137,6 @@
|
|||
</div>
|
||||
</pre>
|
||||
|
||||
<h2>Options</h2>
|
||||
<p>Align menus to the right and add include additional levels of dropdowns.</p>
|
||||
|
||||
<h3>Aligning the menus</h3>
|
||||
<p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
|
|
@ -190,8 +175,7 @@
|
|||
<h1>Button groups</h1>
|
||||
</div>
|
||||
|
||||
<h2>Examples</h2>
|
||||
<p>Two basic options, along with two more specific variations.</p>
|
||||
<p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="./javascript.html#buttons">our buttons plugin</a>.</p>
|
||||
|
||||
<h3>Single button group</h3>
|
||||
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
|
||||
|
|
@ -254,15 +238,21 @@
|
|||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>Justified button groups</h3>
|
||||
<p>Make a group of buttons stretch at the same size to span the entire width of its parent. <strong>This only works with <code><a></code> elements</strong> as the <code><button></code> doesn't pick up these styles.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="btn-group btn-group-justified">
|
||||
<a href="#" class="btn">Left</a>
|
||||
<a href="#" class="btn">Right</a>
|
||||
<a href="#" class="btn">Middle</a>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="btn-group btn-group-justified">
|
||||
...
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
<h4>Dropdowns in button groups</h4>
|
||||
<p>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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -41,9 +41,10 @@
|
|||
<div class="page-header">
|
||||
<h1>Dropdown menus</h1>
|
||||
</div>
|
||||
<p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="./javascript.html#dropdowns">dropdown JavaScript plugin</a>.</p>
|
||||
|
||||
<h2>Example</h2>
|
||||
<p>Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="./javascript.html#dropdowns">dropdown JavaScript plugin</a>.</p>
|
||||
<h3>Example</h3>
|
||||
<p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="dropdown clearfix">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
|
||||
|
|
@ -56,22 +57,9 @@
|
|||
</div>
|
||||
</div>{{! /example }}
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
|
||||
<li><a tabindex="-1" href="#">Action</a></li>
|
||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a tabindex="-1" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h2>Markup</h2>
|
||||
<p>Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then just create the menu.</p>
|
||||
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="dropdown">
|
||||
<!-- Link or button to toggle dropdown -->
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
|
||||
<li><a tabindex="-1" href="#">Action</a></li>
|
||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
|
|
@ -81,9 +69,6 @@
|
|||
</div>
|
||||
</pre>
|
||||
|
||||
<h2>Options</h2>
|
||||
<p>Align menus to the right and add include additional levels of dropdowns.</p>
|
||||
|
||||
<h3>Aligning the menus</h3>
|
||||
<p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
|
|
@ -122,8 +107,7 @@
|
|||
<h1>Button groups</h1>
|
||||
</div>
|
||||
|
||||
<h2>Examples</h2>
|
||||
<p>Two basic options, along with two more specific variations.</p>
|
||||
<p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="./javascript.html#buttons">our buttons plugin</a>.</p>
|
||||
|
||||
<h3>Single button group</h3>
|
||||
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
|
||||
|
|
@ -186,15 +170,21 @@
|
|||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>Justified button groups</h3>
|
||||
<p>Make a group of buttons stretch at the same size to span the entire width of its parent. <strong>This only works with <code><a></code> elements</strong> as the <code><button></code> doesn't pick up these styles.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="btn-group btn-group-justified">
|
||||
<a href="#" class="btn">Left</a>
|
||||
<a href="#" class="btn">Right</a>
|
||||
<a href="#" class="btn">Middle</a>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="btn-group btn-group-justified">
|
||||
...
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
<h4>Dropdowns in button groups</h4>
|
||||
<p>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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -142,3 +142,17 @@
|
|||
.btn-group-vertical .btn-large:last-child {
|
||||
border-radius: 0 0 @border-radius-large @border-radius-large;
|
||||
}
|
||||
|
||||
|
||||
// Justified button groups
|
||||
// ----------------------
|
||||
|
||||
.btn-group-justified {
|
||||
display: table;
|
||||
width: 100%;
|
||||
.btn {
|
||||
float: none;
|
||||
display: table-cell;
|
||||
width: 1%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue