ရေတပ်နှင့် တက်ဘ်များ

Bootstrap ၏ လမ်းညွှန်ချက် အစိတ်အပိုင်းများ ပါဝင်သော စာရွက်စာတမ်းများကို အသုံးပြုပုံနှင့် ဥပမာများ။

ဤစာမျက်နှာတွင်

Base nav

.navBootstrap တွင် ရရှိနိုင်သော လမ်းညွှန်ချက်သည် အခြေခံ အတန်းမှ တက်ကြွပြီး မသန်စွမ်းသော အခြေအနေများ အထိ ယေဘုယျ အမှတ်အသားနှင့် စတိုင်များကို မျှဝေ ပါသည်။ စတိုင်တစ်ခုစီကြားပြောင်းရန် မွမ်းမံမှုအတန်းများကို လဲလှယ်ပါ။

အခြေခံ .navအစိတ်အပိုင်းကို flexbox ဖြင့်တည်ဆောက်ထားပြီး navigation components အမျိုးအစားအားလုံးကိုတည်ဆောက်ရန်အတွက် ခိုင်မာသောအခြေခံအုတ်မြစ်ကိုပေးပါသည်။ ၎င်းတွင် စတိုင်လ်ကို လွှမ်းမိုးမှုအချို့ (စာရင်းများနှင့် လုပ်ဆောင်ရန်အတွက်)၊ ပိုကြီးသော hit နေရာများအတွက် လင့်ခ်အကွက်အချို့နှင့် အခြေခံမသန်စွမ်းသောပုံစံပုံစံတို့ ပါဝင်ပါသည်။

အခြေခံ အစိတ်အပိုင်းတွင် မည်သည့် ပြည်နယ်မှ .navမပါဝင်ပါ ။ .activeအောက်ဖော်ပြပါ ဥပမာများတွင် ဤအတန်းသည် အထူးစတိုင်လ်ကို မဖြစ်ပေါ်စေကြောင်း သက်သေပြရန် အဓိကအားဖြင့် အတန်းပါဝင်သည်။

လက်ရှိစာမျက်နှာအတွက် တန်ဖိုးကို အသုံးပြု၍ သို့မဟုတ် အစုတစ်ခုအတွင်းရှိ လက်ရှိအရာအတွက် aria-currentရည်ညွှန်းချက်အား အသုံးပြု၍ တက်ကြွသောအခြေအနေအား ပံ့ပိုးပေးသည့်နည်းပညာများသို့ ပေးပို့ ပါ။pagetrue

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

အတန်းများကို တစ်လျှောက်လုံးအသုံးပြုထားသောကြောင့် သင်၏မှတ်စုသည် အလွန်လိုက်လျောညီထွေရှိနိုင်ပါသည်။ သင့်ပစ္စည်းများ၏အစီအစဥ်သည် အရေးကြီးပါက သို့မဟုတ် သင့်ကိုယ်ပိုင် ဒြပ်စင်တစ်ခု ဖြင့် လှိမ့်မည်ဆိုပါက <ul>အထက်ဖော်ပြပါအတိုင်း အသုံးပြု ပါ။ အသုံးပြုမှုများ ကြောင့် ၊ nav လင့်ခ်များသည် nav items များနှင့်တူညီသော်လည်း အပို markup မပါရှိပါ။<ol><nav>.navdisplay: flex

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

ရနိုင်သောစတိုင်များ

.navပြုပြင်မွမ်းမံမှုများနှင့် အသုံးဝင်မှုများဖြင့် အစိတ်အပိုင်း ၏စတိုင်ကို ပြောင်းလဲ ပါ။ လိုအပ်သလို ရောစပ်ပြီး လိုက်ဖက်ပါ သို့မဟုတ် သင့်ကိုယ်ပိုင် တည်ဆောက်ပါ။

အလျားလိုက် ချိန်ညှိခြင်း။

flexbox utilities ဖြင့် သင့် nav ၏ အလျားလိုက် ချိန်ညှိမှုကို ပြောင်းလဲပါ ။ မူရင်းအားဖြင့်၊ navs များကို ဘယ်သို့ ညှိထားသည်၊ သို့သော် ၎င်းတို့ကို ဗဟို သို့မဟုတ် ညာဘက်သို့ ချိန်ညှိရန် အလွယ်တကူ ပြောင်းနိုင်သည်။

