This chapter will focus on the Bootstrap drop-down menu. The drop-down menu is switchable and is a context menu that displays the link in a list format. This can be achieved through interaction with the dropdown menu (Dropdown) JavaScript plugin.
To use the following menu, just add a drop-down menu in class .dropdown. The following example demonstrates the basic drop-down menu:
<!DOCTYPE html><html><head><title>Bootstrap instance - dropdown menu (Dropdowns)</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script><body><div><button type="button" id="dropdownMenu1" data-toggle="dropdown">Teaching<span></span></button><ul 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/Network</a></li><li role="presentation"></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated links</a></li></ul></div></body></html>
The results are as follows:
Bootstrap drop-down menu options
Bootstrap drop-down menu alignment
Align the drop-down menu right by adding class .pull-right to .dropdown-menu. The following example demonstrates this:
<!DOCTYPE html><html><head><title>Bootstrap instance- Right-align drop-down menu</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script><body><div><button type="button" id="dropdownMenu1" data-toggle="dropdown">Topic<span></span></button><ul 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/Network</a></li><li role="presentation"><a role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li></ul></div></body></html>
The results are as follows:
Bootstrap drop-down menu title
You can use class dropdown-header to add a title to the label area of the dropdown menu. The following example demonstrates this:
<!DOCTYPE html><html><head><title>Bootstrap Example - Dropdown Menu Title</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script><body><div><button type="button" id="dropdownMenu1" data-toggle="dropdown">Topic<span></span></button><ul role="menu" aria-labelledby="dropdownMenu1"><li role="presentation">Drop-down menu title</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/Network</a></li><li role="presentation"></li><li role="presentation">Drop-down menu title</li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Disased link</a></li></ul></div></body></html>
The results are as follows:
The above is the relevant knowledge of the Bootstrap drop-down menu of the Bootstrap layout component tutorial introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!