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

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

ఈ పేజీలో

బేస్ nav

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

html

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

అందుబాటులో ఉన్న శైలులు

.navమాడిఫైయర్‌లు మరియు యుటిలిటీలతో s భాగం యొక్క శైలిని మార్చండి . అవసరమైన విధంగా కలపండి మరియు సరిపోల్చండి లేదా మీ స్వంతంగా నిర్మించుకోండి.

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

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

దీనితో కేంద్రీకృతమై ఉంది .justify-content-center:

html

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

దీనితో కుడి-సమలేఖనం చేయబడింది .justify-content-end:

html

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

నిలువుగా

.flex-columnయుటిలిటీతో ఫ్లెక్స్ ఐటెమ్ దిశను మార్చడం ద్వారా మీ నావిగేషన్‌ను స్టాక్ చేయండి . వాటిని కొన్ని వ్యూపోర్ట్‌లలో పేర్చాలా? ప్రతిస్పందించే సంస్కరణలను ఉపయోగించండి (ఉదా, .flex-sm-column).

html

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

ఎప్పటిలాగే, <ul>లు లేకుండా నిలువు నావిగేషన్ కూడా సాధ్యమవుతుంది.

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-tabsట్యాబ్డ్ ఇంటర్‌ఫేస్‌ను రూపొందించడానికి తరగతిని జోడిస్తుంది. మా ట్యాబ్ జావాస్క్రిప్ట్ ప్లగ్ఇన్‌తో ట్యాబ్ చేయదగిన ప్రాంతాలను సృష్టించడానికి వాటిని ఉపయోగించండి .

html

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

మాత్రలు

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

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

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>

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

.nav-tabsనావిగేషన్ బార్‌లు, క్లాస్‌తో ట్యాబ్‌లుగా విజువల్‌గా స్టైల్ చేసినప్పటికీ , లేదా అట్రిబ్యూట్‌లు ఇవ్వకూడదని గమనించండి . ARIA ఆథరింగ్ ప్రాక్టీసెస్ గైడ్ ట్యాబ్‌ల నమూనాలో వివరించిన విధంగా ఇవి డైనమిక్ ట్యాబ్డ్ ఇంటర్‌ఫేస్‌లకు మాత్రమే సరిపోతాయి . ఉదాహరణ కోసం ఈ విభాగంలో డైనమిక్ ట్యాబ్డ్ ఇంటర్‌ఫేస్‌ల కోసం జావాస్క్రిప్ట్ ప్రవర్తనను చూడండి . యాక్టివ్ ట్యాబ్‌లో జోడించడం ద్వారా ఎంచుకున్న స్థితిని మా జావాస్క్రిప్ట్ హ్యాండిల్ చేస్తుంది కాబట్టి డైనమిక్ ట్యాబ్డ్ ఇంటర్‌ఫేస్‌లపై అట్రిబ్యూట్ అవసరం లేదు .role="tablist"role="tab"role="tabpanel"aria-currentaria-selected="true"

డ్రాప్‌డౌన్‌లను ఉపయోగించడం

కొంచెం అదనపు HTML మరియు డ్రాప్‌డౌన్‌ల జావాస్క్రిప్ట్ ప్లగిన్‌తో డ్రాప్‌డౌన్ మెనులను జోడించండి .

డ్రాప్‌డౌన్‌లతో ట్యాబ్‌లు

html

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

డ్రాప్‌డౌన్‌లతో మాత్రలు

html

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

CSS

వేరియబుల్స్

v5.2.0లో జోడించబడింది

బూట్‌స్ట్రాప్ యొక్క అభివృద్ధి చెందుతున్న CSS వేరియబుల్స్ విధానంలో భాగంగా, navs ఇప్పుడు స్థానిక CSS వేరియబుల్స్‌ను .nav, .nav-tabs, మరియు .nav-pillsమెరుగుపరచబడిన నిజ-సమయ అనుకూలీకరణ కోసం ఉపయోగిస్తుంది. CSS వేరియబుల్స్ కోసం విలువలు Sass ద్వారా సెట్ చేయబడతాయి, కాబట్టి Sass అనుకూలీకరణకు ఇప్పటికీ మద్దతు ఉంది.

.navబేస్ క్లాస్ మీద :

  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: #{$nav-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

.nav-tabsమాడిఫైయర్ క్లాస్‌లో :

  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

.nav-pillsమాడిఫైయర్ క్లాస్‌లో :

  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

సాస్ వేరియబుల్స్

