Bootstrap provides several options for creating navigation menus, like tabbed and vertical pills. To create this kind of navigation menus in Bootstrap, we can use the built-in classes and components offered by the framework. This aids in creating a stylish and functional navigation menu that works well on all devices.
方法 - 1：选项卡式导航
In this type of menus each tab represents a different section of the website. The pills are arranged horizontally. Whenever a tab is clicked, the corresponding section gets displayed.
Algorithm
加载Bootstrap的CSS和JavaScript文件。
Add a container element with the heading "Tutorialspoint".
Create a navigation menu with 3 tabs.
声明每个选项卡。
为每个选项卡添加一些内容。
Load the Bootstrap JavaScript and jQuery files.
Example
Tabbed Pill Navigation Menu Example Tutorialspoint
Home
Lorem ipsum dolor sit amet.
Profile
Lorem ipsum dolor sit amet.
Contact
Lorem ipsum dolor sit amet.
方法 - 2：垂直药丸导航
垂直标签页，另一方面，是一种导航菜单类型，其中链接垂直排列而不是水平排列。这有助于创建流畅的用户体验。
Algorithm
创建一个带有标题“Tutorialspoint”的容器。
The container should have one row and two columns.
第一列包含垂直导航菜单，而第二列显示所选菜单项的内容。
菜单是使用"nav"和"nav-pill"类创建的，这使得菜单项以类似药丸的垂直样式显示。
每个项目都是一个带有唯一“href”的锚点标签，该标签链接到显示相应内容的“选项卡面板”。
The content of each menu is displayed in a "tab pane" wrapped in a "tab content" class.
The JavaScript code includes the jQuery library and some Bootstrap JavaScript plugins to make the menu work.
Example
Vertical Pill Navigation Menu Tutorialspoint
Home
Welcome to the home page!
Profile
Lorem ipsum dolor.
Messages
Lorem ipsum dolor.
Settings
Lorem ipsum dolor.
结论
这些类型的菜单可以提升网站的用户界面和用户体验。
Some of the alternate ways of implementation includes,
使用自定义的CSS和javascript函数创建一个自定义菜单。
除了Bootstrap之外，像Materialize和Bulma这样的CSS框架提供类似的功能。
我们还可以使用一些第三方库，如jQuery UI、UIkit和Semantic UI来创建这种导航菜单。
