Skip to content

B
bootstrap
Commit c09b994e authored by Mark Otto's avatar Mark Otto
Browse files
Options

Add justified button groups for link buttons; reorganize dropdowns and button groups docs sections

parent 5c1cc722
Hide whitespace changes
Inline Side-by-side
Showing with 63 additions and 58 deletions
docs/assets/css/bootstrap.css
View file @ c09b994e
...@@ -3515,6 +3515,17 @@ button.close { ...@@ -3515,6 +3515,17 @@ button.close {
border-radius: 0 0 6px 6px; 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 { .breadcrumb {
padding: 8px 15px; padding: 8px 15px;
margin: 0 0 20px; margin: 0 0 20px;
......
docs/components.html
View file @ c09b994e
...@@ -109,9 +109,10 @@ ...@@ -109,9 +109,10 @@
<div class="page-header"> <div class="page-header">
<h1>Dropdown menus</h1> <h1>Dropdown menus</h1>
</div> </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> <h3>Example</h3>
<p>Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="./javascript.html#dropdowns">dropdown JavaScript plugin</a>.</p> <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="bs-docs-example">
<div class="dropdown clearfix"> <div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
...@@ -124,22 +125,9 @@ ...@@ -124,22 +125,9 @@
</div> </div>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
&lt;li class="divider"&gt;&lt;/li&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</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">
&lt;div class="dropdown"&gt; &lt;div class="dropdown"&gt;
&lt;!-- Link or button to toggle dropdown --&gt; &lt;!-- Link or button to toggle dropdown --&gt;
&lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt; &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
...@@ -149,9 +137,6 @@ ...@@ -149,9 +137,6 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<h2>Options</h2>
<p>Align menus to the right and add include additional levels of dropdowns.</p>
<h3>Aligning the menus</h3> <h3>Aligning the menus</h3>
<p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p> <p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
...@@ -190,8 +175,7 @@ ...@@ -190,8 +175,7 @@
<h1>Button groups</h1> <h1>Button groups</h1>
</div> </div>
<h2>Examples</h2> <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>
<p>Two basic options, along with two more specific variations.</p>
<h3>Single button group</h3> <h3>Single button group</h3>
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p> <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
...@@ -254,15 +238,21 @@ ...@@ -254,15 +238,21 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </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>&lt;a&gt;</code> elements</strong> as the <code>&lt;button&gt;</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">
&lt;div class="btn-group btn-group-justified"&gt;
...
&lt;/div&gt;
</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> </section>
......
docs/templates/pages/components.mustache
View file @ c09b994e
...@@ -41,9 +41,10 @@ ...@@ -41,9 +41,10 @@
<div class="page-header"> <div class="page-header">
<h1>Dropdown menus</h1> <h1>Dropdown menus</h1>
</div> </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> <h3>Example</h3>
<p>Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="./javascript.html#dropdowns">dropdown JavaScript plugin</a>.</p> <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="bs-docs-example">
<div class="dropdown clearfix"> <div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
...@@ -56,22 +57,9 @@ ...@@ -56,22 +57,9 @@
</div> </div>
</div>{{! /example }} </div>{{! /example }}
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
&lt;li class="divider"&gt;&lt;/li&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</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">
&lt;div class="dropdown"&gt; &lt;div class="dropdown"&gt;
&lt;!-- Link or button to toggle dropdown --&gt; &lt;!-- Link or button to toggle dropdown --&gt;
&lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt; &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
...@@ -81,9 +69,6 @@ ...@@ -81,9 +69,6 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<h2>Options</h2>
<p>Align menus to the right and add include additional levels of dropdowns.</p>
<h3>Aligning the menus</h3> <h3>Aligning the menus</h3>
<p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p> <p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
...@@ -122,8 +107,7 @@ ...@@ -122,8 +107,7 @@
<h1>Button groups</h1> <h1>Button groups</h1>
</div> </div>
<h2>Examples</h2> <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>
<p>Two basic options, along with two more specific variations.</p>
<h3>Single button group</h3> <h3>Single button group</h3>
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p> <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
...@@ -186,15 +170,21 @@ ...@@ -186,15 +170,21 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </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>&lt;a&gt;</code> elements</strong> as the <code>&lt;button&gt;</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">
&lt;div class="btn-group btn-group-justified"&gt;
...
&lt;/div&gt;
</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> </section>
......
less/button-groups.less
View file @ c09b994e
...@@ -142,3 +142,17 @@ ...@@ -142,3 +142,17 @@
.btn-group-vertical .btn-large:last-child { .btn-group-vertical .btn-large:last-child {
border-radius: 0 0 @border-radius-large @border-radius-large; 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%;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment