Bootstrap 4 Navs
Nav Menus
ရိုးရှင်းသော အလျားလိုက်မီနူးကို ဖန်တီးလိုပါက၊
တစ်ခုစီအတွက် .navအတန်းကို <ul>ဒြပ်စင် တစ်ခုသို့ ပေါင်းထည့်ကာ .nav-item
တစ်ခုချင်းစီအတွက် အတန်းကို ၎င်းတို့၏လင့်ခ်များသို့ <li>ပေါင်းထည့်ပါ -.nav-link
ဥပမာ
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
ညှိထားသော ရေ
.justify-content-centernav ကို ဗဟိုပြုရန် အတန်းကို ထည့်ပါ ၊ နှင့် nav .justify-content-endကို ညာဘက်သို့ ညှိရန် အတန်းကို ထည့်ပါ။
ဥပမာ
<!-- Centered nav -->
<ul class="nav justify-content-center">
<!-- Right-aligned nav -->
<ul class="nav justify-content-end">
ဒေါင်လိုက်ရေ
.flex-columnဒေါင်လိုက် nav တစ်ခု ဖန်တီးရန် အတန်းကို ထည့်ပါ
ဥပမာ
<ul class="nav
flex-column">
တက်ဘ်များ
nav menu ကို .nav-tabsclass ဖြင့် navigation တက်ဘ်များအဖြစ်ပြောင်းပါ။ .activeအတန်းကို အသက်ဝင်သော/လက်ရှိလင့်ခ်သို့ ထည့်ပါ ။ တက်ဘ်များကို ပြောင်းသုံးနိုင်စေလိုပါက ဤစာမျက်နှာရှိ နောက်ဆုံးဥပမာကို ကြည့်ပါ။
ဥပမာ
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
ဆေးပြား
.nav-pillsအတန်း နှင့်အတူ nav menu ကို လမ်းညွှန်ဆေးပြားအဖြစ် ပြောင်းပါ ။ သင်သည် ဆေးများကို ခလုတ်ဖွင့်နိုင်စေရန်အတွက်၊ ဤစာမျက်နှာရှိ နောက်ဆုံးဥပမာကို ကြည့်ပါ။
ဥပမာ
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
မျှတသော ဆေးပြား/ဆေးများ
တက်ဘ်/ဆေးပြားများကို .nav-justifiedအတန်းအစား (တူညီသော အကျယ်ဖြင့် သတ်မှတ်ပါ)။
ဥပမာ
<ul class="nav nav-pills
nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>
Dropdown ဖြင့် ဆေးပြား
ဥပမာ
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item dropdown">
<a class="nav-link
dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Dropdown ဖြင့် တက်ဘ်များ
ဥပမာ
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item dropdown">
<a class="nav-link
dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
ခလုတ်ဖွင့်နိုင်သော / Dynamic တဘ်များ
ပင်မ
နာကျင်မှုကိုယ်တိုင်က အရေးကြီးသော်လည်း နာကျင်မှုကို adipiscing လုပ်ငန်းစဉ်ဖြင့် မြှင့်တင်ပေးသည်၊ သို့သော် ကြီးကျယ်သောအလုပ်နှင့် နာကျင်မှုကို ဖြတ်တောက်ရန် အချိန်ပေးပါသည်။
တဘ်များကို ပြောင်းသုံးနိုင်စေရန်၊ data-toggle="tab"လင့်တစ်ခုစီသို့ ရည်ညွှန်းချက်ကို ထည့်ပါ။ ထို့နောက် .tab-paneတက်ဘ်တစ်ခုစီအတွက် သီးသန့် ID တစ်ခုပါရှိသော အတန်း
တစ်ခုကို ပေါင်းထည့်ကာ ၎င်းတို့ကို အတန်းနှင့် <div>ဒြပ်စင် တစ်ခုအတွင်း ထည့်သွင်းပါ .tab-content။
၎င်းတို့ကို နှိပ်သောအခါတွင် တက်ဘ်များကို အဝင်အထွက် မှေးမှိန်သွားစေလိုပါက
.fadeအတန်းကို .tab-paneအောက်ပါ သို့ ထည့်ပါ။
ဥပမာ
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-toggle="tab"
href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<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>
ပြောင်းနိုင်သော / Dynamic Pills
ပင်မ
နာကျင်မှုကိုယ်တိုင်က အရေးကြီးသော်လည်း နာကျင်မှုကို adipiscing လုပ်ငန်းစဉ်ဖြင့် မြှင့်တင်ပေးသည်၊ သို့သော် ကြီးကျယ်သောအလုပ်နှင့် နာကျင်မှုကို ဖြတ်တောက်ရန် အချိန်ပေးပါသည်။
တူညီသောကုဒ်သည် ဆေးပြားများနှင့် သက်ဆိုင်ပါသည်။ data-toggle attribute ကိုသာပြောင်းပါ data-toggle="pill":
ဥပမာ
<!-- Nav pills -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<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>
Bootstrap 4 Nav Reference ကို အပြီးသတ်ပါ။
တက်ဘ်ရွေးချယ်မှုများ၊ နည်းလမ်းများနှင့် ဖြစ်ရပ်များအားလုံးကို အပြည့်အစုံကိုးကားရန်အတွက်၊ ကျွန်ုပ်တို့၏ Bootstrap 4 JS Tab Reference သို့ သွားပါ ။