നാവുകളും ടാബുകളും

ബൂട്ട്‌സ്‌ട്രാപ്പിൽ ഉൾപ്പെടുത്തിയിരിക്കുന്ന നാവിഗേഷൻ ഘടകങ്ങൾ എങ്ങനെ ഉപയോഗിക്കാമെന്നതിനുള്ള ഡോക്യുമെന്റേഷനും ഉദാഹരണങ്ങളും.

ഈ പേജിൽ

അടിസ്ഥാന നവ

ബൂട്ട്‌സ്‌ട്രാപ്പിൽ ലഭ്യമായ നാവിഗേഷൻ പൊതുവായ മാർക്ക്അപ്പും ശൈലികളും, അടിസ്ഥാന .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">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">Disabled</a>
</nav>

ലഭ്യമായ ശൈലികൾ

.navമോഡിഫയറുകളും യൂട്ടിലിറ്റികളും ഉപയോഗിച്ച് s ഘടകത്തിന്റെ ശൈലി മാറ്റുക . ആവശ്യാനുസരണം മിക്‌സ് ചെയ്‌ത് പൊരുത്തപ്പെടുത്തുക, അല്ലെങ്കിൽ സ്വന്തമായി നിർമ്മിക്കുക.

തിരശ്ചീന വിന്യാസം

ഫ്ലെക്സ്ബോക്സ് യൂട്ടിലിറ്റികൾ ഉപയോഗിച്ച് നിങ്ങളുടെ നാവിന്റെ തിരശ്ചീന വിന്യാസം മാറ്റുക . സ്ഥിരസ്ഥിതിയായി, 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">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">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">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">Disabled</a>
</nav>

ടാബുകൾ

മുകളിൽ നിന്ന് അടിസ്ഥാന nav എടുത്ത് .nav-tabsഒരു ടാബ് ചെയ്‌ത ഇന്റർഫേസ് സൃഷ്‌ടിക്കാൻ ക്ലാസ് ചേർക്കുക. ഞങ്ങളുടെ ടാബ് JavaScript പ്ലഗിൻ ഉപയോഗിച്ച് ടാബബിൾ പ്രദേശങ്ങൾ സൃഷ്ടിക്കാൻ അവ ഉപയോഗിക്കുക .

<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പകരം ഉപയോഗിക്കുക:

<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ലഭ്യമായ മുഴുവൻ വീതിയും രണ്ട് മോഡിഫയർ ക്ലാസുകളിൽ ഒന്ന് വിപുലീകരിക്കാൻ നിങ്ങളുടെ ഉള്ളടക്കം നിർബന്ധിക്കുക. ലഭ്യമായ എല്ലാ സ്ഥലവും ആനുപാതികമായി പൂരിപ്പിക്കുന്നതിന് .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">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">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">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">Disabled</a>
</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">Disabled</a>
</nav>

പ്രവേശനക്ഷമത സംബന്ധിച്ച്

ഒരു നാവിഗേഷൻ ബാർ നൽകാൻ നിങ്ങൾ navs ഉപയോഗിക്കുകയാണെങ്കിൽ, role="navigation"ന്റെ ഏറ്റവും ലോജിക്കൽ പാരന്റ് കണ്ടെയ്‌നറിലേക്ക് ഒരു ചേർക്കുന്നത് ഉറപ്പാക്കുക, അല്ലെങ്കിൽ മുഴുവൻ നാവിഗേഷനും ചുറ്റും <ul>ഒരു ഘടകം പൊതിയുക . അസിസ്റ്റീവ് ടെക്നോളജികൾ വഴി ഒരു യഥാർത്ഥ പട്ടികയായി പ്രഖ്യാപിക്കുന്നതിൽ നിന്ന് ഇത് തടയുന്നതിനാൽ, <nav>റോൾ അതിൽ തന്നെ ചേർക്കരുത് .<ul>

