Dropdown is not the type in the form <select><option value=''></option></select>, but the type commonly found in the navigation bar.
The official Bootstrap website has very little explanation for the dropdown menu Dropdown, even their official English website.
There is no specific explanation on how to change the background color of the drop-down menu, if the default black hyperlink of the drop-down menu is modified, and how to change the drop-down menu to a normal hyperlink instead of the text style, the official website has no specific explanation.
Moreover, the hyperlink code of the official website is mixed with many useless parameters.
The author has been studying for a long time before finding a way to change the drop-down menu.
The following is the drop-down menu of IE8 for Bootstrap. In the future, you must use IE8 to test it. Advanced browsers such as Google have covered up many bugs.
Provides how to change the background color of the drop-down menu, how to change the drop-down menu to a normal hyperlink instead of text style if you modify the default black hyperlink.
As for how to change the frame of the drop-down menu, I am really powerless.
For the above drop-down menu specific implementation, please refer to the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <title>Dropdown menu dropdown</title> </head> <body> <div> <!--Change btn-default to btn-link to make it a text-style dropdown menu --> <button type="button" data-toggle="dropdown"> Dropdown menu<!--This is the small triangle next to the dropdown menu--> <span></span> </button> <!--The dropdown-menu in the class and label-warning properties can change the background color of the dropdown menu--> <ul role="menu"> <li> <!--The text-info in the class here in the span is to make the color of the link in the dropdown menu from black to blue that looks more like a hyperlink--> <a href="#"><span>Project 1</span></a> </li> <li> <a href="#"><span>Project 2</span></a> </li> </ul> </div> </body></html>
The drop-down menu will not work without jquery support. The drop-down menu is originally a javascript component.
Before bootstrap, write a drop-down menu to define a hidden layer. This layer will be displayed after the mouse hovers or clicks the corresponding hyperlink. When the mouse hovers over here to hide the layer, the hidden layer will still be displayed. When the mouse leaves this hidden layer, the hidden layer will continue to change from display to hidden, which is very troublesome.
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.