Pull down menu components
Using the bootstrap pull-down menu component, you need to introduce bootstrap.js under the JS directory of jquery and bootstrap folders.
<script src="jq/jquery-3.3.1.min.js"></script> <script src="js/bootstrap.js"></script>
Drop down menus are all contained in. dropdown containers.
The value of data toggle is also dropdown, and the class name of the menu item is dropdown menu. Where, divider is the dividing line.
Main code:
<body> <!-- drop-down menu --> <ul class="nav navbar-nav"> <li><a href="#"> menu 1</a></li> <li class="dropdown"> <a href="#" class="dropdown-toogle" data-toggle="dropdown"> Menu two<span class="caret"></span> </a> <ul class="dropdown-menu"> <li>Chinese Cabbage</li> <li class="divider"></li> <li>Submenu two</li> </ul> </li> <li><a href="#"> menu three</a></li> </ul> </body>
Button component
Need to be in. BTN group. [button group, there is also a class. BTN group adjusted to make the button component full horizontally]
Where, button can be replaced with a
<body> <!-- Button group --> <div class="btn-group"> <button class="btn btn-default">home page</button> <button class="btn btn-info">classification</button> <button class="btn btn-success">like</button> </div> <div class="btn-group"> <a class="btn btn-default">home page</a> <a class="btn btn-info">classification</a> <a class="btn btn-success">like</a> </div> </body>
Buttons Toolbar
<!-- Buttons Toolbar --> <div class="btn-toolbar"> <div class="btn-group"> <button class="btn btn-default">home page</button> <button class="btn btn-info">classification</button> <button class="btn btn-success">like</button> </div> <div class="btn-group"> <button class="btn btn-default">home page</button> <button class="btn btn-info">classification</button> </div> <div class="btn-group"> <button class="btn btn-success">like</button> </div> </div>
Button pull down menu
<!-- Button drop-down menu --> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" > home page <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#"> Book 1</a></li> <li><a href="#"> Book 2</a></li> </ul> </div>