നാവിഗേഷൻ ബാറുകൾ, .nav-tabsക്ലാസിനൊപ്പം ടാബുകളായി ദൃശ്യപരമായി സ്റ്റൈൽ ചെയ്‌തിട്ടുണ്ടെങ്കിൽപ്പോലും , അല്ലെങ്കിൽ ആട്രിബ്യൂട്ടുകൾ നൽകരുത് . WAI ARIA ഓതറിംഗ് പ്രാക്ടീസുകളിൽ വിവരിച്ചിരിക്കുന്നതുപോലെ, ഡൈനാമിക് ടാബ് ചെയ്ത ഇന്റർഫേസുകൾക്ക് മാത്രമേ ഇവ അനുയോജ്യമാകൂ . ഒരു ഉദാഹരണത്തിനായി ഈ വിഭാഗത്തിലെ ഡൈനാമിക് ടാബ് ചെയ്ത ഇന്റർഫേസുകൾക്കായുള്ള JavaScript സ്വഭാവം കാണുക . സജീവമായ ടാബിൽ ചേർത്തുകൊണ്ട് തിരഞ്ഞെടുത്ത അവസ്ഥയെ ഞങ്ങളുടെ JavaScript കൈകാര്യം ചെയ്യുന്നതിനാൽ ഡൈനാമിക് ടാബ് ചെയ്ത ഇന്റർഫേസുകളിൽ ആട്രിബ്യൂട്ട് ആവശ്യമില്ല .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">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">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;

JavaScript പെരുമാറ്റം

bootstrap.jsപ്രാദേശിക ഉള്ളടക്കത്തിന്റെ ടാബബിൾ പാനുകൾ സൃഷ്‌ടിക്കുന്നതിന് ഞങ്ങളുടെ നാവിഗേഷൻ ടാബുകളും ഗുളികകളും വിപുലീകരിക്കുന്നതിന് , JavaScript പ്ലഗിൻ ടാബ് ഉപയോഗിക്കുക—അത് വ്യക്തിഗതമായോ കംപൈൽ ചെയ്‌ത ഫയലിലൂടെയോ ഉൾപ്പെടുത്തുക.

WAI ARIA ഓതറിംഗ് പ്രാക്ടീസുകളിൽ വിവരിച്ചിരിക്കുന്നതുപോലെ ഡൈനാമിക് ടാബുചെയ്‌ത ഇന്റർഫേസുകൾക്ക് അവയുടെ ഘടനയും പ്രവർത്തനവും നിലവിലെ അവസ്ഥയും സഹായക സാങ്കേതികവിദ്യകളുടെ (സ്‌ക്രീൻ റീഡറുകൾ പോലുള്ളവ) ഉപയോക്താക്കൾക്ക് അറിയിക്കുന്നതിന് role="tablist", role="tab", role="tabpanel", കൂടാതെ അധിക ആട്രിബ്യൂട്ടുകൾ ആവശ്യമാണ് . aria-ഒരു മികച്ച സമ്പ്രദായമെന്ന നിലയിൽ <button>, പുതിയ പേജിലേക്കോ ലൊക്കേഷനിലേക്കോ നാവിഗേറ്റുചെയ്യുന്ന ലിങ്കുകളേക്കാൾ ചലനാത്മകമായ മാറ്റത്തിന് കാരണമാകുന്ന നിയന്ത്രണങ്ങളാണ് ടാബുകൾക്കുള്ള ഘടകങ്ങൾ ഉപയോഗിക്കാൻ ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നത്.