$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స్థానిక కంటెంట్ యొక్క ట్యాబ్ చేయదగిన పేన్‌లను రూపొందించడానికి మా నావిగేషనల్ ట్యాబ్‌లు మరియు మాత్రలను విస్తరించడానికి ట్యాబ్ జావాస్క్రిప్ట్ ప్లగ్ఇన్‌ను ఉపయోగించండి—దీన్ని వ్యక్తిగతంగా లేదా కంపైల్ చేసిన ఫైల్ ద్వారా చేర్చండి.

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

This is some placeholder content the Disabled tab's associated content.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

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

This is some placeholder content the Disabled tab's associated content.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

మరియు నిలువు మాత్రలతో. aria-orientation="vertical"ఆదర్శవంతంగా, నిలువు ట్యాబ్‌ల కోసం, మీరు ట్యాబ్ జాబితా కంటైనర్‌కు కూడా జోడించాలి .

This is some placeholder content the Disabled tab's associated content.

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
    <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="v-pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</button>
    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
    <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </div>
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

సౌలభ్యాన్ని

ARIA ఆథరింగ్ ప్రాక్టీసెస్ గైడ్ ట్యాబ్‌ల నమూనాలో వివరించిన విధంగా డైనమిక్ ట్యాబ్డ్ ఇంటర్‌ఫేస్‌లు, సహాయక సాంకేతికతల (స్క్రీన్ రీడర్‌ల వంటివి) వినియోగదారులకు వాటి నిర్మాణం, కార్యాచరణ మరియు ప్రస్తుత స్థితిని తెలియజేయడానికి role="tablist", role="tab", role="tabpanel", మరియు అదనపు విశేషణాలు అవసరం . aria-ఉత్తమ అభ్యాసంగా, <button>ట్యాబ్‌ల కోసం ఎలిమెంట్‌లను ఉపయోగించమని మేము సిఫార్సు చేస్తున్నాము, ఎందుకంటే ఇవి కొత్త పేజీ లేదా స్థానానికి నావిగేట్ చేసే లింక్‌ల కంటే డైనమిక్ మార్పును ప్రేరేపించే నియంత్రణలు.

ARIA ఆథరింగ్ ప్రాక్టీసెస్ ప్యాటర్న్‌కు అనుగుణంగా, ప్రస్తుతం యాక్టివ్‌గా ఉన్న ట్యాబ్ మాత్రమే కీబోర్డ్ ఫోకస్‌ని అందుకుంటుంది. జావాస్క్రిప్ట్ ప్లగ్ఇన్ ప్రారంభించబడినప్పుడు, ఇది tabindex="-1"అన్ని నిష్క్రియ ట్యాబ్ నియంత్రణలపై సెట్ చేయబడుతుంది. ప్రస్తుతం యాక్టివ్‌గా ఉన్న ట్యాబ్ ఫోకస్ చేసిన తర్వాత, కర్సర్ కీలు మునుపటి/తదుపరి ట్యాబ్‌ను సక్రియం చేస్తాయి, ప్లగ్ఇన్ తదనుగుణంగా రోవింగ్‌నుtabindex మారుస్తుంది . ఏది ఏమైనప్పటికీ, కర్సర్ కీ ఇంటరాక్షన్‌ల విషయానికి వస్తే జావాస్క్రిప్ట్ ప్లగ్ఇన్ క్షితిజ సమాంతర మరియు నిలువు ట్యాబ్ జాబితాల మధ్య తేడాను గుర్తించదని గమనించండి: ట్యాబ్ జాబితా యొక్క ధోరణితో సంబంధం లేకుండా, ఎగువ మరియు ఎడమ కర్సర్ రెండూ మునుపటి ట్యాబ్‌కి వెళ్లి, క్రిందికి మరియు కుడి కర్సర్‌కి వెళ్తాయి తదుపరి ట్యాబ్.

సాధారణంగా, కీబోర్డ్ నావిగేషన్‌ను సులభతరం చేయడానికి, ట్యాబ్ ప్యానెల్‌లోని అర్థవంతమైన కంటెంట్‌ను కలిగి ఉన్న మొదటి మూలకం ఇప్పటికే ఫోకస్ చేయగలిగితే తప్ప, ట్యాబ్ ప్యానెల్‌లను కూడా ఫోకస్ చేసేలా చేయాలని సిఫార్సు చేయబడింది. JavaScript ప్లగ్ఇన్ ఈ అంశాన్ని నిర్వహించడానికి ప్రయత్నించదు—సముచితమైన చోట, మీరు 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>

పద్ధతులు

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

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

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

మీ కంటెంట్‌ను ట్యాబ్ ఎలిమెంట్‌గా యాక్టివేట్ చేస్తుంది.

మీరు కన్స్ట్రక్టర్‌తో ట్యాబ్ ఉదాహరణను సృష్టించవచ్చు, ఉదాహరణకు:

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

