JavaScript 开发者必备：Bootstrap 选项卡式、药丸及垂直药丸导航菜单创建全攻略

在Bootstrap中创建选项卡式、药丸和垂直药丸导航菜单，你可以使用Bootstrap的导航组件。以下是创建这些导航菜单的步骤： 1. 选项卡式导航菜单： ```html <nav class="nav nav-tabs"> <a class="nav-item nav-link active" href="#home" data-toggle="tab">Home</a> <a class="nav-item nav-link" href="#profile" data-toggle="tab">Profile</a> <a class="nav-item nav-link" href="#messages" data-toggle="tab">Messages</a> <a class="nav-item nav-link" href="#settings" data-toggle="tab">Settings</a> </nav> <div class="tab-content"> <div class="tab-pane fade show active" id="home">...</div> <div class="tab-pane fade" id="profile">...</div> <div class="tab-pane fade" id="messages">...</div> <div class="tab-pane fade" id="settings">...</div> </div> ``` 2. 药丸导航菜单： ```html <nav class="nav nav-pills"> <a class="nav-item nav-link active" href="#">Home</a> <a class="nav-item nav-link" href="#">Profile</a> <a class="nav-item nav-link" href="#">Messages</a> <a class="nav-item nav-link" href="#">Settings</a> </nav> ``` 3. 垂直药丸导航菜单： ```html <nav class="nav nav-pills flex-column"> <a class="nav-item nav-link active" href="#">Home</a> <a class="nav-item nav-link" href="#">Profile</a> <a class="nav-item nav-link" href="#">Messages</a> <a class="nav-item nav-link" href="#">Settings</a> </nav> ``` 以上代码中，`data-toggle="tab"`属性用于切换选项卡，`nav-pills`用于创建药丸导航菜单，`flex-column`用于垂直排列药丸导航菜单。 ######[AI写代码神器 | 445点数解答 | 2023-11-09 01:23:43]