ഡൈനാമിക് ടാബുചെയ്‌ത ഇന്റർഫേസുകളിൽ ഡ്രോപ്പ്ഡൗൺ മെനുകൾ അടങ്ങിയിരിക്കരുത്, കാരണം ഇത് ഉപയോഗക്ഷമതയിലും പ്രവേശനക്ഷമതയിലും പ്രശ്‌നങ്ങൾ ഉണ്ടാക്കുന്നു. ഒരു ഉപയോഗക്ഷമത വീക്ഷണകോണിൽ, നിലവിൽ പ്രദർശിപ്പിച്ചിരിക്കുന്ന ടാബിന്റെ ട്രിഗർ ഘടകം ഉടനടി ദൃശ്യമാകില്ല എന്ന വസ്തുത (അത് അടച്ച ഡ്രോപ്പ്ഡൗൺ മെനുവിനുള്ളിലായതിനാൽ) ആശയക്കുഴപ്പമുണ്ടാക്കാം. ഒരു പ്രവേശനക്ഷമത വീക്ഷണകോണിൽ നിന്ന്, ഇത്തരത്തിലുള്ള നിർമ്മാണത്തെ ഒരു സാധാരണ WAI ARIA പാറ്റേണിലേക്ക് മാപ്പ് ചെയ്യുന്നതിന് നിലവിൽ യുക്തിസഹമായ മാർഗമില്ല, അതായത് സഹായ സാങ്കേതികവിദ്യകളുടെ ഉപയോക്താക്കൾക്ക് ഇത് എളുപ്പത്തിൽ മനസ്സിലാക്കാൻ കഴിയില്ല.

ഇത് ഹോം ടാബുമായി ബന്ധപ്പെട്ട ഉള്ളടക്കത്തിലെ ചില പ്ലെയ്‌സ്‌ഹോൾഡർ ഉള്ളടക്കമാണ്. മറ്റൊരു ടാബിൽ ക്ലിക്കുചെയ്യുന്നത് ഇതിന്റെ ദൃശ്യപരത അടുത്തതിനായി മാറ്റും. ഉള്ളടക്ക ദൃശ്യപരതയും സ്റ്റൈലിംഗും നിയന്ത്രിക്കാൻ ജാവാസ്ക്രിപ്റ്റ് ടാബ് ക്ലാസുകൾ സ്വാപ്പ് ചെയ്യുന്നു. ടാബുകൾ, ഗുളികകൾ, മറ്റേതെങ്കിലും- .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>മുകളിൽ കാണിച്ചിരിക്കുന്നതുപോലെ -അധിഷ്ഠിത മാർക്ക്അപ്പ് അല്ലെങ്കിൽ ഏതെങ്കിലും അനിയന്ത്രിതമായ "നിങ്ങളുടെ സ്വന്തം റോൾ" മാർക്ക്അപ്പ് ഉപയോഗിച്ച് ഇത് പ്രവർത്തിക്കുന്നു. നിങ്ങൾ ഉപയോഗിക്കുന്നുണ്ടെങ്കിൽ <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>

ഒപ്പം ലംബമായ ഗുളികകളുമായി.

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>

JavaScript വഴി

JavaScript വഴി ടാബബിൾ ടാബുകൾ പ്രവർത്തനക്ഷമമാക്കുക (ഓരോ ടാബും വ്യക്തിഗതമായി സജീവമാക്കേണ്ടതുണ്ട്):

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})

നിങ്ങൾക്ക് വ്യക്തിഗത ടാബുകൾ പല തരത്തിൽ സജീവമാക്കാം:

var triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var 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">...</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 രീതികളും അസമന്വിതവും ഒരു പരിവർത്തനം ആരംഭിക്കുന്നതുമാണ് . പരിവർത്തനം ആരംഭിച്ചയുടൻ അവർ വിളിക്കുന്ന ആളിലേക്ക് മടങ്ങുന്നു, പക്ഷേ അത് അവസാനിക്കുന്നതിന് മുമ്പ് . കൂടാതെ, ഒരു സംക്രമണ ഘടകത്തിലെ ഒരു മെത്തേഡ് കോൾ അവഗണിക്കപ്പെടും .

കൂടുതൽ വിവരങ്ങൾക്ക് ഞങ്ങളുടെ JavaScript ഡോക്യുമെന്റേഷൻ കാണുക .

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