పద్ధతి	వివరణ
`dispose`	మూలకం యొక్క ట్యాబ్‌ను నాశనం చేస్తుంది.
`getInstance`	DOM మూలకంతో అనుబంధించబడిన ట్యాబ్ ఉదాహరణను పొందడానికి మిమ్మల్ని అనుమతించే స్టాటిక్ పద్ధతి, మీరు దీన్ని ఇలా ఉపయోగించవచ్చు: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	DOM ఎలిమెంట్‌కు అనుబంధించబడిన ట్యాబ్ ఉదాహరణను అందించే స్టాటిక్ మెథడ్ లేదా అది ప్రారంభించబడనప్పుడు కొత్తదాన్ని సృష్టించడం. మీరు దీన్ని ఇలా ఉపయోగించవచ్చు: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	ఇచ్చిన ట్యాబ్‌ను ఎంచుకుని, దాని అనుబంధ పేన్‌ను చూపుతుంది. గతంలో ఎంచుకున్న ఏదైనా ఇతర ట్యాబ్ ఎంపిక చేయబడదు మరియు దాని అనుబంధ పేన్ దాచబడుతుంది. ట్యాబ్ పేన్ వాస్తవంగా చూపబడక ముందే కాలర్‌కు తిరిగి వస్తుంది (అంటే `shown.bs.tab`ఈవెంట్ జరగడానికి ముందు).

ఈవెంట్స్

కొత్త ట్యాబ్‌ను చూపుతున్నప్పుడు, ఈవెంట్‌లు కింది క్రమంలో కాల్పులు జరుపుతాయి:

hide.bs.tab(ప్రస్తుత క్రియాశీల ట్యాబ్‌లో)
show.bs.tab(చూపవలసిన ట్యాబ్‌లో)
hidden.bs.tab(మునుపటి యాక్టివ్ ట్యాబ్‌లో, hide.bs.tabఈవెంట్‌కు సంబంధించినదే)
shown.bs.tab(కొత్తగా యాక్టివ్‌గా ఉన్న ఇప్పుడే చూపబడిన ట్యాబ్‌లో, show.bs.tabఈవెంట్‌కు సంబంధించినది)

ఏ ట్యాబ్ ఇప్పటికే సక్రియంగా లేకుంటే, hide.bs.tabమరియు hidden.bs.tabఈవెంట్‌లు తొలగించబడవు.

ఈవెంట్ రకం	వివరణ
`hide.bs.tab`	ఈ ఈవెంట్ కొత్త ట్యాబ్‌ను చూపాల్సినప్పుడు (అందువలన మునుపటి యాక్టివ్ ట్యాబ్ దాచబడాలి) కాల్పులు జరుపుతుంది. ప్రస్తుత యాక్టివ్ ట్యాబ్ మరియు కొత్త త్వరలో యాక్టివ్‌గా ఉండే ట్యాబ్‌ను వరుసగా ఉపయోగించుకోండి `event.target`మరియు లక్ష్యంగా చేసుకోండి.`event.relatedTarget`
`hidden.bs.tab`	కొత్త ట్యాబ్ చూపబడిన తర్వాత ఈ ఈవెంట్ కాల్పులు జరుపుతుంది (అందువల్ల మునుపటి సక్రియ ట్యాబ్ దాచబడుతుంది). మునుపటి యాక్టివ్ ట్యాబ్ మరియు కొత్త యాక్టివ్ ట్యాబ్‌లను వరుసగా ఉపయోగించుకోండి `event.target`మరియు లక్ష్యంగా చేసుకోండి.`event.relatedTarget`
`show.bs.tab`	ఈ ఈవెంట్ ట్యాబ్ షోలో కాల్పులు జరుపుతుంది, కానీ కొత్త ట్యాబ్ చూపబడక ముందే. యాక్టివ్ ట్యాబ్ మరియు మునుపటి యాక్టివ్ ట్యాబ్ (అందుబాటులో ఉంటే) వరుసగా ఉపయోగించుకోండి `event.target`మరియు లక్ష్యంగా చేసుకోండి.`event.relatedTarget`
`shown.bs.tab`	ట్యాబ్ చూపబడిన తర్వాత ఈ ఈవెంట్ ట్యాబ్ షోలో మంటలు వేస్తుంది. యాక్టివ్ ట్యాబ్ మరియు మునుపటి యాక్టివ్ ట్యాబ్ (అందుబాటులో ఉంటే) వరుసగా ఉపయోగించుకోండి `event.target`మరియు లక్ష్యంగా చేసుకోండి.`event.relatedTarget`

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