Bootstrap 5 စားသုံးပုံ
- အရေးပါ စာရင်း BS5 လျှော့ကျ
- နောက်ပိုင်း စာရင်း BS5 နှီးချိုးချော်လုပ်
ချိတ်ဆက် အသား
လက်ရှိ အသားကို .nav 类添加到 <ul> အရာကို <li> အရာကို .nav-item နှင့် .nav-link သတ်မှတ် သုံးနိုင်သော ချိတ်ဆက်များ
အမှတ်အသား
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">禁用</a>
</li>
</ul>
ချိတ်ဆက် ပြုပြင်
ထည်သွင်း .justify-content-center ချိတ်ဆက် အလယ်အရှိုး အသုံးပြု .justify-content-end ချိတ်ဆက် အတိတ်အရှိုး အသုံးပြု
အမှတ်အသား
<!-- အလယ်အရှိုး ချိတ်ဆက် --> <ul class="nav justify-content-center"> <!-- အတိတ်အရှိုး ချိတ်ဆက် --> <ul class="nav justify-content-end">
အဆန့်ဆန့် နှိပ်တိုက်
ထည်သွင်း .flex-column 类可创建垂直导航：
အမှတ်အသား
<ul class="nav flex-column">
选项卡
请使用 .nav-tabs 类将导航菜单转换为导航选项卡。并将 .active 类添加到活动/当前链接。如果您希望选项卡可切换，请参阅本页的最后一个例子。
အမှတ်အသား
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">活动</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">禁用</a>
</li>
</ul>
胶囊
使用 .nav-pills 类可将导航菜单设置为导航胶囊。如果您希望胶囊可切换，请参阅本页的最后一个例子。
အမှတ်အသား
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">活动</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">禁用</a>
</li>
</ul>
等宽的选项卡/胶囊导航
请使用 .nav-justified 类（等宽）对齐标签/胶囊：
အမှတ်အသား
<ul class="nav nav-pills nav-justified">..</ul> <ul class="nav nav-tabs nav-justified">..</ul>
胶囊下拉菜单
အမှတ်အသား
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">活动</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">链接 1</a></li>
<li><a class="dropdown-item" href="#">链接 2</a></li>
<li><a class="dropdown-item" href="#">链接 3</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">禁用</a>
</li>
</ul>
选项卡下拉菜单
အမှတ်အသား
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">活动</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">链接 1</a></li>
<li><a class="dropdown-item" href="#">链接 2</a></li>
<li><a class="dropdown-item" href="#">链接 3</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">禁用</a>
</li>
</ul>
可切换的 / 动态选项卡
如需使选项卡可切换，请将 data-toggle="tab" 属性添加到每个链接。然后为每个选项卡添加有唯一 ID 的 .tab-pane 类，并将它们包装在带有 .tab-content 类的 <div> 元素中。
如果您希望选项卡在单击时能够淡入淡出，请将 .fade 类添加到 .tab-pane：
အမှတ်အသား
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- တင်ချက် ကော်ပရာ -->
<div class="tab-content">
<div class="tab-pane container active" id="home">...</div>
<div class="tab-pane container fade" id="menu1">...</div>
<div class="tab-pane container fade" id="menu2">...</div>
</div>
အပြောင်းအလဲကို ပြောင်းလဲရန် အသုံးပြုပါ
နှီးချိုးချော်လုပ် နှီးချိုးချော်လုပ် အတူ အသုံးပြုသော အခြေခံအချက် အတူ အသုံးပြုပါ။ data-toggle အခွင့်ထူး ကို data-toggle="pill" လိုက်နာရန်
အမှတ်အသား
<!-- နှီးချိုးချော်လုပ် နှီးချိုးချော်လုပ် -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="pill" href="#home">မနေ့</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="pill" href="#menu1">နွေရာသီ</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="pill" href="#menu2">တောင်ဘက်</a>
</li>
</ul>
<!-- တင်ချက် ကော်ပရာ -->
<div class="tab-content">
<div class="tab-pane container active" id="home">...</div>
<div class="tab-pane container fade" id="menu1">...</div>
<div class="tab-pane container fade" id="menu2">...</div>
</div>
- အရေးပါ စာရင်း BS5 လျှော့ကျ
- နောက်ပိုင်း စာရင်း BS5 နှီးချိုးချော်လုပ်
