ප්‍රධාන අන්තර්ගතය වෙත යන්න ලේඛන සංචාලනය වෙත යන්න
in English

Navs සහ ටැබ්

Bootstrap හි ඇතුළත් සංචාලන සංරචක භාවිතා කරන ආකාරය සඳහා ලේඛන සහ උදාහරණ.

මෙම පිටුවේ

මූලික නාවික

.navBootstrap හි ඇති සංචාලනය මූලික පන්තියේ සිට සක්‍රිය සහ ආබාධිත තත්ත්වයන් දක්වා සාමාන්‍ය සලකුණු සහ මෝස්තර බෙදා ගනී . එක් එක් විලාසය අතර මාරු වීමට විකරණකාරක පන්ති මාරු කරන්න.

මූලික .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">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 සංරචකයේ ශෛලිය වෙනස් කරන්න . අවශ්‍ය පරිදි මිශ්‍ර කර ගලපන්න, නැතහොත් ඔබේම දෑ සාදන්න.

තිරස් පෙළගැස්ම

flexbox උපයෝගිතා සමඟ ඔබේ නාවිකයේ තිරස් පෙළගැස්ම වෙනස් කරන්න . පෙරනිමියෙන්, 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උපයෝගිතා සමඟ නම්‍ය අයිතම දිශාව වෙනස් කිරීමෙන් ඔබේ සංචලනය ගොඩ ගසන්න . සමහර viewports මත ඒවා ගොඩගැසීමට අවශ්‍ය නමුත් අනෙක් ඒවා නොවේද? ප්‍රතිචාරාත්මක අනුවාද භාවිතා කරන්න (උදා, .flex-sm-column).

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">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ටැබ් කරන ලද අතුරු මුහුණතක් උත්පාදනය කිරීමට පන්තිය එක් කරයි. අපගේ ටැබ් ජාවාස්ක්‍රිප්ට් ප්ලගිනය සමඟින් ටැබ් කළ හැකි කලාප සෑදීමට ඒවා භාවිත කරන්න .

<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ඔබගේ s සමඟ පවතින සියලුම ඉඩ සමානුපාතිකව පිරවීමට , භාවිතා කරන්න .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>

flex උපයෝගිතා සමඟ වැඩ කිරීම

ඔබට ප්‍රතිචාරාත්මක නාවික වෙනස්කම් අවශ්‍ය නම්, flexbox උපයෝගිතා මාලාවක් භාවිතා කිරීම සලකා ���ලන්න . වඩා වාචික වුවත්, මෙම උපයෝගිතා ප්‍රතිචාරාත්මක කඩඉම් හරහා වැඩි අභිරුචිකරණයක් ලබා දෙයි. පහත උදාහරණයේ, අපගේ 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 හැසිරීම බලන්න . අපගේ ජාවාස්ක්‍රිප්ට් සක්‍රිය ටැබය මත එක් කිරීමෙන් තෝරාගත් තත්වය හසුරුවන බැවින් ගතික ටැබ් කළ අතුරුමුහුණත්වල ගුණාංගය අවශ්‍ය නොවේ .role="tablist"role="tab"role="tabpanel" aria-currentaria-selected="true"

පතනයන් භාවිතා කිරීම

ටිකක් අමතර HTML සහ dropdowns 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 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දේශීය අන්තර්ගතයේ ටැබ් කළ හැකි කවුළු සෑදීමට අපගේ සංචාලන ටැබ් සහ පෙති දිගු කිරීමට ටැබ් ජාවාස්ක්‍රිප්ට් ප්ලගිනය-එය තනි තනිව හෝ සම්පාදනය කළ ගොනුව හරහා ඇතුළත් කරන්න.

WAI ARIA කර්තෘ පරිචයන් හි විස්තර කර ඇති පරිදි ගතික ටැබ් අතුරුමුහුණත්, උපකාරක තාක්‍ෂණ (තිර කියවනය වැනි) භාවිතා කරන්නන් හට ඒවායේ ව්‍යුහය, ක්‍රියාකාරීත්වය සහ වත්මන් තත්ත්වය ප්‍රකාශ කිරීම සඳහා role="tablist", role="tab", role="tabpanel", සහ අමතර ගුණාංග අවශ්‍ය වේ. aria-හොඳම භාවිතයක් ලෙස, <button>නව පිටුවකට හෝ ස්ථානයකට සංචාලනය කරන සබැඳිවලට වඩා ගතික වෙනසක් ඇති කරන පාලන වන බැවින්, ටැබ් සඳහා මූලද්‍රව්‍ය භාවිතා කිරීම අපි නිර්දේශ කරමු.

