Skip to content

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

button groups and dropdowns to single column

parent 446f9199
Show whitespace changes
Inline Side-by-side
Showing with 642 additions and 676 deletions
docs/components.html
View file @ b8d8704f
......@@ -101,11 +101,11 @@
</li>
<li><a href="#labels">Labels</a></li>
<li><a href="#badges">Badges</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#typography">Type</a></li>
<li><a href="#thumbnails">Thumbnails</a></li>
<li><a href="#alerts">Alerts</a></li>
<li><a href="#progress">Progress bars</a></li>
<li><a href="#misc">Miscellaneous</a></li>
<li><a href="#misc">Misc</a></li>
</ul>
</div>
</header>
......@@ -118,8 +118,7 @@
<div class="page-header">
<h1>Button groups <small>Join buttons for more toolbar-like functionality</small></h1>
</div>
<div class="row">
<div class="span4">
<h3>Button groups</h3>
<p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements.</p>
<h3>Best practices</h3>
......@@ -130,8 +129,7 @@
<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>
</div>
<div class="span4">
<h3>Default example</h3>
<p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
<div class="">
......@@ -173,15 +171,11 @@
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
<div class="span4">
<h3>Checkbox and radio flavors</h3>
<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>
<p><a class="btn js-btn" href="./javascript.html#buttons">Get the javascript &raquo;</a></p>
<h3>Dropdowns in button groups</h3>
<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>
</div>
</div>
</section>
......@@ -194,8 +188,7 @@
</div>
<h2>Button dropdowns</h2>
<div class="row">
<div class="span4">
<h3>Overview and examples</h3>
<p>Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>
<div class="btn-toolbar" style="margin-top: 18px;">
......@@ -272,8 +265,7 @@
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
</div>
<div class="span8">
<h3>Example markup</h3>
<p>Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.</p>
<pre class="prettyprint linenums">
......@@ -287,10 +279,7 @@
&lt;/ul&gt;
&lt;/div&gt;
</pre>
</div>
</div>
<div class="row">
<div class="span4">
<h3>Works with all button sizes</h3>
<p>Button dropdowns work at any size. your button sizes to <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.</p>
<div class="btn-toolbar" style="margin-top: 18px;">
......@@ -325,18 +314,15 @@
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
</div><!--/span-->
<div class="span4">
<h3>Requires javascript</h3>
<p>Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.</p>
<p>In some cases&mdash;like mobile&mdash;dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.</p>
</div><!--/span-->
</div><!--/row-->
<br>
<h2>Split button dropdowns</h2>
<div class="row">
<div class="span4">
<h3>Overview and examples</h3>
<p>Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.</p>
<div class="btn-toolbar" style="margin-top: 18px;">
......@@ -471,8 +457,7 @@
&lt;/ul&gt;
&lt;/div&gt;
</pre>
</div>
<div class="span8">
<h3>Example markup</h3>
<p>We expand on the normal button dropdowns to provide a second button action that operates as a separate dropdown trigger.</p>
<pre class="prettyprint linenums">
......@@ -524,8 +509,6 @@
&lt;/div&gt;
</pre>
</div>
</div>
</section>
......
docs/templates/pages/components.mustache
View file @ b8d8704f
......@@ -23,11 +23,11 @@
</li>
<li><a href="#labels">{{_i}}Labels{{/i}}</a></li>
<li><a href="#badges">{{_i}}Badges{{/i}}</a></li>
<li><a href="#typography">{{_i}}Typography{{/i}}</a></li>
<li><a href="#typography">{{_i}}Type{{/i}}</a></li>
<li><a href="#thumbnails">{{_i}}Thumbnails{{/i}}</a></li>
<li><a href="#alerts">{{_i}}Alerts{{/i}}</a></li>
<li><a href="#progress">{{_i}}Progress bars{{/i}}</a></li>
<li><a href="#misc">{{_i}}Miscellaneous{{/i}}</a></li>
<li><a href="#misc">{{_i}}Misc{{/i}}</a></li>
</ul>
</div>
</header>
......@@ -40,8 +40,7 @@
<div class="page-header">
<h1>{{_i}}Button groups{{/i}} <small>{{_i}}Join buttons for more toolbar-like functionality{{/i}}</small></h1>
</div>
<div class="row">
<div class="span4">
<h3>{{_i}}Button groups{{/i}}</h3>
<p>{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements.{{/i}}</p>
<h3>{{_i}}Best practices{{/i}}</h3>
......@@ -52,8 +51,7 @@
<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>
</div>
<div class="span4">
<h3>{{_i}}Default example{{/i}}</h3>
<p>{{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}</p>
<div class="">
......@@ -95,15 +93,11 @@
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
<div class="span4">
<h3>{{_i}}Checkbox and radio flavors{{/i}}</h3>
<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>
<p><a class="btn js-btn" href="./javascript.html#buttons">{{_i}}Get the javascript &raquo;{{/i}}</a></p>
<h3>{{_i}}Dropdowns in button groups{{/i}}</h3>
<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>
</div>
</div>
</section>
......@@ -116,8 +110,7 @@
</div>
<h2>{{_i}}Button dropdowns{{/i}}</h2>
<div class="row">
<div class="span4">
<h3>{{_i}}Overview and examples{{/i}}</h3>
<p>{{_i}}Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.{{/i}}</p>
<div class="btn-toolbar" style="margin-top: 18px;">
......@@ -194,8 +187,7 @@
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
</div>
<div class="span8">
<h3>{{_i}}Example markup{{/i}}</h3>
<p>{{_i}}Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.{{/i}}</p>
<pre class="prettyprint linenums">
......@@ -209,10 +201,7 @@
&lt;/ul&gt;
&lt;/div&gt;
</pre>
</div>
</div>
<div class="row">
<div class="span4">
<h3>{{_i}}Works with all button sizes{{/i}}</h3>
<p>{{_i}}Button dropdowns work at any size. your button sizes to <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.{{/i}}</p>
<div class="btn-toolbar" style="margin-top: 18px;">
......@@ -247,18 +236,15 @@
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
</div><!--/span-->
<div class="span4">
<h3>{{_i}}Requires javascript{{/i}}</h3>
<p>{{_i}}Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.{{/i}}</p>
<p>{{_i}}In some cases&mdash;like mobile&mdash;dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}</p>
</div><!--/span-->
</div><!--/row-->
<br>
<h2>{{_i}}Split button dropdowns{{/i}}</h2>
<div class="row">
<div class="span4">
<h3>{{_i}}Overview and examples{{/i}}</h3>
<p>{{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}</p>
<div class="btn-toolbar" style="margin-top: 18px;">
......@@ -393,8 +379,7 @@
&lt;/ul&gt;
&lt;/div&gt;
</pre>
</div>
<div class="span8">
<h3>{{_i}}Example markup{{/i}}</h3>
<p>{{_i}}We expand on the normal button dropdowns to provide a second button action that operates as a separate dropdown trigger.{{/i}}</p>
<pre class="prettyprint linenums">
......@@ -446,8 +431,6 @@
&lt;/div&gt;
</pre>
</div>
</div>
</section>
......
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