ဗဟိုပြုသည် .justify-content-center-

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

နှင့် ညာဘက်ညှိ .justify-content-endထားသည်

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

ဒေါင်လိုက်

Flex item direction ကို .flex-columnutility ဖြင့် ပြောင်းလဲခြင်းဖြင့် သင်၏ လမ်းညွှန်မှုကို စုစည်းပါ။ အချို့သော viewports တွင် ၎င်းတို့ကို နေရာချရန် လိုအပ်သော်လည်း အခြားမဟုတ်ပေ။ တုံ့ပြန်မှုရှိသောဗားရှင်းများကို အသုံးပြုပါ (ဥပမာ၊ .flex-sm-column)။

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

အမြဲလိုလို၊ ဒေါင်လိုက်လမ်းကြောင်းပြခြင်းကို <ul>s မပါဘဲလည်း ဖြစ်နိုင်သည်။

<nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

တက်ဘ်များ

အထက်မှ အခြေခံ nav ကို ယူကာ တက်ဘ .nav-tabs်လုပ်ထားသော အင်တာဖေ့စ်ကို ထုတ်လုပ်ရန် အတန်းကို ပေါင်းထည့်သည်။ ကျွန်ုပ်တို့၏ tab JavaScript ပလပ်အင် ဖြင့် တက်ဘ်စားနိုင်သော ဒေသများကို ဖန်တီးရန် ၎င်းတို့ကို အသုံးပြုပါ ။

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

ဆေးပြား

အဲဒီ HTML ကိုပဲ ယူပါ၊ ဒါပေမယ့် .nav-pillsအဲဒီအစား သုံးပါ။

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

ဖြည့်စွက်ပြီး တရားမျှတပါ။

ပြုပြင်မွမ်းမံမှု .navအတန်းနှစ်ခုအနက်မှ ရရှိနိုင်သော အကျယ်ကို အပြည့်အ၀ ချဲ့ထွင်ရန် သင့်၏ အကြောင်းအရာများကို တွန်းအားပေးပါ။ ရနိုင်သောနေရာအားလုံးကို သင့် .nav-items ဖြင့် အချိုးကျဖြည့်ရန်၊ အသုံးပြု .nav-fillပါ။ အလျားလိုက် အာကာသအားလုံးကို သိမ်းပိုက်ထားကြောင်း သတိပြုပါ၊ သို့သော် လမ်းကြောင်းတစ်ခုစီတိုင်းတွင် တူညီသောအကျယ်ရှိမည်မဟုတ်ပါ။

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

-based navigation ကိုအသုံးပြုသည့်အခါ ၊ စတိုင် ဒြပ်စင် များအတွက် သာ လိုအပ်သောကြောင့် <nav>သင်သည် ဘေးကင်းစွာ ချန်လှပ် နိုင်ပါသည်။.nav-item.nav-link<a>

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

အနံညီသောဒြပ်စင်များအတွက် အသုံးပြု .nav-justifiedပါ။ အလျားလိုက် နေရာအားလုံးကို nav လင့်ခ်များဖြင့် သိမ်းပိုက်ထားမည်ဖြစ်သော်လည်း အထက်ဖော်ပြပါများနှင့်မတူဘဲ၊ .nav-fillnav item တိုင်းသည် တူညီသော width ဖြစ်ပါမည်။

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

-based navigation .nav-fillကိုအသုံးပြုသောဥပမာ နှင့်ဆင်တူသည် ။<nav>

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Flex utilities များဖြင့် အလုပ်လုပ်ခြင်း။

တုံ့ပြန်မှုရှိသော nav အမျိုးအစားများကို လိုအပ်ပါက၊ flexbox utilities စီးရီးများကို အသုံးပြုရန် စဉ်းစား ပါ။ ပိုစကားများသော်လည်း၊ ဤအသုံးအဆောင်များသည် တုံ့ပြန်မှုရှိသော breakpoints များတစ်လျှောက် စိတ်ကြိုက်ပြင်ဆင်မှုကို ပေးဆောင်သည်။ အောက်ဖော်ပြပါ ဥပမာတွင်၊ ကျွန်ုပ်တို့၏ nav သည် အနိမ့်ဆုံး breakpoint တွင် stacked လုပ်ပြီး သေးငယ်သော breakpoint မှစတင်၍ ရရှိနိုင်သော width ကိုဖြည့်ပေးသော အလျားလိုက် အပြင်အဆင်သို့ လိုက်လျောညီထွေဖြစ်အောင် ပြောင်းလဲပါမည်။

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

