ናቭስን ትቦታትን

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

ኣብዚ ገጽ

መሰረት ናቭ

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

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

እቲ መሰረታዊ ባእታ ዝኾነ ይኹን ግዝኣት .navዘየጠቓልል እዩ ። .activeእዞም ዝስዕቡ ኣብነታት ነቲ ክፍሊ ዘጠቓልሉ ኮይኖም፡ ብቐንዱ እዚ ፍሉይ ክፍሊ ዝኾነ ፍሉይ ቅዲ ከም ዘየበገስ ንምግላጽ እዩ።

ነቲ ንጡፍ ኩነታት ናብ ሓገዝቲ ቴክኖሎጂታት ንምትሕልላፍ፡ ነቲ aria-currentባህሪ ተጠቐም — ነቲ pageዋጋ ንህሉው ገጽ ብምጥቃም፡ ወይ trueንህሉው ኣቕሓ ኣብ ሓደ ስብስብ።

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

<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>

ዝርከቡ ቅዲታት

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

ልኡል ኣሰላልፋ

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

<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>

ከኒናታት

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

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

<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>

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

ምላሽ ዝህቡ nav ፍልልያት እንተድኣ ደሊኻ፡ ተኸታታሊ ፍሌክስቦክስ ዩቲሊቲታት ምጥቃም ኣብ ግምት ኣእቱ ። ዝያዳ ቃላት ዝዛረቡ እኳ እንተኾኑ፡ እዞም ዩቲሊቲታት ኣብ መላእ ምላሽ ዝህቡ ነጥብታት ዝዓበየ ምምዕርራይ የቕርቡ። ኣብዚ ኣብ ታሕቲ ዘሎ ኣብነት፡ nav ናትና ኣብቲ ዝወሓደ ስብራት ነጥቢ ክድምር እዩ�� ድሕሪኡ ካብቲ ንእሽቶ ነጥቢ ምብታኽ ጀሚሩ ነቲ ዘሎ ስፍሓት ዝመልእ ኣግማድ ኣቀማምጣ ክላመድ እዩ።

<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>

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

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

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

ንቑልቁል ዝወርድ ነገራት ምጥቃም

ቁሩብ ተወሳኺ ኤችቲኤምኤል ዘለዎም ንቑልቁል ዝወርድ ምልክታታትን ንቑልቁል ዝወርድ ጃቫስክሪፕት ፕላግ-ኢንን ወስኹ ።

ንቑልቁል ዝወርድ ትቦታት

<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>

ከኒና ምስ ንጣብ ንጣብ

<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;

ባህሪ ጃቫስክሪፕት።

ነቲ ትብ ጃቫስክሪፕት ፕላግ-ኢን ተጠቐም-ብውልቂ ወይ ብመንገዲ እቲ ዝተጠርነፈ bootstrap.jsፋይል ኣካትትዎ-ንናይ ምድህሳስ ትቦታትናን ከኒናታትናን ብምዝርጋሕ፡ ናይ ከባብያዊ ትሕዝቶታት ትቦ ዝግበረሎም መስኮታት ንምፍጣር።

ዳይናሚክ ትብ ዘለዎም መተሓላለፍቲ፡ ከምቲ ኣብ WAI ARIA Authoring Practices ዝተገልጸ፡ ኣቃውምኦም ፡ ተግባራቶምን ህሉው ኩነታቶምን ንተጠቀምቲ ሓገዝቲ ቴክኖሎጂታት (ከም ስክሪን ኣንበብቲ) ንምትሕልላፍ role="tablist"፡ , role="tab", role="tabpanel", ከምኡ’ውን ተወሳኺ ባህርያት የድልዮም ። aria-ከም ዝበለጸ ልምዲ፡ ንባእታታት ክትጥቀም ንመክር <button>፡ እዚኦም ናብ ሓድሽ ገጽ ወይ ቦታ ዝጓዓዙ መላግቦታት ዘይኮነስ፡ ዳይናሚካዊ ለውጢ ዝቐስቅሱ ቁጽጽራት ስለ ዝኾኑ።

