Navs እና ትሮች

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

በዚህ ገጽ ላይ

Base nav

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

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

የመሠረቱ አካል ማንኛውንም ግዛት .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>የእቃዎችዎ ቅደም ተከተል አስፈላጊ ከሆነ እንደ ከላይ ያሉትን ይጠቀሙ <ol>ወይም የእራስዎን በአንድ <nav>አካል ይንከባለሉ። ምክንያቱም .navአጠቃቀሞች display: flex፣ የባህር ኃይል ማያያዣዎች የባህር ኃይል ዕቃዎች እንደሚያደርጉት ተመሳሳይ ባህሪ አላቸው፣ ነገር ግን ያለ ተጨማሪ ምልክት።

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

የሚገኙ ቅጦች

.navበመቀየሪያዎች እና መገልገያዎች የ s አካልን ዘይቤ ይለውጡ ። እንደ አስፈላጊነቱ ይደባለቁ እና ያዛምዱ ወይም የራስዎን ይገንቡ።

አግድም አሰላለፍ

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

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

<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ያስገድዱት። .nav-itemሁሉንም የሚገኘውን ቦታ በእርስዎ s ለመሙላት ፣ ተጠቀም .nav-fill። ሁሉም አግድም ቦታ እንደተያዘ አስተውል፣ ነገር ግን እያንዳንዱ የባህር ኃይል ንጥል ነገር ተመሳሳይ ስፋት የለውም።

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

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

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

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

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

የአሰሳ አሞሌዎች፣ በምስላዊ መልኩ .nav-tabsከክፍል ጋር እንደ ትሮች ቢዘጋጁም፣ መሰጠት እንደሌለባቸው አስተውል ፣role="tablist" ወይም role="tab"ባህሪያት role="tabpanel"። እነዚህ በ WAI ARIA የጸሐፊነት ልምምዶች ላይ እንደተገለጸው ለተለዋዋጭ የታብ በይነገጾች ብቻ ተገቢ ናቸው ። ለምሳሌ በዚህ ክፍል ውስጥ ለተለዋዋጭ የታብ በይነገጾች የጃቫስክሪፕት ባህሪን ይመልከቱ ። የእኛ ጃቫ ስክሪፕት በገባሪው ትር ላይ aria-currentበማከል የተመረጠውን ሁኔታ ስለሚያስተናግድ ባህሪው በተለዋዋጭ የታብ በይነገጾች ላይ አስፈላጊ አይደለም ።aria-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 የአጻጻፍ ልምምዶች ላይ እንደተገለጸው ፣ አወቃቀራቸውንrole="tablist" ፣ ተግባራቸውን እና አሁን ያሉበትን ሁኔታ ለረዳት ቴክኖሎጂዎች ተጠቃሚዎች (እንደ ስክሪን አንባቢዎች) ለማስተላለፍ ተጨማሪ ባህሪያትን ይፈልጋሉ። እንደ ምርጥ ልምምድ፣ ወደ አዲስ ገጽ ወይም አካባቢ የሚሄዱ አገናኞች ሳይሆን ተለዋዋጭ ለውጥ የሚያመጡ ቁጥጥሮች ስለሆኑ ለትሮች አባሎችን እንዲጠቀሙ እንመክራለን ።role="tab"role="tabpanel"aria-<button>

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

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

ይህ የተወሰነ ቦታ ያዥ የመገለጫ ትሩ ተዛማጅ ይዘት ነው። ሌላ ትር ጠቅ ማድረግ የዚህን ታይነት ለቀጣዩ ይለውጠዋል። ትሩ JavaScript የይዘቱን ታይነት እና አጻጻፍ ለመቆጣጠር ክፍሎችን ይለዋወጣል። .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.

<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 ወይም በማንኛውም የዘፈቀደ “የራስዎን ያንከባልልልናል” ማርክ ይሰራል። እየተጠቀሙ ከሆነ በቀጥታ ወደ እሱ <nav>ማከል እንደሌለብዎት ልብ ይበሉ role="tablist"፣ ይህ የንጥሉን ተወላጅ ሚና እንደ የአሰሳ ምልክት ምልክት ስለሚሽረው ነው። በምትኩ, ወደ አማራጭ ኤለመንት (ከዚህ በታች ባለው ምሳሌ, ቀላል <div>) ይቀይሩ እና <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.

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

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

<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

የትር አባል እና የይዘት መያዣን ያነቃል። ትሩ በ DOM ውስጥ የእቃ መያዢያ መስቀለኛ መንገድን በማነጣጠር ሀ data-bs-targetወይም፣ ማገናኛን ከተጠቀሙ፣ መለያ ባህሪ ሊኖረው ይገባል።href

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

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

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

  firstTab.show()
</script>

አሳይ

የተሰጠውን ትር ይመርጣል እና የተገናኘውን መቃን ያሳያል። ከዚህ ቀደም የተመረጠው ሌላ ማንኛውም ትር ያልተመረጠ ይሆናል እና ከእሱ ጋር የተያያዘው መቃን ይደበቃል። የትር መቃን በትክክል ከመታየቱ በፊት (ማለትም shown.bs.tabክስተቱ ከመፈጠሩ በፊት) ወደ ደዋይ ይመለሳል።

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

  tab.show()

ማስወገድ

የአንድ ንጥረ ነገር ትርን ያጠፋል.

getInstance

ከDOM ኤለመንት ጋር የተጎዳኘውን የትር ምሳሌ ለማግኘት የሚያስችል የማይንቀሳቀስ ዘዴ

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.tabእና hidden.bs.tabክስተቶቹ አይባረሩም።

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

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