ናብ ቀንዲ ትሕዝቶ ዘልል ናብ docs navigation ዘልል
Check
in English

ናቭስን ትቦታትን

ሰነዳትን ኣብነታትን ከመይ ጌርካ ናይ Bootstrap ዝተሓወሶ ናይ ምድህሳስ ኣካላት ትጥቀመሉ።

ኣብዚ ገጽ

መሰረት ናቭ

ኣብ ቡትስትራፕ ዝርከብ ምድህሳስ ሓፈሻዊ ምልክትን ቅዲታትን ይካፈል፣ ካብ መሰረታዊ .navክፍሊ ክሳብ ንጡፍን ስንኩልን ኩነታት። ኣብ መንጎ ነፍሲ ወከፍ ቅዲ ንምቕያር ናይ መቐየሪ ክፍልታት ምቕያር።

እቲ መሰረታዊ .navክፍሊ ብፍሌክስቦክስ ዝተሃንጸ ኮይኑ ንኹሉ ዓይነት ናይ ምምራሕ ኣካላት ንምህናጽ ድልዱል መሰረት ዝህብ እዩ። ገለ ቅዲ ምግዳፍ (ምስ ዝርዝር ንምስራሕ)፣ ገለ ሊንክ ፓዲንግ ንዓበይቲ ሂት ከባቢታት፣ ከምኡ’ውን መሰረታዊ ስንክልና ዘለዎ ቅዲ የጠቓልል።

እቲ መሰረታዊ ባእታ ዝኾነ ይኹን ግዝኣት .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>ከምቲ ኣብ ላዕሊ ዝተጠቕሰ s ተጠቐም ፣ <ol>ቅደም ተኸተል ኣቑሑትካ ኣገዳሲ እንተኾይኑ፣ ወይ ድማ ናትካ ብሓደ <nav>ባእታ ምጥቕላል። ምኽንያቱ እቶም .navuses display: flex, እቶም nav links ከምቲ nav items ዝገብርዎ ባህሪ ኣለዎም፣ ግን ብዘይ እቲ ተወሳኺ ምልክት።

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>

ዝርከቡ ቅዲታት

ቅዲ .navs component ብ modifiersን utilitiesን ምቕያር። ከም ኣድላይነቱ ምትሕውዋስን ምትሕውዋስን፡ ወይ ድማ ናትካ ምህናጽ።

ልኡል ኣሰላልፋ

ናይ nav ናትካ ኣግማድ ኣሰላልፋ ብ flexbox utilities ቀይር ። ብነባሪ መልክዑ 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-columnነቲ ናይ ፍሌክስ ኣቕሓ ኣንፈት ምስቲ ዩቲሊቲ ብምቕያር ንናይ ምድህሳስካ ምድማር ። ኣብ ገለ 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-tabsclass ብምውሳኽ tabbed interface ይፈጥር። ብናይ ትብ ጃቫስክሪፕት ፕላግ- ኢንና ሰንጠረዥ ዝግበረሎም ዞባታት ንምፍጣር ተጠቐመሎም ።

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's ትሕዝቶታት ምሉእ ዝርከብ ስፍሓት ሓደ ካብ ክልተ መቐየሪ ክፍልታት ንምንዋሕ ኣገድድ። ንኹሉ እቲ ዘሎ ቦታ ብs ናትካ ብመጠኑ ንምምላእ .nav-item፡ ን ተጠቐም .nav-fill። ኩሉ ኣግማድ ቦታ ከም ዝተታሕዘ ኣስተውዕል፣ ግን ኩሉ nav ኣቕሓ ሓደ ዓይነት ስፍሓት የብሉን።

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 links ክሕዝ እዩ፣ ግን ዘይከምዚ ኣብ .nav-fillላዕሊ ዝተጠቕሰ ኩሉ nav item ሓደ ዓይነት ስፍሓት ክህልዎ እዩ።

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>

ምስ ፍሌክስ ዩቲሊቲስ ምስራሕ

ምላሽ ዝህቡ nav ፍልልያት እንተድኣ ደሊኻ፡ ተኸታታሊ ፍሌክስቦክስ ዩቲሊቲታት ምጥቃም ኣብ ግምት ኣእቱ ። ዝያዳ ቃላት ዝዛረቡ እኳ እንተኾኑ፡ እዞም ዩቲሊቲታት ኣብ መላእ ምላሽ ዝህቡ ነጥብታት ዝዓበየ ምምዕርራይ የቕርቡ። ኣብዚ ኣብ ታሕቲ ዘሎ ኣብነት፡ 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>

ተበጻሕነት ብዝምልከት።

