నవ్స్ మరియు ట్యాబ్‌లు

బూట్‌స్ట్రాప్‌లో చేర్చబడిన నావిగేషన్ భాగాలను ఎలా ఉపయోగించాలో డాక్యుమెంటేషన్ మరియు ఉదాహరణలు.

ఈ పేజీలో

Base nav

బూట్‌స్ట్రాప్‌లో అందుబాటులో ఉన్న నావిగేషన్ సాధారణ మార్కప్ మరియు స్టైల్స్, బేస్ .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 ని ఉపయోగించండి లేదా మూలకంతో మీ స్వంతంగా రోల్ చేయండి. ఎందుకంటే ఉపయోగాలు , nav లింక్‌లు nav ఐటెమ్‌ల మాదిరిగానే ప్రవర్తిస్తాయి, కానీ అదనపు మార్కప్ లేకుండా.<ol><nav>.navdisplay: 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 భాగం యొక్క శైలిని మార్చండి . అవసరమైన విధంగా కలపండి మరియు సరిపోల్చండి లేదా మీ స్వంతంగా నిర్మించుకోండి.

క్షితిజ సమాంతర అమరిక

ఫ్లెక్స్‌బాక్స్ యుటిలిటీలతో మీ nav యొక్క క్షితిజ సమాంతర అమరికను మార్చండి . డిఫాల్ట్‌గా, navలు ఎడమవైపుకి సమలేఖనం చేయబడ్డాయి, కానీ మీరు వాటిని మధ్యకు లేదా కుడికి సమలేఖనానికి సులభంగా మార్చవచ్చు.

దీనితో కేంద్రీకృతమై ఉంది .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>లు లేకుండా నిలువు నావిగేషన్ కూడా సాధ్యమవుతుంది.

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

మాత్రలు

అదే HTMLని తీసుకోండి, కానీ .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 తో అందుబాటులో ఉన్న ఖాళీ మొత్తాన్ని దామాషా ప్రకారం పూరించడానికి .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>

-ఆధారిత నావిగేషన్‌ని ఉపయోగిస్తున్నప్పుడు , స్టైలింగ్ ఎలిమెంట్‌లకు మాత్రమే అవసరమైనందున <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 లింక్‌లచే ఆక్రమించబడుతుంది, కానీ .nav-fillపైన పేర్కొన్న వాటికి భిన్నంగా, ప్రతి nav అంశం ఒకే వెడల్పుతో ఉంటుంది.

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

-ఆధారిత నావిగేషన్‌ని .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"యొక్క అత్యంత లాజికల్ పేరెంట్ కంటైనర్‌కు aని జోడించాలని నిర్ధారించుకోండి లేదా మొత్తం నావిగేషన్ చుట్టూ <ul>ఒక మూలకాన్ని చుట్టండి. <nav>పాత్రను దానికే జోడించవద్దు <ul>, ఇది సహాయక సాంకేతికతల ద్వారా వాస్తవ జాబితాగా ప్రకటించబడకుండా నిరోధిస్తుంది.

.nav-tabsనావిగేషన్ బార్‌లు, క్లాస్‌తో ట్యాబ్‌లుగా విజువల్‌గా స్టైల్ చేసినప్పటికీ , లేదా అట్రిబ్యూట్‌లు ఇవ్వకూడదని గమనించండి . WAI ARIA ఆథరింగ్ ప్రాక్టీసెస్‌లో వివరించిన విధంగా ఇవి డైనమిక్ ట్యాబ్డ్ ఇంటర్‌ఫేస్‌లకు మాత్రమే సరిపోతాయి . ఉదాహరణ కోసం ఈ విభాగంలో డైనమిక్ ట్యాబ్డ్ ఇంటర్‌ఫేస్‌ల కోసం జావాస్క్రిప్ట్ ప్రవర్తనను చూడండి . యాక్టివ్ ట్యాబ్‌లో జోడించడం ద్వారా ఎంచుకున్న స్థితిని మా జావాస్క్రిప్ట్ హ్యాండిల్ చేస్తుంది కాబట్టి డైనమిక్ ట్యాబ్డ్ ఇంటర్‌ఫేస్‌లపై అట్రిబ్యూట్ అవసరం లేదు .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" 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 నమూనాకు మ్యాప్ చేయడానికి ప్రస్తుతం సరైన మార్గం లేదు, అంటే సహాయక సాంకేతిక పరిజ్ఞానాల వినియోగదారులకు సులభంగా అర్థమయ్యేలా చేయడం సాధ్యం కాదు.

ఇది హోమ్ ట్యాబ్ యొక్క అనుబంధిత కంటెంట్‌లో కొంత ప్లేస్‌హోల్డర్ కంటెంట్. మరొక ట్యాబ్‌ను క్లిక్ చేయడం వలన దీని విజిబిలిటీని తదుపరి దాని కోసం టోగుల్ చేస్తుంది. కంటెంట్ దృశ్యమానత మరియు స్టైలింగ్‌ను నియంత్రించడానికి జావాస్క్రిప్ట్ ట్యాబ్ తరగతులను మారుస్తుంది. మీరు దీన్ని ట్యాబ్‌లు, మాత్రలు మరియు ఏదైనా ఇతర .navశక్తితో కూడిన నావిగేషన్‌తో ఉపయోగించవచ్చు.