သုံးစွဲနိုင်မှုနှင့် ပတ်သက်

အကယ်၍ သင်သည် navigation bar တစ်ခုပေးဆောင်ရန် navs ကိုအသုံးပြုနေပါက ၊ role="navigation"ယုတ္တိအရှိဆုံး ပင်မကွန်တိန်နာ ထဲသို့ တစ်ခုထည့်ပါ <ul>သို့မဟုတ် <nav>လမ်းကြောင်းပြမှုတစ်ခုလုံးပတ်လည်တွင် ဒြပ်စင်တစ်ခုကို ပတ်ထားသည်။ <ul>အထောက်အကူနည်းပညာများဖြင့် အမှန်တကယ်စာရင်းအဖြစ် ကြေညာခြင်းမှ တားဆီးနိုင်သောကြောင့် ၎င်းသည် ၎င်း၏ အခန်းကဏ္ဍကို ကိုယ်တိုင်မထည့်ပါနှင့် ။

.nav-tabsအတန်း နှင့် တဘ်များအဖြစ် အမြင်အာရုံဖြင့် ပုံစံချထားသော်လည်း လမ်းကြောင်းပြဘားများကို ၊ သို့မဟုတ် ရည်ညွှန်း ချက်များကို မ ပေး သင့်ကြောင်း သတိပြုပါ။ WAI ARIA Authoring Practices တွင်ဖော်ပြထားသည့်အတိုင်း ၎င်းတို့သည် ပြောင်းလဲနေသော တက်ဘ်လုပ်ထားသော အင်တာဖေ့စ်များအတွက်သာ သင့်လျော် ပါသည်။ ဥပမာတစ်ခုအတွက် ဤကဏ္ဍရှိ dynamic တက်ဘ်လုပ်ထားသော အင်တာဖေ့စ်များအတွက် JavaScript အပြုအမူ ကို ကြည့်ပါ ။ ကျွန်ုပ်တို့၏ JavaScript သည် တက်ကြွသောတက်ဘ်တွင် ထည့်သွင်းခြင်းဖြင့် ရွေးချယ်ထားသောအခြေအနေကို ကိုင်တွယ်ပေးသောကြောင့် ရည်ညွှန်းချက်သည် တက်ကြွသောတက်ဘ်မျက်နှာပြင်များတွင် မလိုအပ် ပါ ။role="tablist"role="tab"role="tabpanel" aria-currentaria-selected="true"

dropdowns များကိုအသုံးပြုခြင်း။

အနည်းငယ်ပိုသော HTML နှင့် dropdowns JavaScript ပလပ်အင် များဖြင့် dropdown menus များကိုထည့်ပါ ။

dropdowns ပါသော တဘ်များ

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

dropdowns နှင့်အတူဆေးပြား

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

ဆူး

ကိန်းရှင်များ

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    $link-color;
$nav-link-hover-color:              $link-hover-color;
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

JavaScript အပြုအမူ

bootstrap.jsဒေသတွင်းအကြောင်းအရာ၏ တက်ဘ်စားနိုင်သော အကန့်များကို ဖန်တီးရန်အတွက် ကျွန်ုပ်တို့၏ လမ်းညွှန်မှုဆိုင်ရာ တက်ဘ်များနှင့် ဆေးပြားများကို တိုးချဲ့ရန်အတွက် တဘ် JavaScript ပလပ်အင်ကို အသုံးပြုပါ—၎င်းကို တစ်ဦးချင်း သို့မဟုတ် စုစည်းထားသော ဖိုင်မှတစ်ဆင့်—ထည့်သွင်း ပါ။

