https://www.tibia-wiki.net/index.php?action=history&feed=atom&title=Pomoc%3AButton_Dropdown
Pomoc:Button Dropdown - Historia wersji
2026-07-01T19:13:11Z
Historia wersji tej strony wiki
MediaWiki 1.27.1
https://www.tibia-wiki.net/index.php?title=Pomoc:Button_Dropdown&diff=339127&oldid=prev
Bosal: Utworzono nową stronę "__NOTOC__{{DISPLAYTITLE:Anniversary Button Drop Down Menus<span style="display: none"></span>}} <div class="col-md-12"> <div class="panel panel-primary"> <div..."
2016-11-11T12:09:05Z
<p>Utworzono nową stronę "__NOTOC__{{DISPLAYTITLE:Anniversary Button Drop Down Menus<span style="display: none"></span>}} <div class="col-md-12"> <div class="panel panel-primary"> <div..."</p>
<p><b>Nowa strona</b></p><div>__NOTOC__{{DISPLAYTITLE:Anniversary Button Drop Down Menus<span style="display: none"></span>}}<br />
<div class="col-md-12"><br />
<div class="panel panel-primary"><br />
<div class="panel-body"><br />
<div class="bs-docs-section"><br />
<h1 id="btn-dropdowns" class="page-header">Button dropdowns</h1><br />
<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><br />
<h3 id="btn-dropdowns-single">Single button dropdowns</h3><br />
<p>Turn a button into a dropdown toggle with some basic markup changes.</p><br />
<div class="bs-example" data-example-id="single-button-dropdown"><br />
<div class="btn-group"><br />
<div class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Default <span class="caret"></span></div><br />
<ul class="dropdown-menu" role="menu"><br />
<li>[[Action]]</li><br />
<li>[[Another action]]</li><br />
<li>[[Something else here]]</li><br />
<li class="divider"></li><br />
<li>[[Separated link]]</li><br />
</ul><br />
</div><!-- /btn-group --><br />
<div class="btn-group"><br />
<div class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Primary <span class="caret"></span></div><br />
<ul class="dropdown-menu" role="menu"><br />
<li>[[Action]]</li><br />
<li>[[Another action]]</li><br />
<li>[[Something else here]]</li><br />
<li class="divider"></li><br />
<li>[[Separated link]]</li><br />
</ul><br />
</div><!-- /btn-group --><br />
<div class="btn-group"><br />
<div class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Success <span class="caret"></span></div><br />
<ul class="dropdown-menu" role="menu"><br />
<li>[[Action]]</li><br />
<li>[[Another action]]</li><br />
<li>[[Something else here]]</li><br />
<li class="divider"></li><br />
<li>[[Separated link]]</li><br />
</ul><br />
</div><!-- /btn-group --><br />
<div class="btn-group"><br />
<div class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Info <span class="caret"></span></div><br />
<ul class="dropdown-menu" role="menu"><br />
<li>[[Action]]</li><br />
<li>[[Another action]]</li><br />
<li>[[Something else here]]</li><br />
<li class="divider"></li><br />
<li>[[Separated link]]</li><br />
</ul><br />
</div><!-- /btn-group --><br />
<div class="btn-group"><br />
<div class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Warning <span class="caret"></span></div><br />
<ul class="dropdown-menu" role="menu"><br />
<li>[[Action]]</li><br />
<li>[[Another action]]</li><br />
<li>[[Something else here]]</li><br />
<li class="divider"></li><br />
<li>[[Separated link]]</li><br />
</ul><br />
</div><!-- /btn-group --><br />
<div class="btn-group"><br />
<div class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Danger <span class="caret"></span></div><br />
<ul class="dropdown-menu" role="menu"><br />
<li>[[Action]]</li><br />
<li>[[Another action]]</li><br />
<li>[[Something else here]]</li><br />
<li class="divider"></li><br />
<li>[[Separated link]]</li><br />
</ul><br />
</div><!-- /btn-group --><br />
</div><br />
<p>The color of the button is determined by the <code>btn-default</code> (see below), substitute with <code>btn-success</code> (green), <code>btn-danger</code> (red), <code>btn-info</code> (pale blue), <code>btn-primary</code> (dark blue) or <code>btn-warning</code> (orange).</p><br />
<pre> <div class="btn-group"><br />
<div class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Default <span class="caret"></span></div><br />
<ul class="dropdown-menu" role="menu"><br />
<li>[[Action]]</li><br />
<li>[[Another action]]</li><br />
<li>[[Something else here]]</li><br />
<li class="divider"></li><br />
<li>[[Separated link]]</li><br />
</ul><br />
</div></pre><br />
<h3 id="btn-dropdowns-split">Split button dropdowns</h3><br />
<p>Similarly, create split button dropdowns with the same markup changes, only with a separate button.</p><br />
<div class="bs-example" data-example-id="split-button-dropdown"><br />
<div class="btn-group"><br />
<div class="btn btn-default">Default</div><br />
<div class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></div><br />
<ul class="dropdown-menu" role="menu"><br />
<li>[[Action]]</li><br />
<li>[[Another action]]</li><br />
<li>[[Something else here]]</li><br />
<li class="divider"></li><br />
<li>[[Separated link]]</li><br />
</ul><br />
</div><!-- /btn-group --><br />
<div class="btn-group"><br />
<div class="btn btn-primary">Primary</div><br />
<div class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span><br />
</div><br />
<ul class="dropdown-menu" role="menu"><br />
<li>[[Action]]</li><br />
<li>[[Another action]]</li><br />
<li>[[Something else here]]</li><br />
<li class="divider"></li><br />
<li>[[Separated link]]</li><br />
</ul><br />
</div><!-- /btn-group --><br />
<div class="btn-group"><br />
<div class="btn btn-success">Success</div><br />
<div class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span><br />
</div><br />
<ul class="dropdown-menu" role="menu"><br />
<li>[[Action]]</li><br />
<li>[[Another action]]</li><br />
<li>[[Something else here]]</li><br />
<li class="divider"></li><br />
<li>[[Separated link]]</li><br />
</ul><br />
</div><!-- /btn-group --><br />
<div class="btn-group"><br />
<div class="btn btn-info">Info</div><br />
<div class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span><br />
</div><br />
<ul class="dropdown-menu" role="menu"><br />
<li>[[Action]]</li><br />
<li>[[Another action]]</li><br />
<li>[[Something else here]]</li><br />
<li class="divider"></li><br />
<li>[[Separated link]]</li><br />
</ul><br />
</div><!-- /btn-group --><br />
<div class="btn-group"><br />
<div class="btn btn-warning">Warning</div><br />
<div class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span><br />
</div><br />
<ul class="dropdown-menu" role="menu"><br />
<li>[[Action]]</li><br />
<li>[[Another action]]</li><br />
<li>[[Something else here]]</li><br />
<li class="divider"></li><br />
<li>[[Separated link]]</li><br />
</ul><br />
</div><!-- /btn-group --><br />
<div class="btn-group"><br />
<div class="btn btn-danger">Danger</div><br />
<div class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span><br />
</div><br />
<ul class="dropdown-menu" role="menu"><br />
<li>[[Action]]</li><br />
<li>[[Another action]]</li><br />
<li>[[Something else here]]</li><br />
<li class="divider"></li><br />
<li>[[Separated link]]</li><br />
</ul><br />
</div><!-- /btn-group --><br />
</div><br />
<pre> <div class="btn-group"><br />
<div class="btn btn-default">Default</div><br />
<div class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span><br />
<span class="sr-only">Toggle Dropdown</span><br />
</div><br />
<ul class="dropdown-menu" role="menu"><br />
<li>[[Action]]</li><br />
<li>[[Another action]]</li><br />
<li>[[Something else here]]</li><br />
<li class="divider"></li><br />
<li>[[Separated link]]</li><br />
</ul><br />
</div><br />
</pre><br />
<h3 id="btn-dropdowns-sizing">Sizing</h3><br />
<p>Button dropdowns work with buttons of all sizes.</p><br />
<div class="bs-example" data-example-id="button-dropdown-sizing"><br />
<div class="btn-toolbar" role="toolbar"><br />
<div class="btn-group"><br />
<div class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Large button <span class="caret"></span><br />
</div><br />
<ul class="dropdown-menu" role="menu"><br />
<li>[[Action]]</li><br />
<li>[[Another action]]</li><br />
<li>[[Something else here]]</li><br />
<li class="divider"></li><br />
<li>[[Separated link]]</li><br />
</ul><br />
</div><!-- /btn-group --><br />
</div><!-- /btn-toolbar --><br />
<div class="btn-toolbar" role="toolbar"><br />
<div class="btn-group"><br />
<div class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Small button <span class="caret"></span></div><br />
<ul class="dropdown-menu" role="menu"><br />
<li>[[Action]]</li><br />
<li>[[Another action]]</li><br />
<li>[[Something else here]]</li><br />
<li class="divider"></li><br />
<li>[[Separated link]]</li><br />
</ul><br />
</div><!-- /btn-group --><br />
</div><!-- /btn-toolbar --><br />
<div class="btn-toolbar" role="toolbar"><br />
<div class="btn-group"><br />
<div class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Extra small button <span class="caret"></span></div><br />
<ul class="dropdown-menu" role="menu"><br />
<li>[[Action]]</li><br />
<li>[[Another action]]</li><br />
<li>[[Something else here]]</li><br />
<li class="divider"></li><br />
<li>[[Separated link]]</li><br />
</ul><br />
</div><!-- /btn-group --><br />
</div><!-- /btn-toolbar --><br />
</div><!-- /example --><br />
<p>The size of the button is determined by the <code>btn-lg</code> (see below), substitute with <code>btn-sm</code> (small), <code>btn-xs</code> (extra small) or remove the size class to display the default size.</p><br />
<pre> <div class="btn-group"><br />
<div class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Large button <span class="caret"></span><br />
</div><br />
<ul class="dropdown-menu" role="menu"><br />
<li>[[Action]]</li><br />
<li>[[Another action]]</li><br />
<li>[[Something else here]]</li><br />
<li class="divider"></li><br />
<li>[[Separated link]]</li><br />
</ul><br />
</div></pre><br />
<h3 id="btn-dropdowns-dropup">Dropup variation</h3><br />
<p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p><br />
<div class="bs-example" data-example-id="button-dropdown-dropup"><br />
<div class="btn-toolbar" role="toolbar"><br />
<div class="btn-group dropup"><br />
<div class="btn btn-default">Dropup</div><br />
<div class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span><br />
</div><br />
<ul class="dropdown-menu" role="menu"><br />
<li>[[Action]]</li><br />
<li>[[Another action]]</li><br />
<li>[[Something else here]]</li><br />
<li class="divider"></li><br />
<li>[[Separated link]]</li><br />
</ul><br />
</div><!-- /btn-group --><br />
<div class="btn-group dropup"><br />
<div class="btn btn-primary">Right dropup</div><br />
<div class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></div><br />
<ul class="dropdown-menu dropdown-menu-right" role="menu"><br />
<li>[[Action]]</li><br />
<li>[[Another action]]</li><br />
<li>[[Something else here]]</li><br />
<li class="divider"></li><br />
<li>[[Separated link]]</li><br />
</ul><br />
</div><!-- /btn-group --><br />
</div><br />
</div><!-- /example --><br />
<pre><div class="btn-group dropup"><br />
<div class="btn btn-default">Dropup</div><br />
<div class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span><br />
</div><br />
<ul class="dropdown-menu" role="menu"><br />
<li>[[Action]]</li><br />
<li>[[Another action]]</li><br />
<li>[[Something else here]]</li><br />
<li class="divider"></li><br />
<li>[[Separated link]]</li><br />
</ul><br />
</div></pre><br />
</div><br />
</div><br />
</div><br />
</div></div>
Bosal