ఇది ప్రొఫైల్ ట్యాబ్ యొక్క అనుబంధిత కంటెంట్‌లో కొంత ప్లేస్‌హోల్డర్ కంటెంట్. మరొక ట్యాబ్‌ను క్లిక్ చేయడం వలన దీని విజిబిలిటీని తదుపరి దాని కోసం టోగుల్ చేస్తుంది. కంటెంట్ దృశ్యమానత మరియు స్టైలింగ్‌ను నియంత్రించడానికి జావాస్క్రిప్ట్ ట్యాబ్ తరగతులను మారుస్తుంది. మీరు దీన్ని ట్యాబ్‌లు, మాత్రలు మరియు ఏదైనా ఇతర .navశక్తితో కూడిన నావిగేషన్‌తో ఉపయోగించవచ్చు.

ఇది కొంత ప్లేస్‌హోల్డర్ కంటెంట్, కాంటాక్ట్ ట్యాబ్ అనుబంధిత కంటెంట్. మరొక ట్యాబ్‌ను క్లిక్ చేయడం వలన దీని విజిబిలిటీని తదుపరి దాని కోసం టోగుల్ చేస్తుంది. కంటెంట్ దృశ్యమానత మరియు స్టైలింగ్‌ను నియంత్రించడానికి జావాస్క్రిప్ట్ ట్యాబ్ తరగతులను మారుస్తుంది. మీరు దీన్ని ట్యాబ్‌లు, మాత్రలు మరియు ఏదైనా ఇతర .navశక్తితో కూడిన నావిగేషన్‌తో ఉపయోగించవచ్చు.

<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>, ఇది పైన చూపిన విధంగా-ఆధారిత మార్కప్‌తో లేదా ఏదైనా ఏకపక్ష "మీ స్వంతంగా రోల్ చేయండి" మార్కప్‌తో పని చేస్తుంది. మీరు ఉపయోగిస్తుంటే <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>

ట్యాబ్‌ల ప్లగ్ఇన్ మాత్రలతో కూడా పనిచేస్తుంది.

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

మరియు నిలువు మాత్రలతో.

ఇది కొంత ప్లేస్‌హోల్డర్ కంటెంట్, సందేశాల ట్యాబ్ అనుబంధిత కంటెంట్. మరొక ట్యాబ్‌ను క్లిక్ చేయడం వలన దీని విజిబిలిటీని తదుపరి దాని కోసం టోగుల్ చేస్తుంది. కంటెంట్ దృశ్యమానత మరియు స్టైలింగ్‌ను నియంత్రించడానికి జావాస్క్రిప్ట్ ట్యాబ్ తరగతులను మారుస్తుంది. మీరు దీన్ని ట్యాబ్‌లు, మాత్రలు మరియు ఏదైనా ఇతర .navశక్తితో కూడిన నావిగేషన్‌తో ఉపయోగించవచ్చు.

ఇది సెట్టింగ్‌ల ట్యాబ్‌కు సంబంధించిన కంటెంట్‌లో కొంత ప్లేస్‌హోల్డర్ కంటెంట్. మరొక ట్యాబ్‌ను క్లిక్ చేయడం వలన దీని విజిబిలిటీని తదుపరి దాని కోసం టోగుల్ చేస్తుంది. కంటెంట్ దృశ్యమానత మరియు స్టైలింగ్‌ను నియంత్రించడానికి జావాస్క్రిప్ట్ ట్యాబ్ తరగతులను మారుస్తుంది. మీరు దీన్ని ట్యాబ్‌లు, మాత్రలు మరియు ఏదైనా ఇతర .navశక్తితో కూడిన నావిగేషన్‌తో ఉపయోగించవచ్చు.

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

పద్ధతులు

అసమకాలిక పద్ధతులు మరియు పరివర్తనాలు

అన్ని API పద్ధతులు అసమకాలికమైనవి మరియు పరివర్తనను ప్రారంభిస్తాయి . వారు పరివర్తన ప్రారంభమైన వెంటనే కానీ అది ముగిసేలోపు కాలర్ వద్దకు తిరిగి వస్తారు . అదనంగా, పరివర్తన భాగంపై పద్ధతి కాల్ విస్మరించబడుతుంది .

మరింత సమాచారం కోసం మా జావాస్క్రిప్ట్ డాక్యుమెంటేషన్ చూడండి .

constructor

ట్యాబ్ మూలకం మరియు కంటెంట్ కంటైనర్‌ను సక్రియం చేస్తుంది. ట్యాబ్‌లో ఏదో ఒకటి ఉండాలి data-bs-targetలేదా, లింక్‌ని ఉపయోగిస్తుంటే, hrefDOMలో కంటైనర్ నోడ్‌ని లక్ష్యంగా చేసుకుని ఒక లక్షణం ఉండాలి.

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