diff options
Diffstat (limited to 'docs/_includes/components')
| -rw-r--r-- | docs/_includes/components/button-dropdowns.html | 311 |
1 files changed, 0 insertions, 311 deletions
diff --git a/docs/_includes/components/button-dropdowns.html b/docs/_includes/components/button-dropdowns.html deleted file mode 100644 index 0b67620bc..000000000 --- a/docs/_includes/components/button-dropdowns.html +++ /dev/null @@ -1,311 +0,0 @@ -<div class="bs-docs-section"> - <h1 id="btn-dropdowns" class="page-header">Button dropdowns</h1> - - <p class="lead">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="bs-callout bs-callout-danger"> - <h4>Plugin dependency</h4> - <p>Button dropdowns require the <a href="../javascript/#dropdowns">dropdown plugin</a> to be included in your version of Bootstrap.</p> - </div> - - <h3 id="btn-dropdowns-single">Single button dropdowns</h3> - <p>Turn a button into a dropdown toggle with some basic markup changes.</p> - <div class="bs-example"> - <div class="btn-group"> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Default</button> - <ul class="dropdown-menu" role="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"> - <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary</button> - <ul class="dropdown-menu" role="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"> - <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success</button> - <ul class="dropdown-menu" role="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"> - <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info</button> - <ul class="dropdown-menu" role="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"> - <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning</button> - <ul class="dropdown-menu" role="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"> - <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger</button> - <ul class="dropdown-menu" role="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> -{% highlight html %} -<!-- Single button --> -<div class="btn-group"> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"> - Action - </button> - <ul class="dropdown-menu" role="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> -{% endhighlight %} - - <h3 id="btn-dropdowns-split">Split button dropdowns</h3> - <p>Similarly, create split button dropdowns with the same markup changes, only with a separate button.</p> - <div class="bs-example"> - <div class="btn-group"> - <button type="button" class="btn btn-secondary">Default</button> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"> - <span class="sr-only">Toggle Dropdown</span> - </button> - <ul class="dropdown-menu" role="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"> - <button type="button" class="btn btn-primary">Primary</button> - <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> - <span class="sr-only">Toggle Dropdown</span> - </button> - <ul class="dropdown-menu" role="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"> - <button type="button" class="btn btn-success">Success</button> - <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> - <span class="sr-only">Toggle Dropdown</span> - </button> - <ul class="dropdown-menu" role="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"> - <button type="button" class="btn btn-info">Info</button> - <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"> - <span class="sr-only">Toggle Dropdown</span> - </button> - <ul class="dropdown-menu" role="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"> - <button type="button" class="btn btn-warning">Warning</button> - <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"> - <span class="sr-only">Toggle Dropdown</span> - </button> - <ul class="dropdown-menu" role="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"> - <button type="button" class="btn btn-danger">Danger</button> - <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> - <span class="sr-only">Toggle Dropdown</span> - </button> - <ul class="dropdown-menu" role="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> -{% highlight html %} -<!-- Split button --> -<div class="btn-group"> - <button type="button" class="btn btn-danger">Action</button> - <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> - <span class="sr-only">Toggle Dropdown</span> - </button> - <ul class="dropdown-menu" role="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> -{% endhighlight %} - - <h3 id="btn-dropdowns-sizing">Sizing</h3> - <p>Button dropdowns work with buttons of all sizes.</p> - <div class="bs-example"> - <div class="btn-toolbar" role="toolbar"> - <div class="btn-group"> - <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> - Large button - </button> - <ul class="dropdown-menu" role="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><!-- /btn-toolbar --> - <div class="btn-toolbar" role="toolbar"> - <div class="btn-group"> - <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> - Small button - </button> - <ul class="dropdown-menu" role="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><!-- /btn-toolbar --> - <div class="btn-toolbar" role="toolbar"> - <div class="btn-group"> - <button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown"> - Extra small button - </button> - <ul class="dropdown-menu" role="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><!-- /btn-toolbar --> - </div><!-- /example --> -{% highlight html %} -<!-- Large button group --> -<div class="btn-group"> - <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> - Large button - </button> - <ul class="dropdown-menu" role="menu"> - ... - </ul> -</div> - -<!-- Small button group --> -<div class="btn-group"> - <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> - Small button - </button> - <ul class="dropdown-menu" role="menu"> - ... - </ul> -</div> - -<!-- Extra small button group --> -<div class="btn-group"> - <button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown"> - Extra small button - </button> - <ul class="dropdown-menu" role="menu"> - ... - </ul> -</div> -{% endhighlight %} - - <h3 id="btn-dropdowns-dropup">Dropup variation</h3> - <p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p> - <div class="bs-example"> - <div class="btn-toolbar" role="toolbar"> - <div class="btn-group dropup"> - <button type="button" class="btn btn-secondary">Dropup</button> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"> - <span class="sr-only">Toggle Dropdown</span> - </button> - <ul class="dropdown-menu" role="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 dropup"> - <button type="button" class="btn btn-primary">Right dropup</button> - <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> - <span class="sr-only">Toggle Dropdown</span> - </button> - <ul class="dropdown-menu dropdown-menu-right" role="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><!-- /example --> -{% highlight html %} -<div class="btn-group dropup"> - <button type="button" class="btn btn-secondary">Dropup</button> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"> - <span class="sr-only">Toggle Dropdown</span> - </button> - <ul class="dropdown-menu" role="menu"> - <!-- Dropdown menu links --> - </ul> -</div> -{% endhighlight %} -</div> |