ናይ ምድህሳስ ባር ንምሃብ navs ትጥቀም እንተኾንካ role="navigation"፡ ኣብቲ ኣዝዩ ስነ-መጐታዊ ወላዲ መትሓዚ ናይቲ ምውሳኽካ ኣረጋግጽ፡ ወይ ድማ ኣብ ዙርያ ምሉእ ምድህሳስ <ul>ሓደ ባእታ ምጥቕላል ። እዚ ብተሓጋገዝቲ ቴክኖሎጂታት ከም ጭቡጥ ዝርዝር ከይግለጽ ስለ ዝኽልክል <nav>፡ ነቲ ተራ ኣብቲ ንባዕሉ ኣይትውሰኾ።<ul>

ኣስተውዕል፡ ናይ ምድህሳስ ባር፡ ዋላ ብዓይኒ ከም ትቦታት ምስቲ .nav-tabsክፍሊ ቅዲ እንተተገይሩ ፡ ፡ ወይ ባህርያት ክወሃብ የብሉን ። እዚኦም ንዳይናሚክ ትብ ዘለዎም መተሓላለፍቲ ጥራይ እዮም ዝምጥኑ፣ ከምቲ ኣብ ARIA Authoring Practices Guide tabs pattern ዝተገልጸ ። ንኣብነት ኣብዚ ክፍሊ ንዳይናሚክ ትብ ዘለዎም መተሓላለፍቲ ባህሪ ጃቫስክሪፕት ርአ ። ጃቫስክሪፕትና ኣብቲ ንጡፍ ትብ ብምውሳኽ ነቲ ዝተመርጸ ኩነታት ስለ ዝሕዞ እቲ ባህሪ ኣብ ዳይናሚክ ትብ ዘለዎም መተሓላለፍቲ ኣድላዪ ኣይኮነን።role="tablist"role="tab"role="tabpanel"aria-currentaria-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>

ሲኤስኤስ

ተለዋዋጢ ረቛሒታት

ኣብ v5.2.0 ተወሰኸ

ከም ኣካል ናይቲ Bootstrap ዝምዕብል ዘሎ CSS ተለዋዋጢ ኣቀራርባ፡ navs ሕጂ local CSS variables ኣብ .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};

ሳስ ተለዋዋጢ ረቛሒታት

$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 tab’s ተዛማዲ ትሕዝቶ እዩ። ካልእ ትብ ምጥዋቕ ርኡይነት ናይዚ ሓደ ንዝቕጽል ይቕይሮ። እቲ ትብ ጃቫስክሪፕት ክፍልታት ይለዋወጥ ነቲ ትሕዝቶ ርኡይነትን ቅዲን ይቆጻጸር። .navምስ ትቦታት፡ ከኒናታትን ዝኾነ ካልእ -ዝሰርሕ ናቪጌሽንን ክትጥቀመሉ ትኽእል ኢኻ ።

እዚ ገለ ናይ ቦታ ትሕዝቶ ናይቲ ፕሮፋይል ትብ ተዛማዲ ትሕዝቶ እዩ። ካልእ ትብ ምጥዋቕ ርኡይነት ናይዚ ሓደ ንዝቕጽል ይቕይሮ። እቲ ትብ ጃቫስክሪፕት ክፍልታት ይለዋወጥ ነቲ ትሕዝቶ ርኡይነትን ቅዲን ይቆጻጸር። .navምስ ትቦታት፡ ከኒናታትን ዝኾነ ካልእ -ዝሰርሕ ናቪጌሽንን ክትጥቀመሉ ትኽእል ኢኻ ።

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>ኣብ ዙርያኡ ጠቕልሎ።

<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 ምስ ከኒናታት እውን ይሰርሕ እዩ።

እዚ ገለ ናይ ቦታ ትሕዝቶ ናይቲ Home tab’s ተዛማዲ ትሕዝቶ እዩ። ካልእ ትብ ምጥዋቕ ርኡይነት ናይዚ ሓደ ንዝቕጽል ይቕይሮ። እቲ ትብ ጃቫስክሪፕት ክፍልታት ይለዋወጥ ነቲ ትሕዝቶ ርኡይነትን ቅዲን ይቆጻጸር። .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-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"ብዝበለጸ ንቐጥታዊ ትቦታት ፡ ኣብቲ ናይ ትብ ዝርዝር መትሓዚ እውን ክትውስኽ ኣለካ።

እዚ ገለ ናይ ቦታ ትሕዝቶ ናይቲ Home tab’s ተዛማዲ ትሕዝቶ እዩ። ካልእ ትብ ምጥዋቕ ርኡይነት ናይዚ ሓደ ንዝቕጽል ይቕይሮ። እቲ ትብ ጃቫስክሪፕት ክፍልታት ይለዋወጥ ነቲ ትሕዝቶ ርኡይነትን ቅዲን ይቆጻጸር። .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 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 tabs pattern ዝተገልጸ ፡ ኣቃውምኦም፡ ተግባራቶምን ህሉው ኩነታቶምን ንተጠቀምቲ ሓገዝቲ ቴክኖሎጂታት (ከም ስክሪን ኣንበብቲ) ንምትሕልላፍ role="tablist"፡ , role="tab", role="tabpanel", ከምኡ’ውን ተወሳኺ ባህርያት የድልዮም ። aria-ከም ዝበለጸ ልምዲ፡ ንባእታታት ክትጥቀም ንመክር <button>፡ እዚኦም ናብ ሓድሽ ገጽ ወይ ቦታ ዝጓዓዙ መላግቦታት ዘይኮነስ፡ ዳይናሚካዊ ለውጢ ዝቐስቅሱ ቁጽጽራት ስለ ዝኾኑ።