ගතික ටැබ් අතුරුමුහුණත් වල පතන මෙනු අඩංගු නොවිය යුතු බව සලකන්න , මෙය භාවිතා කිරීමේ සහ ප්‍රවේශ්‍යතා ගැටළු දෙකම ඇති කරයි. උපයෝගිතා ඉදිරිදර්ශනයකින්, දැනට සංදර්ශණය වන ටැබ් ප්‍රේරක මූලද්‍රව්‍යය ක්ෂණිකව නොපෙනීම (එය සංවෘත පතන මෙනුව තුළ ඇති බැවින්) ව්‍යාකූලත්වයට හේතු විය හැක. ප්‍රවේශ්‍යතා දෘෂ්ටි කෝණයකින්, මේ ආකාරයේ ඉදිකිරීම් සාමාන්‍ය WAI ARIA රටාවකට සිතියම්ගත කිරීමට දැනට සංවේදී ක්‍රමයක් නොමැත, එනම් උපකාරක තාක්ෂණයන් භාවිතා කරන්නන්ට එය පහසුවෙන් තේරුම් ගත නොහැකි බවයි.

මෙය මුල් පටිත්තෙහි ආශ්‍රිත අන්තර්ගතයේ තැන් දරණ අන්තර්ගතයකි. වෙනත් ටැබයක් ක්ලික් කිරීමෙන් මීළඟ සඳහා මෙහි දෘශ්‍යතාව ටොගල් කරනු ඇත. JavaScript ටැබය අන්තර්ගත දෘශ්‍යතාව සහ මෝස්තරය පාලනය කිරීමට පන්ති මාරු කරයි. ඔබට එය ටැබ්, පෙති සහ වෙනත් ඕනෑම .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>

ටැබ් ප්ලගිනය පෙති සමඟද ක්‍රියා කරයි.

මෙය මුල් පටිත්තෙහි ආශ්‍රිත අන්තර්ගතයේ තැන් දරණ අන්තර්ගතයකි. වෙනත් ටැබයක් ක්ලික් කිරීමෙන් මීළඟ සඳහා මෙහි දෘශ්‍යතාව ටොගල් කරනු ඇත. JavaScript ටැබය අන්තර්ගත දෘශ්‍යතාව සහ මෝස්තරය පාලනය කිරීමට පන්ති මාරු කරයි. ඔබට එය ටැබ්, පෙති සහ වෙනත් ඕනෑම .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-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>

සහ සිරස් පෙති සමඟ.

මෙය මුල් පටිත්තෙහි ආශ්‍රිත අන්තර්ගතයේ තැන් දරණ අන්තර්ගතයකි. වෙනත් ටැබයක් ක්ලික් කිරීමෙන් මීළඟ සඳහා මෙහි දෘශ්‍යතාව ටොගල් කරනු ඇත. JavaScript ටැබය අන්තර්ගත දෘශ්‍යතාව සහ මෝස්තරය පාලනය කිරීමට පන්ති මාරු කරයි. ඔබට එය ටැබ්, පෙති සහ වෙනත් ඕනෑම .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 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 හරහා

ජාවාස්ක්‍රිප්ට් හරහා ටැබ් කළ හැකි ටැබ් සබල කරන්න (එක් එක් ටැබ් එක තනි තනිව සක්‍රිය කළ යුතුය):

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

ටැබ් මූලද්‍රව්‍යයක් සහ අන්තර්ගත බහාලුමක් සක්‍රිය කරයි. පටිත්තෙහි 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 button')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

show

ලබා දී ඇති ටැබය තෝරා එහි සම්බන්ධිත කවුළුව පෙන්වයි. කලින් තෝරාගත් වෙනත් ටැබ් එකක් නොතේරෙන අතර එහි සම්බන්ධිත කවුළුව සැඟවී ඇත. ටැබ් කවුළුව ඇත්ත වශයෙන්ම පෙන්වීමට පෙර (එනම් සිදුවීම සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ.shown.bs.tab

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

  tab.show()

dispose

මූලද්‍රව්‍යයක ටැබය විනාශ කරයි.

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

Events

නව ටැබයක් පෙන්වන විට, සිදුවීම් පහත දැක්වෙන අනුපිළිවෙලින් සිදු වේ:

  1. hide.bs.tab(වත්මන් සක්‍රිය ටැබය මත)
  2. show.bs.tab(පෙන්වීමට ඇති පටිත්තෙහි)
  3. hidden.bs.tab(පෙර සක්‍රිය පටිත්තෙහි, hide.bs.tabසිදුවීමට සමාන එකක්)
  4. 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
})