WAI ARIA Authoring Practices တွင်ဖော်ပြထားသည့်အတိုင်း Dynamic tabbed interfaces များသည် ၎င်းတို့၏ဖွဲ့စည်းပုံ၊ လုပ်ဆောင်နိုင်စွမ်းနှင့် လက်ရှိအခြေအနေ (ဖန်သားပြင်စာဖတ်သူများကဲ့သို့) အသုံးပြုသူများထံ ပေးပို့နိုင်ရန် role="tablist", role="tab", role="tabpanel", နှင့် အပို အရည်အချင်းများ လိုအပ်ပါသည် ။ အကောင်းဆုံးအလေ့အကျင့်တစ်ခုအနေဖြင့် ၊ ဤအရာများသည် စာမျက်နှာအသစ် သို့မဟုတ် တည်နေရာသို့ သွားရန်လင့်ခ်များထက် ရွေ့လျားပြောင်းလဲမှုကိုဖြစ်ပေါ်စေသည့် ထိန်းချုပ်မှုများဖြစ်သောကြောင့် တဘ်များအတွက် အစိတ်အပိုင်းများ aria-ကို အသုံးပြုရန် အကြံပြုအပ်ပါသည် ။<button>

ဒိုင်းနမစ်တက်ဘ်လုပ်ထားသည့် အင်တာ ဖေ့ စ်များသည် ဒေါင်းလုပ်မီနူးများ မ ပါဝင်သင့်ပါ၊ ၎င်းသည် အသုံးပြုနိုင်စွမ်းနှင့် သုံးစွဲနိုင်မှုပြဿနာနှစ်ခုလုံးကို ဖြစ်စေသောကြောင့် သတိပြုပါ။ အသုံးပြုနိုင်မှု ရှုထောင့်မှနေ၍ လက်ရှိပြသနေသော တက်ဘ်၏ အစပျိုးဒြပ်စင်ကို ချက်ချင်း မမြင်နိုင်သောကြောင့် (၎င်းသည် ပိတ်ထားသော dropdown menu အတွင်းရှိ) ကြောင့် စိတ်ရှုပ်ထွေးမှုကို ဖြစ်စေနိုင်သည်။ အများသုံးစွဲနိုင်မှု ရှုထောင့်မှကြည့်လျှင် ဤတည်ဆောက်ပုံအမျိုးအစားကို စံ WAI ARIA ပုံစံသို့ ပုံဖော်ရန် လောလောဆယ်တွင် ၎င်းကို အထောက်အကူနည်းပညာအသုံးပြုသူများ အလွယ်တကူ နားလည်နိုင်မည်မဟုတ်ဟု ဆိုလိုသည်။

ဤအရာသည် ပင်မတဘ်၏ ဆက်စပ်အကြောင်းအရာ အချို့နေရာယူထားသည့် အကြောင်းအရာဖြစ်သည်။ အခြားတဘ်ကို နှိပ်ခြင်းဖြင့် ဤတစ်ခု၏ မြင်နိုင်စွမ်းကို နောက်တစ်ခုအတွက် ပြောင်းသွားပါမည်။ အကြောင်းအရာ မြင်နိုင်စွမ်းနှင့် ပုံစံကို ထိန်းချုပ်ရန် tab JavaScript သည် အတန်းများကို ဖလှယ်သည်။ ၎င်းကို တက်ဘ်များ၊ ဆေးများ၊ နှင့် အခြား .nav-powered navigation တို့ဖြင့် အသုံးပြုနိုင်သည်။

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

သင့်လိုအပ်ချက်များနှင့် ကိုက်ညီစေရန်၊ ၎င်းသည် <ul>အထက်တွင်ပြထားသည့်အတိုင်း -based markup နှင့် အလုပ်လုပ်သည်၊ သို့မဟုတ် မထင်သလို "roll your own" markup ဖြင့် အလုပ်လုပ်ပါသည်။ သင်အသုံးပြုနေပါ က၊ ၎င်းသည် ဒြပ်စင်၏ မူလအခန်းကဏ္ဍကို လမ်းညွှန်မှုမှတ်တိုင်တစ်ခုအဖြစ် လွှမ်းမိုးနိုင်သောကြောင့် ၎င်းတွင် တိုက်ရိုက် <nav>မထည့်သင့်သည် ကို သတိပြုပါ။ role="tablist"ယင်းအစား၊ အခြားဒြပ်စင်တစ်ခုသို့ ပြောင်းပါ (အောက်ပါဥပမာတွင်၊ ရိုးရှင်းသော <div>) သို့ပြောင်းပြီး <nav>၎င်းကို ပတ်ပတ်လည်တွင် ပတ်ထားသည်။

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

