Navs እና ትሮች

የ Bootstrapን የተካተቱ የአሰሳ ክፍሎችን እንዴት መጠቀም እንደሚቻል ሰነዶች እና ምሳሌዎች።

በዚህ ገጽ ላይ

ቤዝ የባህር ኃይል

ዳሰሳ በBootstrap ውስጥ ይገኛል አጠቃላይ ምልክት ማድረጊያ እና ቅጦች፣ ከመሠረታዊ .navክፍል እስከ ንቁ እና አካል ጉዳተኞች ግዛቶች። በእያንዳንዱ ዘይቤ መካከል ለመቀያየር የመቀየሪያ ክፍሎችን ይቀያይሩ።

የመሠረት .navክፍሉ የተገነባው በ flexbox ነው እና ሁሉንም አይነት የአሰሳ ክፍሎችን ለመገንባት ጠንካራ መሰረት ይሰጣል. አንዳንድ የቅጥ መሻሪያዎችን (ከዝርዝሮች ጋር ለመስራት)፣ አንዳንድ ለትልቅ ተወዳጅ አካባቢዎች አንዳንድ ማገናኛ እና መሰረታዊ የአካል ጉዳተኛ የቅጥ አሰራርን ያካትታል።

የመሠረቱ አካል ማንኛውንም ግዛት .navአያካትትም . .activeየሚከተሉት ምሳሌዎች ክፍሉን ያካትታሉ፣ በዋናነት ይህ የተለየ ክፍል ምንም አይነት ልዩ የቅጥ አሰራርን እንደማይፈጥር ለማሳየት።

ንቁውን ሁኔታ ለረዳት ቴክኖሎጂዎች ለማስተላለፍ፣ አይነታውን ይጠቀሙ aria-current— pageለአሁኑ ገጽ ዋጋን በመጠቀም ወይም trueበስብስብ ውስጥ ላለው የአሁኑ ንጥል።

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>የእቃዎችዎ ቅደም ተከተል አስፈላጊ ከሆነ እንደ ከላይ ያሉትን ይጠቀሙ <ol>ወይም የእራስዎን በአንድ <nav>አካል ይንከባለሉ። ምክንያቱም .navአጠቃቀሞች display: 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በመቀየሪያዎች እና መገልገያዎች የ s አካልን ዘይቤ ይለውጡ ። እንደ አስፈላጊነቱ ይደባለቁ እና ያዛምዱ ወይም የራስዎን ይገንቡ።

አግድም አሰላለፍ

የመርከብዎን አግድም አሰላለፍ በፍሌክስቦክስ መገልገያዎች ይለውጡ ። በነባሪ፣ ናቭስ በግራ የተሰለፉ ናቸው፣ ነገር ግን በቀላሉ ወደ መሃል ወይም ወደ ቀኝ የተሰለፉ ሊለውጧቸው ይችላሉ።

