Skip to content
GitLab
Commit 9f5b6190 authored by Mark Otto's avatar Mark Otto
Browse files

add in regular button dropdowns, rejigger the button dropdowns section to reflect change

parent 9ba70796
Hide whitespace changes
Inline Side-by-side
Showing
with 158 additions and 4 deletions
+158 -4
docs/assets/bootstrap.zip
+ 0
- 0
View file @ 9f5b6190
No preview for this file type
docs/components.html
+ 79
- 2
View file @ 9f5b6190
......@@ -179,8 +179,85 @@
================================================== -->
<section id="buttonDropdowns">
<div class="page-header">
<h1>Buttons dropdowns <small>Built on button groups to provide contextual dropdown menus</small></h1>
<h1>Buttons dropdowns <small>Contextual dropdown menus built on button groups</small></h1>
</div>
<div class="row">
<div class="span4">
<h3>Button dropdowns</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;">
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Action <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#">Action <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<a class="btn danger dropdown-toggle" data-toggle="dropdown" href="#">Danger <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div>
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn success dropdown-toggle" data-toggle="dropdown" href="#">Success <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<a class="btn info dropdown-toggle" data-toggle="dropdown" href="#">Info <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div>
</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">
&lt;div class="btn-group"&gt;
&lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;
Action
&lt;span class="caret"&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;ul class="dropdown-menu"&gt;
&lt;!-- dropdown menu links --&gt;
&lt;/ul&gt;
&lt;/div&gt;
</pre>
</div>
</div>
<div class="row">
<div class="span4">
<h3>Split button dropdowns</h3>
......@@ -247,7 +324,7 @@
</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>
<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">
&lt;div class="btn-group"&gt;
&lt;a class="btn" href="#"&gt;Action&lt;/a&gt;
......
docs/templates/pages/components.mustache
+ 79
- 2
View file @ 9f5b6190
......@@ -103,8 +103,85 @@
================================================== -->
<section id="buttonDropdowns">
<div class="page-header">
<h1>{{_i}}Buttons dropdowns{{/i}} <small>{{_i}}Built on button groups to provide contextual dropdown menus{{/i}}</small></h1>
<h1>{{_i}}Buttons dropdowns{{/i}} <small>{{_i}}Contextual dropdown menus built on button groups{{/i}}</small></h1>
</div>
<div class="row">
<div class="span4">
<h3>{{_i}}Button dropdowns{{/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;">
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Action{{/i}} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Action{{/i}} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<a class="btn danger dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Danger{{/i}} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</div><!-- /btn-group -->
</div>
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn success dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Success{{/i}} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<a class="btn info dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Info{{/i}} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</div><!-- /btn-group -->
</div>
</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">
&lt;div class="btn-group"&gt;
&lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;
{{_i}}Action{{/i}}
&lt;span class="caret"&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;ul class="dropdown-menu"&gt;
&lt;!-- {{_i}}dropdown menu links{{/i}} --&gt;
&lt;/ul&gt;
&lt;/div&gt;
</pre>
</div>
</div>
<div class="row">
<div class="span4">
<h3>{{_i}}Split button dropdowns{{/i}}</h3>
......@@ -171,7 +248,7 @@
</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>
<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">
&lt;div class="btn-group"&gt;
&lt;a class="btn" href="#"&gt;{{_i}}Action{{/i}}&lt;/a&gt;
......
Supports Markdown
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