ዳይናሚክ ትብ ዘለዎም መተሓላለፍቲ ንቑልቁል ዝወርድ ምልክታታት ክሕዙ ከምዘይብሎም ኣስተውዕል ፣ እዚ ንኽልቲኡ ናይ ተጠቃምነትን ተበጻሕነትን ጸገማት ስለዘስዕብ። ብዓይኒ ተጠቃምነት፡ እቲ ኣብዚ እዋን እዚ ዝረአ ትብ መበገሲ ባእታ ብቕጽበት ዘይምርኣይ (ኣብ ውሽጢ እቲ ዕጹው ንቑልቁል ዝወርድ ዝርዝር ስለዘሎ) ምድንጋር ከስዕብ ይኽእል። ብዓይኒ ተበጻሕነት፡ ኣብዚ እዋን’ዚ ነዚ ዓይነት ህንጻ ናብ መደበኛ WAI ARIA ቅዲ ንምምልካት ርትዓዊ ዝኾነ መንገዲ የለን፡ ማለት ንተጠቀምቲ ሓጋዚ ቴክኖሎጂታት ብቐሊሉ ርዱእ ክኸውን ኣይክእልን።

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

<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>

ናይ ዳታ ባህርያት ምጥቃም

ዝኾነ ጃቫስክሪፕት ከይጸሓፍካ ንሓደ ባእታ ብምግላጽ 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">...</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>

ብመንገዲ ጃቫስክሪፕት።

ብመንገዲ ጃቫስክሪፕት ንዝተፈላለዩ ትቦታት ኣንቅሑ (ነፍሲ ወከፍ ትብ ብውልቂ ክነጥፍ ኣለዎ)፤

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>

ኣገባባት

ዘይተመዓራረዩ ኣገባባትን ምስግጋራትን።

ኩሎም ናይ ኤፒኣይ ሜላታት ዘይተመዓራረዩ ኮይኖም ምስግጋር ይጅምሩ ። እቲ ምስግጋር ምስ ተጀመረ ግን ከኣ ቅድሚ ምውድኡ ናብቲ ደዋሊ ይምለሱ ። ብተወሳኺ፡ ኣብ ሓደ መሰጋገሪ ኣካል ዝግበር ናይ ሜላ ጻውዒት ዕሽሽ ክበሃል እዩ .

ንዝያዳ ሓበሬታ ኣብ ሰነድ ጃቫስክሪፕትና ርአ ።

constructor

ንሓደ ናይ ትብ ባእታን ትሕዝቶ መትሓዚን የነቓቕሕ። ትብ ወይ data-bs-targetወይ ድማ ሊንክ እንተተጠቒምካሉ hrefባህሪ ክህልዎ ኣለዎ፣ ኣብ DOM ንዘሎ መትሓዚ መስመር ዝዓለመ።

<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 element ዝተኣሳሰር tab instance ክትረክብ ዘኽእለካ Static method

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(ኣብቲ ክረአ ዘለዎ ትብ)
hidden.bs.tab(ኣብቲ ዝሓለፈ ንጡፍ ትብ፡ ከምቲ ናይቲ hide.bs.tabፍጻመ)
shown.bs.tab(ኣብቲ ሓድሽ-ንጡፍ ገና ዝተራእየ ትብ፡ ከምቲ ናይቲ show.bs.tabፍጻመ)

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

ዓይነት ፍጻመ	መግለፂ
`show.bs.tab`	እዚ ፍጻመ ኣብ tab show ይትኩስ፣ ግን ቅድሚ እቲ ሓድሽ tab ምርኣይ። ንጡፍ ትብን ነቲ ዝሓለፈ ንጡፍ ትብን (እንተሃልዩ) ብቕደም ተኸተል ዕላማ `event.target`ንምግባርን ተጠቐም ።`event.relatedTarget`
`shown.bs.tab`	እዚ ፍጻመ ድሕሪ ሓደ ትብ ምርኣይ ኣብ tab show ይትኩስ። ንጡፍ ትብን ነቲ ዝሓለፈ ንጡፍ ትብን (እንተሃልዩ) ብቕደም ተኸተል ዕላማ `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
})