ያማከለ በ .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-column። በአንዳንድ የእይታ ቦታዎች ላይ መደርደር ይፈልጋሉ ነገር ግን ሌሎች አይደሉም? ምላሽ ሰጪ ስሪቶችን ተጠቀም (ለምሳሌ .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-tabsየታብድ በይነገጽ ለመፍጠር ክፍሉን ይጨምራል። በእኛ ትር ጃቫስክሪፕት ተሰኪ ሊታዩ የሚችሉ ክልሎችን ለመፍጠር ተጠቀምባቸው ።

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>

እንክብሎች

ያንኑ ኤችቲኤምኤል ይውሰዱ፣ ግን .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-itemሁሉንም የሚገኘውን ቦታ በእርስዎ s ለመሙላት ፣ ተጠቀም .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>

መሰረት ያደረገ አሰሳን ሲጠቀሙ ለቅጥ አካላት ብቻ እንደሚያስፈልግ <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 links ተይዟል፣ ግን .nav-fillከላይ ካለው በተቃራኒ እያንዳንዱ የባህር ኃይል ንጥል ነገር ተመሳሳይ ስፋት ይኖረዋል።

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 አሰሳ .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>

ከተለዋዋጭ መገልገያዎች ጋር በመስራት ላይ

ምላሽ ሰጪ የባህር ኃይል ልዩነቶች ከፈለጉ፣ ተከታታይ የፍሌክስቦክስ መገልገያዎችን ለመጠቀም ያስቡበት ። ብዙ የቃላት አነጋገር ሲሆኑ፣ እነዚህ መገልገያዎች ምላሽ በሚሰጡ መግቻ ነጥቦች ላይ የበለጠ ማበጀትን ያቀርባሉ። ከዚህ በታች ባለው ምሳሌ የኛን ናቭ በዝቅተኛው መግቻ ነጥብ ላይ ይደረደራል፣ ከዚያም ከትንሽ መስበር ነጥብ ጀምሮ ያለውን ስፋት የሚሞላውን አግድም አቀማመጥ ያስተካክላል።

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>

ተደራሽነትን በተመለከተ

የአሰሳ አሞሌን ለማቅረብ ናቪስ እየተጠቀሙ ከሆነ role="navigation"በጣም ምክንያታዊ በሆነው የወላጅ መያዣ ላይ መጨመርዎን ያረጋግጡ <ul>ወይም <nav>በአጠቃላይ አሰሳ ዙሪያ አንድ ኤለመንት ይጠቅልሉ። <ul>በረዳት ቴክኖሎጂዎች እንደ ትክክለኛ ዝርዝር እንዳይታወቅ ስለሚከለክለው ሚናውን በራሱ ላይ አይጨምሩ።

የአሰሳ አሞሌዎች፣ በምስላዊ መልኩ .nav-tabsከክፍል ጋር እንደ ትሮች ቢዘጋጁም፣ መሰጠት እንደሌለባቸው አስተውል ፣role="tablist" ወይም role="tab"ባህሪያት role="tabpanel"። እነዚህ በ ARIA የደራሲ ልምምዶች መመሪያ ትሮች ጥለት ላይ እንደተገለጸው ለተለዋዋጭ የታብ በይነገጾች ብቻ ተገቢ ናቸው ። ለምሳሌ በዚህ ክፍል ውስጥ ለተለዋዋጭ የታብ በይነገጾች የጃቫስክሪፕት ባህሪን ይመልከቱ ። የእኛ ጃቫ ስክሪፕት በገባሪው ትር ላይ aria-currentበማከል የተመረጠውን ሁኔታ ስለሚያስተናግድ ባህሪው በተለዋዋጭ የታብ በይነገጾች ላይ አስፈላጊ አይደለም ።aria-selected="true"

ተቆልቋይዎችን በመጠቀም

ተቆልቋይ ሜኑዎችን ከትንሽ ተጨማሪ ኤችቲኤምኤል እና ተቆልቋዮቹ ጃቫስክሪፕት ፕለጊን ያክሉ ።

ተቆልቋይ ያላቸው ትሮች

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>

ተቆልቋይ ያላቸው እንክብሎች

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 ተለዋዋጮች አካሄድ አካል፣ ናቭስ አሁን በ፣ እና ለተሻሻለ ቅጽበታዊ ማበጀት የአካባቢያዊ CSS .navተለዋዋጮችን .nav-tabsይጠቀማሉ .nav-pills። የCSS ተለዋዋጮች እሴቶች በ 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;

የጃቫስክሪፕት ባህሪ

የጃቫ ስክሪፕት ፕለጊን ትርን ተጠቀም - በተናጥል ወይም bootstrap.jsበተጠናቀረ ፋይል ውስጥ - የአሰሳ ትሮችን እና እንክብሎችን ለማራዘም በአካባቢያዊ ይዘት ላይ ሊታዩ የሚችሉ ፓነሎችን ለመፍጠር።

ይህ አንዳንድ ቦታ ያዥ የ Home ትር ተዛማጅ ይዘት ነው። ሌላ ትር ጠቅ ማድረግ የዚህን ታይነት ለቀጣዩ ይለውጠዋል። ትሩ JavaScript የይዘቱን ታይነት እና አጻጻፍ ለመቆጣጠር ክፍሎችን ይለዋወጣል። .navበትሮች፣ ክኒኖች እና በማንኛውም ሌላ ኃይል ያለው አሰሳ ሊጠቀሙበት ይችላሉ ።

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 ወይም በማንኛውም የዘፈቀደ “የራስዎን ያንከባልልልናል” ማርክ ይሰራል። እየተጠቀሙ ከሆነ በቀጥታ ወደ እሱ <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>

የታብ ፕለጊን እንዲሁ ከጡባዊዎች ጋር ይሰራል።

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 የአጻጻፍ ልምምዶች መመሪያ ትሮች ንድፍ ላይ እንደተገለጸው፣ አወቃቀራቸውን ፣ ተግባራቸውን role="tablist"እና የአሁን ሁኔታቸውን ለረዳት ቴክኖሎጂዎች ተጠቃሚዎች (እንደ ስክሪን አንባቢዎች) ለማስተላለፍ ተጨማሪ ባህሪያትን ይፈልጋሉ። እንደ ምርጥ ልምምድ፣ ወደ አዲስ ገጽ ወይም አካባቢ የሚሄዱ አገናኞች ሳይሆን ተለዋዋጭ ለውጥ የሚያመጡ ቁጥጥሮች ስለሆኑ ለትሮች አባሎችን እንዲጠቀሙ እንመክራለን ።role="tab"role="tabpanel"aria-<button>

ከ ARIA የደራሲ ልምምዶች ንድፍ ጋር በመስማማት በአሁኑ ጊዜ ንቁ የሆነው ትር ብቻ የቁልፍ ሰሌዳ ትኩረት ይቀበላል። tabindex="-1"የጃቫስክሪፕት ፕለጊን ሲጀመር በሁሉም የቦዘኑ የትር ቁጥጥሮች ላይ ይዘጋጃል ። አሁን ያለው ንቁ ትር ትኩረት ካገኘ በኋላ የጠቋሚ ቁልፎቹ የቀደመውን/የሚቀጥለውን ትር ያነቁታል፣ ተሰኪው በዚህ መሰረትtabindex መንቀሳቀስን ይለውጣል ። ነገር ግን የጃቫ ስክሪፕት ፕለጊን የቁልፍ መስተጋብርን በሚመለከት በአግድም እና በአቀባዊ መካከል ያለውን ልዩነት እንደማይለይ ልብ ይበሉ፡ የትሩ ዝርዝር አቅጣጫ ምንም ይሁን ምን የላይ እና የግራ ጠቋሚው ወደ ቀዳሚው ትር ይሂዱ እና ታች እና ቀኝ ጠቋሚ ወደ ይሂዱ። የሚቀጥለው ትር.

በአጠቃላይ፣ የቁልፍ ሰሌዳ አሰሳን ለማመቻቸት፣ በትብ ፓነል ውስጥ ትርጉም ያለው ይዘት ያለው የመጀመሪያው አካል ቀድሞውንም ትኩረት የሚሰጥ ካልሆነ በስተቀር የትር ፓነሎችን ራሳቸው ትኩረት እንዲያደርጉ ይመከራል። የጃቫ ስክሪፕት ፕለጊን ይህንን ገጽታ ለመቆጣጠር አይሞክርም - አስፈላጊ ሆኖ ሲገኝ ፣ ምልክት ማድረጊያዎ ውስጥ በመጨመር የትር ፓነሎችዎን በግልፅ እንዲተኩሩ ማድረግ ያስፈልግዎታል tabindex="0"።

የትር ጃቫስክሪፕት ፕለጊን ተቆልቋይ ሜኑዎችን የያዙ የታብ በይነገጾችን አይደግፍም ምክንያቱም እነዚህ ሁለቱንም የአጠቃቀም እና የተደራሽነት ችግሮች ያስከትላሉ። ከአጠቃቀም አንፃር፣ አሁን የሚታየው የትር ቀስቅሴ አካል ወዲያውኑ አለመታየቱ (በዝግ ተቆልቋይ ሜኑ ውስጥ እንዳለ) ግራ መጋባትን ይፈጥራል። ከተደራሽነት አንፃር፣ በአሁኑ ጊዜ እንደዚህ አይነት ግንባታ ወደ መደበኛው የWAI ARIA ንድፍ ለማውጣት ምንም አስተዋይ መንገድ የለም፣ ይህም ማለት ለረዳት ቴክኖሎጂዎች ተጠቃሚዎች በቀላሉ ለመረዳት የማይቻል ነው።

የውሂብ ባህሪያትን መጠቀም

data-bs-toggle="tab"በቀላሉ በመግለጽ ወይም በኤለመንቱ ላይ ማንኛውንም ጃቫ ስክሪፕት ሳይጽፉ የትር ወይም የፒኒን ዳሰሳ ማግበር ይችላሉ data-bs-toggle="pill"። እነዚህን የውሂብ ባህሪያት በ ላይ .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>

በጃቫስክሪፕት በኩል

በጃቫስክሪፕት በኩል ሊታዩ የሚችሉ ትሮችን ያንቁ (እያንዳንዱ ትር በተናጥል መንቃት አለበት)

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>

ዘዴዎች

ያልተመሳሰሉ ዘዴዎች እና ሽግግሮች

ሁሉም የኤፒአይ ዘዴዎች ያልተመሳሰሉ ናቸው እና ሽግግር ይጀምራሉ ። ሽግግሩ እንደተጀመረ ግን ከማለቁ በፊት ወደ ደዋዩ ይመለሳሉ ። በተጨማሪም, በመሸጋገሪያ አካል ላይ የሚደረግ ዘዴ ጥሪ ችላ ይባላል .

ለበለጠ መረጃ የእኛን ጃቫስክሪፕት ሰነድ ይመልከቱ ።

ይዘትዎን እንደ ትር አባል ያገብራል።

ከግንባታው ጋር የትር ምሳሌ መፍጠር ይችላሉ፣ ለምሳሌ፡-

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

ዘዴ	መግለጫ
`dispose`	የአንድ ንጥረ ነገር ትርን ያጠፋል.
`getInstance`	ከ DOM ኤለመንት ጋር የተገናኘውን የትር ምሳሌ ለማግኘት የሚያስችል የማይንቀሳቀስ ዘዴ፣ እንደሚከተለው ሊጠቀሙበት ይችላሉ `bootstrap.Tab.getInstance(element)`።
`getOrCreateInstance`	ከDOM አባል ጋር የተገናኘ የትር ምሳሌን የሚመልስ ወይም ካልተጀመረ አዲስ የሚፈጥር የማይንቀሳቀስ ዘዴ። እንደሚከተለው ሊጠቀሙበት ይችላሉ `bootstrap.Tab.getOrCreateInstance(element)`:.
`show`	የተሰጠውን ትር ይመርጣል እና የተገናኘውን መቃን ያሳያል። ከዚህ ቀደም የተመረጠው ሌላ ማንኛውም ትር ያልተመረጠ ይሆናል እና ከእሱ ጋር የተያያዘው መቃን ይደበቃል። የትር መቃን በትክክል ከመታየቱ በፊት (ማለትም `shown.bs.tab`ክስተቱ ከመፈጠሩ በፊት) ወደ ደዋይ ይመለሳል።

ክስተቶች

አዲስ ትር ሲያሳዩ ክስተቶቹ በሚከተለው ቅደም ተከተል ይቃጠላሉ፡

hide.bs.tab(በአሁኑ ንቁ ትር ላይ)
show.bs.tab(በሚታየው ትር ላይ)
hidden.bs.tab(በቀደመው ንቁ ትር ላይ፣ hide.bs.tabከዝግጅቱ ጋር አንድ አይነት)
shown.bs.tab(በአዲሱ የነቃ ትር ላይ፣ show.bs.tabከዝግጅቱ ጋር አንድ አይነት)

ምንም ትር አስቀድሞ ገባሪ ካልሆነ፣ ከዚያ ክስተቶቹ hide.bs.tabእና hidden.bs.tabክስተቶቹ አይባረሩም።

የክስተት አይነት	መግለጫ
`hide.bs.tab`	ይህ ክስተት የሚቀጣጠለው አዲስ ትር በሚታይበት ጊዜ ነው (እና ስለዚህ የቀደመው ገቢር ትር መደበቅ አለበት)። እንደቅደም ተከተላቸው የአሁኑን ገቢር ትር እና አዲሱን በቅርቡ የሚሠራውን ትር ይጠቀሙ `event.target`እና ለማነጣጠር።`event.relatedTarget`
`hidden.bs.tab`	ይህ ክስተት የሚቀጣጠለው አዲስ ትር ከታየ በኋላ ነው (እና ስለዚህ ቀዳሚው ንቁ ትር ተደብቋል)። የቀደመውን ገባሪ ትር እና አዲሱን ገባሪ ትር በቅደም ተከተል ይጠቀሙ `event.target`እና `event.relatedTarget`ለማነጣጠር።
`show.bs.tab`	ይህ ክስተት በትር ትዕይንት ላይ ይቃጠላል፣ ነገር ግን አዲሱ ትር ከመታየቱ በፊት። `event.target`ገባሪውን ትር እና `event.relatedTarget`የቀደመውን ገባሪ ትር (ካለ) በቅደም ተከተል ዒላማ ለማድረግ ይጠቀሙ ።
`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
})