ምስቲ ናይ ARIA Authoring Practices ቅዲ ብምስምማዕ፡ እቲ ሕጂ ንጡፍ ዘሎ ትብ ጥራይ እዩ ትኹረት ሰሌዳ ቁልፊ ዝረክብ። 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 element ዝተኣሳሰር tab instance ክትረክብ ዘኽእለካ Static method፣ ከምዚ ጌርካ ክትጥቀመሉ ትኽእል ኢኻ: bootstrap.Tab.getInstance(element).
getOrCreateInstance ምስ ሓደ DOM element ዝተኣሳሰር tab instance ዝምልስ ወይ ድማ እንተዘይተጀሚሩ ሓድሽ ዝፈጥር ስታትቲክ ሜላ። ከምዚ ጌርካ ክትጥቀመሉ ትኽእል ኢኻ bootstrap.Tab.getOrCreateInstance(element)፡ .
show ነቲ ዝተዋህበ ትብ ይመርጽ እሞ ምስኡ ዝተኣሳሰር ሸነኽ የርኢ። ዝኾነ ካልእ ኣቐዲሙ ዝተመርጸ ትብ ዘይተመርጸ ይኸውን እሞ ምስኡ ዝተኣሳሰር ሸነኽ ይሕባእ። ቅድሚ እቲ ትብ ፓን ብጭቡጥ ምርኣይ (ማለት ቅድሚ እቲ shown.bs.tabፍጻመ ምፍጣሩ) ናብቲ ደዋሊ ይምለስ።

ፍጻሜታት

ሓድሽ ትብ ኣብ እተርኢ እዋን፡ እቶም ፍጻመታት በዚ ዝስዕብ ቅደም ተኸተል ይትኩሱ፤

  1. hide.bs.tab(ኣብቲ ሕጂ ዘሎ ንጡፍ ትብ)
  2. show.bs.tab(ኣብቲ ክረአ ዘለዎ ትብ)
  3. hidden.bs.tab(ኣብቲ ዝሓለፈ ንጡፍ ትብ፡ ከምቲ ናይቲ hide.bs.tabፍጻመ)
  4. shown.bs.tab(ኣብቲ ሓድሽ-ንጡፍ ገና ዝተራእየ ትብ፡ ከምቲ ናይቲ show.bs.tabፍጻመ)

ድሮ ዝኾነ ትብ ንጡፍ እንተዘይነበረ፡ ሽዑ እቲ hide.bs.taband hidden.bs.tabevents ኣይክተኮስን እዩ።

ዓይነት ፍጻመ መግለፂ
hide.bs.tab እዚ ፍጻመ ሓድሽ ትብ ክረአ ከሎ ይትኩስ (በዚ ኸኣ እቲ ዝሓለፈ ንጡፍ ትብ ክሕባእ ኣለዎ)። ነቲ ሕጂ ዘሎ ንጡፍ ትብን ነቲ ኣብ ቀረባ እዋን ንጡፍ ዝኸውን ሓድሽ ትብን ብቕደም ተኸተል ዕላማ event.targetንምግባርን ተጠቐም ።event.relatedTarget
hidden.bs.tab እዚ ፍጻመ ሓድሽ ትብ ምስ ተራእየ ይትኩስ (በዚ ኸኣ እቲ ዝሓለፈ ንጡፍ ትብ ይሕባእ)። ነቲ ዝሓለፈ ንጡፍ ትብን ነቲ ሓድሽ ንጡፍ ትብን ብቕደም ተኸተል ዕላማ event.targetንምግባርን ተጠቐም ።event.relatedTarget
show.bs.tab እዚ ፍጻመ ኣብ tab show ይትኩስ፣ ግን ቅድሚ እቲ ሓድሽ tab ምርኣይ። ንጡፍ ትብን ነቲ ዝሓለፈ ንጡፍ ትብን (እንተሃልዩ) ብቕደም ተኸተል ዕላማ event.targetንምግባርን ተጠቐም ።event.relatedTarget
shown.bs.tab እዚ ፍጻመ ድሕሪ ሓደ ትብ ምርኣይ ኣብ tab show ይትኩስ። ንጡፍ ትብን ነቲ ዝሓለፈ ንጡፍ ትብን (እንተሃልዩ) ብቕደም ተኸተል ዕላማ 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
})