diff options
Diffstat (limited to 'docs/templates')
| -rw-r--r-- | docs/templates/pages/components.mustache | 81 |
1 files changed, 79 insertions, 2 deletions
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 4997b2990..b257cd4d1 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -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"> +<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"> + <!-- {{_i}}dropdown menu links{{/i}} --> + </ul> +</div> +</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"> <div class="btn-group"> <a class="btn" href="#">{{_i}}Action{{/i}}</a> |