tabs plugin သည် ဆေးပြားများနှင့်လည်း အလုပ်လုပ်ပါသည်။

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </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">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

ဒေါင်လိုက်ဆေးပြားနှင့်။

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
    <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
    <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </div>
  <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">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
  </div>
</div>

ဒေတာ attribute ကိုအသုံးပြုခြင်း။

data-bs-toggle="tab"JavaScript ကို ရိုးရိုးရှင်းရှင်း သို့မဟုတ် data-bs-toggle="pill"ဒြပ်စင်တစ်ခုပေါ်တွင် သတ်မှတ်ခြင်းဖြင့် သို့မဟုတ် ဆေးပြားလမ်းညွှန်ခြင်းအား သင်ဖွင့်နိုင်သည် ။ ဤဒေတာ attribute ကိုဖွင့် .nav-tabsသို့မဟုတ် အသုံးပြု .nav-pillsပါ။

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

JavaScript မှတဆင့်

JavaScript မှတဆင့် tabbable တက်ဘလက်များကိုဖွင့်ပါ (တက်ဘ်တစ်ခုစီသည် တစ်ဦးချင်း အသက်သွင်းရန် လိုအပ်သည်-

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})

တစ်ဘ်ချင်းစီကို နည်းလမ်းများစွာဖြင့် အသက်သွင်းနိုင်သည်-

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

အရောင်မှိန်စေတယ်။

တဘ်များ မှိန် .fadeသွားစေရန် တစ်ခုစီသို့ ထည့်ပါ .tab-pane။ ပထမတဘ်အက .showန့်သည် ကနဦးအကြောင်းအရာကို မြင်နိုင်စေရန်လည်း လိုအပ်သည်။

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

နည်းလမ်းများ

Asynchronous နည်းလမ်းများနှင့် အသွင်ကူးပြောင်းမှုများ

API နည်းလမ်းအားလုံးသည် အ ညီအမျှ ဖြစ်ပြီး အကူးအပြောင်း တစ်ခု စတင်သည် ။ အကူးအပြောင်းစတင်သည်နှင့် မပြီးဆုံးမီတွင် ၎င်းတို့သည် ခေါ်ဆိုသူထံသို့ ပြန်သွားကြသည် ။ ထို့အပြင်၊ transitioning component တစ်ခုပေါ်ရှိ method ခေါ်ဆိုမှုကို လျစ်လျူရှု ပါမည်။

နောက်ထပ်အချက်အလက်များအတွက် ကျွန်ုပ်တို့၏ JavaScript စာရွက်စာတမ်းကို ကြည့်ပါ ။

constructor

တက်ဘ်ဒြပ်စင်နှင့် အကြောင်းအရာကွန်တိန်နာကို အသက်သွင်းသည်။ တဘ် တွင် DOM ရှိ container node ကို ပစ်မှတ်ထားသည့် data-bs-targetလင့်ခ်၊ ရည်ညွှန်းချက်တစ်ခုကို အသုံးပြုလျှင် သို့မဟုတ် တစ်ခုခု ရှိသင့်သည်။href

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

<script>
  var firstTabEl = document.querySelector('#myTab li:last-child a')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

ရှိုး

ပေးထားသည့် တက်ဘ်ကို ရွေးပြီး ၎င်း၏ ဆက်စပ်အကန့်ကို ပြသည်။ ယခင်က ရွေးချယ်ထားသည့် အခြားတဘ်ကို ရွေးမထားဘဲ ၎င်း၏ဆက်စပ်အကန့်ကို ဝှက်ထားသည်။ တက်ဘ်အကန့်ကို အမှန်တကယ်မပြသမီ ခေါ်ဆိုသူထံ ပြန်သွားသည် (ဆိုလိုသည်မှာ shown.bs.tabပွဲမဖြစ်ပွားမီ)။

  var someTabTriggerEl = document.querySelector('#someTabTrigger')
  var tab = new bootstrap.Tab(someTabTriggerEl)

  tab.show()

စွန့်ပစ်ပါ။

