Bootstrap Dropdowns
This chapter will highlight about Bootstrap dropdown menus. Dropdown menus aretoggleable, contextual menus for displaying links in a list format. This can be made interactive with the dropdown JavaScript plugin.
To use dropdown, just wrap the dropdown menu within the class .dropdown. Following example demonstrates a basic dropdown menu:
<div class="dropdown">
<button type="button" class="btndropdown-toggle" id="dropdownMenu1"
data-toggle="dropdown">
Topics
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1"href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1"href="#">Data Mining</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1"href="#">
Data Communication/Networking
</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1"href="#">Separated link</a>
</li>
</ul>
</div>
Options
Alignment
Align the dropdown menu to right by adding the class .pull-right to .dropdown-menu. Following example demonstrates this:
<div class="dropdown">
<button type="button" class="btndropdown-toggle" id="dropdownMenu1"
data-toggle="dropdown">Topics
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right" role="menu"
aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1"href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1"href="#">Data Mining</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1"href="#">
Data Communication/Networking
</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1"href="#">Separated link</a>
</li>
</ul>
</div>
Headers
You can add a header to label sections of actions in any dropdown menu by using the classdropdown-header. Following example demonstrates this:
<div class="dropdown">
<button type="button" class="btndropdown-toggle" id="dropdownMenu1"
data-toggle="dropdown">
Topics
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">Dropdown header</li>
<li role="presentation" >
<a role="menuitem" tabindex="-1"href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1"href="#">Data Mining</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1"href="#">
Data Communication/Networking
</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Dropdown header</li>
<li role="presentation">
<a role="menuitem" tabindex="-1"href="#">Separated link</a>
</li>
</ul>
</div>
ليست هناك تعليقات:
إرسال تعليق