Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
CHAPTER<br />
36<br />
<strong>Bootstrap</strong> Dropdown Plugin<br />
The chapter <strong>Bootstrap</strong> Dropdowns covered the dropdown menu, but the interaction part was not covered<br />
which will be explained here. Using Dropdown plugin you can add dropdowns menus to any components like<br />
navbars, tabs, pills and buttons.<br />
If you want to include this plugin functionality individually, then you will need dropdown.js. Else, as mentioned in<br />
the chapter <strong>Bootstrap</strong> Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js.<br />
Usage<br />
You can toggle the dropdown plugin's hidden content:<br />
<br />
Via data attributes: Add data-toggle="dropdown" to a link or button to toggle a dropdown as shown below:<br />
<br />
Dropdown trigger<br />
<br />
...<br />
<br />
<br />
If you need to keep links intact (which is useful if the browser is not enabling JavaScript), use thedatatarget<br />
attribute instead of href="#":<br />
<br />
<br />
Dropdown <br />
<br />
<br />
...<br />
<br />
<br />
<br />
Via JavaScript: To call the dropdown toggle via JavaScript, use the following method:<br />
$('.dropdown-toggle').dropdown()<br />
TUTORIALS POINT<br />
Simply Easy Learning
Change language