အစိတ်အပိုင်းတစ်ခု၏ တက်ဘ်ကို ဖျက်ပါ။

getInstance

DOM ဒြပ်စင်နှင့် ဆက်စပ်နေသော တက်ဘ် စံနမူနာကို ရယူရန် ခွင့်ပြုသည့် Static နည်းလမ်း

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

DOM ဒြပ်စင်နှင့် ဆက်စပ်နေသည့် တက်ဘ် စံနမူနာကို ရယူရန် ခွင့်ပြုသည့် ပုံသေနည်းလမ်း၊ သို့မဟုတ် ၎င်းကို ကနဦး မလုပ်ဆောင်ပါက အသစ်တစ်ခု ဖန်တီးပါ။

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

အဲ့ဒါနဲ့

တက်ဘ်အသစ်တစ်ခုကို ပြသသောအခါ၊ အဖြစ်အပျက်များသည် အောက်ပါအစီအစဉ်အတိုင်း မီးလောင်သွားသည်-

hide.bs.tab(လက်ရှိသုံးနေသည့် တက်ဘ်ပေါ်တွင်)
show.bs.tab(ပြသမည့် tab တွင်)
hidden.bs.tab(ယခင်တက်ကြွသောတက်ဘ်တွင်၊ hide.bs.tabအစီအစဉ်နှင့်တူသည်)
shown.bs.tab(အသစ်စက်စက်ပြသထားသည့် တက်ဘ်ပေါ်တွင်၊ show.bs.tabဖြစ်ရပ်အတွက်နှင့် တူညီသည်)

မည်သည့်တက်ဘ်မှ အသက်ဝင်နေပြီးဖြစ်ပါက၊ hide.bs.tabနှင့် hidden.bs.tabအစီအစဉ်များကို အလုပ်ဖြုတ်မည်မဟုတ်ပါ။

ပွဲအမျိုးအစား	ဖော်ပြချက်
`show.bs.tab`	ဤဖြစ်ရပ်သည် တက်ဘ်ရှိုးတွင် စတင်သည်၊ သို့သော် တက်ဘ်အသစ်ကို မပြသမီ။ တက်ကြွသောတက်ဘ်နှင့် ယခင်အသုံးပြုနေသော တက်ဘ် (ရနိုင်လျှင်) အသီးသီး ပစ်မှတ် `event.target`ကို အသုံးပြုပြီး ပစ်မှတ်ထားရန်။`event.relatedTarget`
`shown.bs.tab`	တက်ဘ်တစ်ခုကို ပြသပြီးနောက် ဤဖြစ်ရပ်သည် တက်ဘ်ရှိုးတွင် စတင်သည်။ တက်ကြွသောတက်ဘ်နှင့် ယခင်အသုံးပြုနေသော တက်ဘ် (ရနိုင်လျှင်) အသီးသီး ပစ်မှတ် `event.target`ကို အသုံးပြုပြီး ပစ်မှတ်ထားရန်။`event.relatedTarget`
`hide.bs.tab`	တက်ဘ်အသစ်တစ်ခုကို ပြသသည့်အခါ ဤဖြစ်ရပ်သည် မီးလောင်သွားသည် (ထို့ကြောင့် ယခင်အသုံးပြုနေသည့် တက်ဘ်ကို ဖျောက်ထားရပါမည်)။ လက်ရှိ အသုံးပြု နေသည့် တက်ဘ်နှင့် မကြာမီ-စတော့မည့်-အသက်ဝင်မည့် တက်ဘ်အသစ်ကို အသီးသီး ပစ်မှတ်ထားပြီး `event.target`အသုံးပြု ပါ။`event.relatedTarget`
`hidden.bs.tab`	တက်ဘ်အသစ်တစ်ခုကို ပြသပြီးနောက် ဤဖြစ်ရပ်သည် မီးလောင်သွားသည် (ထို့ကြောင့် ယခင်အသုံးပြုနေသည့် တက်ဘ်ကို ဝှက်ထားသည်)။ ယခင် အသုံးပြု `event.target`နေ `event.relatedTarget`သည့် တက်ဘ်နှင့် တက်ကြွသောတက်ဘ်အသစ်ကို အသီးသီးပစ်မှတ်ထားရန် အသုံးပြုပါ။

var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})