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

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

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

အခြေစိုက်စခန်း

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

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

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

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

html

<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">Disabled</a>
  </li>
</ul>

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

html

<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">Disabled</a>
</nav>

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

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

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

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

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

html

<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">Disabled</a>
  </li>
</ul>

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

html

<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">Disabled</a>
  </li>
</ul>

ဒေါင်လိုက်

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

html

<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">Disabled</a>
  </li>
</ul>

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

html

<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">Disabled</a>
</nav>

တက်ဘ်များ

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

html

<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">Disabled</a>
  </li>
</ul>

ဆေးပြား

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

html

<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">Disabled</a>
  </li>
</ul>

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

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

html

<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">Disabled</a>
  </li>
</ul>

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

html

<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">Disabled</a>
</nav>

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

html

<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">Disabled</a>
  </li>
</ul>

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

html

<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">Disabled</a>
</nav>

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

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

html

<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">Disabled</a>
</nav>

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

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

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

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

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

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

html

<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">Disabled</a>
  </li>
</ul>

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

html

<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">Disabled</a>
  </li>
</ul>

CSS

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

v5.2.0 တွင် ထည့်သွင်းထားသည်။

Bootstrap ၏ တိုးတက်ပြောင်းလဲနေသော CSS variables ချဉ်းကပ်မှု၏ တစ်စိတ်တစ်ပိုင်းအနေဖြင့်၊ ယခုအခါ navs သည် ဒေသခံ CSS variables များကို .nav၊ .nav-tabsနှင့် .nav-pillsအချိန်နှင့်တပြေးညီ ပိုမိုကောင်းမွန်အောင်ပြုလုပ်ရန်အတွက် အသုံးပြုပါသည်။ CSS variable များအတွက် တန်ဖိုးများကို Sass မှတစ်ဆင့် သတ်မှတ်ပေးထားသောကြောင့် Sass စိတ်ကြိုက်ပြင်ဆင်ခြင်းကိုလည်း ပံ့ပိုးထားပါသည်။

.navအခြေခံအတန်းတွင် -

  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: #{$nav-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

.nav-tabsပြုပြင်မွမ်းမံမှု အတန်းတွင် -

  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

