在 Bootstrap 中创建选项卡式药丸和垂直药丸导航菜单

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<!doctype html><html><head> <title>tabbed pill navigation menu example</title>  <link rel=stylesheet href=https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css></head><body>  <div class=container mt-4>  <h1>tutorialspoint</h1>  <ul class=nav nav-pills mb-3 id=pills-tab role=tablist>  <li class=nav-item> <a class=nav-link active id=pills-home-tab data-toggle=pill href=#pills-home role=tab aria-controls=pills-home aria-selected=true>home</a> </li>  <li class=nav-item> <a class=nav-link id=pills-profile-tab data-toggle=pill href=#pills-profile role=tab aria-controls=pills-profile aria-selected=false>profile</a> </li>  <li class=nav-item> <a class=nav-link id=pills-contact-tab data-toggle=pill href=#pills-contact role=tab aria-controls=pills-contact aria-selected=false>contact</a> </li> </ul>  <div class=tab-content id=pills-tabcontent>  <div class=tab-pane fade show active id=pills-home role=tabpanel aria-labelledby=pills-home-tab> <h1>home</h1> <p>lorem ipsum dolor sit amet.</p> </div>  <div class=tab-pane fade id=pills-profile role=tabpanel aria-labelledby=pills-profile-tab> <h1>profile</h1> <p>lorem ipsum dolor sit amet.</p> </div>  <div class=tab-pane fade id=pills-contact role=tabpanel aria-labelledby=pills-contact-tab> <h1>contact</h1> <p>lorem ipsum dolor sit amet.</p> </div> </div> </div>  <script src=https://code.jquery.com/jquery-3.5.1.slim.min.js></script> <script src=https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js></script> <script src=https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js></script></body></html>
方法 - 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<!doctype html><html><head> <title>vertical pill navigation menu</title>  <link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css>  <script src=https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js></script>  <script src=https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js></script>  <script src=https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js></script> <style> body { background-color: #f8f9fa; } /* style for nav links */ .nav-pills .nav-link { color: #fff; background-color: #61a4f0; border-radius: 0; margin: 5px 0; font-weight: bold; padding: 10px; border: none; transition: all 0.2s ease-in-out; } /* style for active and hover nav links */ .nav-pills .nav-link:hover, .nav-pills .nav-link.active { background-color: #007bff; color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } /* remove focus outline from nav links */ .nav-pills .nav-link:focus { box-shadow: none; outline: none; } /* style for tab content */ .tab-content { background-color: #fff; padding: 20px; border-radius: 0 4px 4px 4px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } </style></head><body> <div class=container> <h1>tutorialspoint</h1> <div class=row> <div class=col-md-3>  <div class=nav flex-column nav-pills id=v-pills-tab role=tablist aria-orientation=vertical> <a class=nav-link active id=v-pills-home-tab data-toggle=pill href=#v-pills-home role=tab aria-controls=v-pills-home aria-selected=true>home</a> <a class=nav-link id=v-pills-profile-tab data-toggle=pill href=#v-pills-profile role=tab aria-controls=v-pills-profile aria-selected=false>profile</a> <a class=nav-link id=v-pills-messages-tab data-toggle=pill href=#v-pills-messages role=tab aria-controls=v-pills-messages aria-selected=false>messages</a> <a class=nav-link id=v-pills-settings-tab data-toggle=pill href=#v-pills-settings role=tab aria-controls=v-pills-settings aria-selected=false>settings</a> </div> </div> <div class=col-md-9>  <div class=tab-content id=v-pills-tabcontent>  <div class=tab-pane fade show active id=v-pills-home role=tabpanel aria-labelledby=v-pills-home-tab> <h3>home</h3> <p>welcome to the home page!</p> </div>  <div class=tab-pane fade id=v-pills-profile role=tabpanel aria-labelledby=v-pills-profile-tab> <h3>profile</h3> <p>lorem ipsum dolor.</p> </div>  <div class=tab-pane fade id=v-pills-messages role=tabpanel aria-labelledby=v-pills-messages-tab> <h3>messages</h3> <p>lorem ipsum dolor.</p> </div>  <div class=tab-pane fade id=v-pills-settings role=tabpanel aria-labelledby=v-pills-settings-tab> <h3>settings</h3> <p>lorem ipsum dolor.</p> </div> </div> </div> </div> </div>  <script src=https://code.jquery.com/jquery-3.5.1.slim.min.js></script> <script src=https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js></script> <script src=https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js></script></body></html>
结论这些类型的菜单可以提升网站的用户界面和用户体验。
some of the alternate ways of implementation includes,
使用自定义的css和javascript函数创建一个自定义菜单。
除了bootstrap之外，像materialize和bulma这样的css框架提供类似的功能。
我们还可以使用一些第三方库，如jquery ui、uikit和semantic ui来创建这种导航菜单。
以上就是在 bootstrap 中创建选项卡式药丸和垂直药丸导航菜单的详细内容。

在 Bootstrap 中创建选项卡式药丸和垂直药丸导航菜单

推荐信息