.nav-pillsပြုပြင်မွမ်းမံမှု အတန်းတွင် -

  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

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

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    var(--#{$prefix}link-color);
$nav-link-hover-color:              var(--#{$prefix}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 ပလပ်အင်ကို အသုံးပြုပါ—၎င်းကို တစ်ဦးချင်း သို့မဟုတ် စုစည်းထားသော ဖိုင်မှတစ်ဆင့်—ထည့်သွင်း ပါ။

ဤအရာသည် ပင်မတဘ်၏ ဆက်စပ်အကြောင်းအရာ အချို့နေရာယူထားသည့် အကြောင်းအရာဖြစ်သည်။ အခြားတဘ်ကို နှိပ်ခြင်းဖြင့် ဤတစ်ခု၏ မြင်နိုင်စွမ်းကို နောက်တစ်ခုအတွက် ပြောင်းသွားပါမည်။ အကြောင်းအရာ မြင်နိုင်စွမ်းနှင့် ပုံစံကို ထိန်းချုပ်ရန် 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.

This is some placeholder content the Disabled tab's associated content.

<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-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
</div>

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

This is some placeholder content the Disabled tab's associated content.

<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>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

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

This is some placeholder content the Disabled tab's associated content.

<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>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

ဒေါင်လိုက်ဆေးပြားနှင့်။ aria-orientation="vertical"အကောင်းဆုံးကတော့ ဒေါင်လိုက် တက်ဘ်များအတွက်၊ တက်ဘ်စာရင်း ကွန်တိန်နာသို့ လည်း ထည့်သင့်သည် ။

This is some placeholder content the Disabled tab's associated content.

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-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

သုံးစွဲနိုင်မှု

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

ARIA Authoring Practices ပုံစံနှင့်အညီ၊ လက်ရှိအသုံးပြုနေသည့် တက်ဘ်မှသာလျှင် ကီးဘုတ်အာရုံစိုက်မှုကို ရရှိသည်။ tabindex="-1"JavaScript ပလပ်အင်ကို အစပြုသောအခါ၊ ၎င်းသည် မလှုပ်ရှားနိုင်သော တဘ်ထိန်းချုပ်မှုများအားလုံးကို သတ်မှတ်ပေးမည် ဖြစ်သည်။ လက်ရှိအသုံးပြုနေသည့်တက်ဘ်တွင် အာရုံစူးစိုက်မှုရှိသည်နှင့်တစ်ပြိုင်နက်၊ ပလပ်အင်သည် လှည့်ခြင်းအား လိုက်လျောညီထွေပြောင်းလဲခြင်းဖြင့်၊ ကာဆာသော့များသည် ယခင်/နောက်တက်ဘ်ကို အသက်သွင်း သည်tabindex ။ သို့ရာတွင်၊ ကာဆာကီး အပြန်အလှန်တုံ့ပြန်မှုများနှင့်ပတ်သက်လာသောအခါတွင် JavaScript ပလပ်အင်သည် အလျားလိုက်နှင့် ဒေါင်လိုက်တက်ဘ်စာရင်းများကြား မခွဲခြားကြောင်း သတိပြုပါ- တက်ဘ်စာရင်း၏ တိမ်းညွှတ်မှုကို မခွဲခြားဘဲ အပေါ် နှင့် ဘယ်ဘက် cursor နှစ်ခုစလုံးသည် ယခင်တက်ဘ်သို့သွားကာ၊ အောက် နှင့် ညာဘက် cursor သို့သွား နောက်တဘ်။

ယေဘုယျအားဖြင့်၊ ကီးဘုတ်လမ်းညွှန်မှုကို လွယ်ကူချောမွေ့စေရန်၊ တက်ဘ်ဘောင်များအတွင်း အဓိပ္ပါယ်ရှိသော အကြောင်းအရာများပါရှိသော ပထမဒြပ်အား အာရုံစူးစိုက်နိုင်ခြင်းမရှိပါက တဘ်အကန့်များကို ၎င်းတို့ကိုယ်တိုင်ပင် အာရုံစိုက်နိုင်စေရန် အကြံပြုထားသည်။ tabindex="0"JavaScript ပလပ်အင်သည် ဤရှုထောင့်ကို ကိုင်တွယ်ရန် မကြိုးစားပါ — သင့်လျော်ပါက၊ သင်၏ အမှတ်အသားတွင် ထည့်သွင်းခြင်းဖြင့် သင်၏ တက်ဘ်အကန့်များကို အထူးတလည် အာရုံစိုက်နိုင်အောင် ပြုလုပ်ရန် လိုအပ်ပါသည် ။

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

ဒေတာ 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" tabindex="0">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

JavaScript မှတဆင့်

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

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

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

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

const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
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" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

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

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

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

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

သင့်အကြောင်းအရာကို တဘ်ဒြပ်စင်အဖြစ် အသက်သွင်းပါ။

ဥပမာအားဖြင့် constructor ဖြင့် tab instance တစ်ခုကို ဖန်တီးနိုင်သည်။

const bsTab = new bootstrap.Tab('#myTab')

နည်းလမ်း	ဖော်ပြချက်
`dispose`	Destroys an element’s tab.
`getInstance`	Static method which allows you to get the tab instance associated with a DOM element, you can use it like this: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Static method which returns a tab instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. Returns to the caller before the tab pane has actually been shown (i.e. before the `shown.bs.tab` event occurs).

Events

When showing a new tab, the events fire in the following order:

hide.bs.tab (on the current active tab)
show.bs.tab (on the to-be-shown tab)
hidden.bs.tab (on the previous active tab, the same one as for the hide.bs.tab event)
shown.bs.tab (on the newly-active just-shown tab, the same one as for the show.bs.tab event)

If no tab was already active, then the hide.bs.tab and hidden.bs.tab events will not be fired.

Event type	Description
`hide.bs.tab`	This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively.
`hidden.bs.tab`	This event fires after a new tab is shown (and thus the previous active tab is hidden). Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively.
`show.bs.tab`	This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.
`shown.bs.tab`	တက်ဘ်တစ်ခုကို ပြသပြီးနောက် ဤဖြစ်ရပ်သည် တက်ဘ်ရှိုးတွင် စတင်သည်။ တက်ကြွသောတက်ဘ်နှင့် ယခင်အသုံးပြုနေသော တက်ဘ် (ရနိုင်လျှင်) အသီးသီး ပစ်မှတ် `event.target`ကို အသုံးပြုပြီး ပစ်မှတ်ထားရန်။`event.relatedTarget`

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