නව්ස්

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

මූලික නාවික

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

මූලික .navසංරචකය flexbox සමඟ ගොඩනගා ඇති අතර සියලු වර්ගවල සංචාලන සංරචක තැනීම සඳහා ශක්තිමත් පදනමක් සපයයි. එයට සමහර විලාසිතා අභිබවා යාම (ලැයිස්තු සමඟ වැඩ කිරීම සඳහා), විශාල පහර ප්‍රදේශ සඳහා සමහර සබැඳි පෑඩිං සහ මූලික ආබාධිත මෝස්තර ඇතුළත් වේ.

මූලික .navසංරචකයට කිසිදු .activeතත්වයක් ඇතුළත් නොවේ. පහත උදාහරණවලට පන්තිය ඇතුළත් වේ, ප්‍රධාන වශයෙන් මෙම විශේෂිත පන්තිය කිසිදු විශේෂ මෝස්තරයක් ප්‍රේරණය නොකරන බව පෙන්වීමට.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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පන්තිය සමඟ ටැබ් ලෙස දෘශ්‍ය ලෙස හැඩගස්වා තිබුණද , , හෝ ගුණාංග ලබා නොදිය යුතු බව සලකන්න. මේවා සුදුසු වන්නේ ARIA කර්තෘ ප්‍රායෝගික මාර්ගෝපදේශ ටැබ් රටාවේ විස්තර කර ඇති පරිදි ගතික ටැබ් අතුරුමුහුණත් සඳහා පමණි . උදාහරණයක් ලෙස මෙම කොටසේ ගතික ටැබ් අතුරුමුහුණත් සඳහා JavaScript හැසිරීම බලන්න .role="tablist"role="tab"role="tabpanel"

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

ටිකක් අමතර HTML සහ dropdowns JavaScript ප්ලගිනය සමඟ පතන මෙනු එක් කරන්න .

පතන සහිත ටැබ්

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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>

JavaScript හැසිරීම

bootstrap.jsදේශීය අන්තර්ගතයේ ටැබ් කළ හැකි කවුළු සෑදීමට අපගේ සංචාලන ටැබ් සහ පෙති දිගු කිරීමට ටැබ් ජාවාස්ක්‍රිප්ට් ප්ලගිනය-එය තනි තනිව හෝ සම්පාදනය කළ ගොනුව හරහා ඇතුළත් කරන්න.

ඔබ අපගේ ජාවාස්ක්‍රිප්ට් නිර්මාණය කරන්නේ මූලාශ්‍රයෙන් නම්, එයට අවශ්‍ය වේutil.js .

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

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

ටැබ් පැනලය සඳහා ස්ථාන දරණ අන්තර්ගතය. මේක home tab එකට අදාලයි. ඔබව සැතපුම් ගණනක් ඉහළට ගෙන යයි, එතරම් ඉහළට, 'ඇයට එක ජාත්‍යන්තර සිනහවක් ලැබී ඇති නිසා. මගේ ඇඳේ නාඳුනන කෙනෙක් ඉන්නවා, මගේ ඔළුවේ ගැස්මක් තියෙනවා. අපොයි නෑ. වෙනත් ජීවිතයකදී මම ඔබව නවත්වන්නම්. මොකද මම, මම ඕනෑම දෙයකට දක්ෂයි. මගේ ඔටුන්න හිමි සටනට සුදුසුයි. ඔබේ දෙමාපියන්ගේ මත්පැන් සොරකම් කර වහලයට නැගීමට භාවිතා කරයි. ටෝන්, ටෑන් ෆිට් සහ සුදානම්, එය ඉහළට හරවන්න, එය බර වැඩි වීමට හේතු වේ. ඇගේ ආදරය මත්ද්‍රව්‍යයක් වැනිය. මම හිතන්නේ මට තේරීමක් තිබුණා කියලා මට අමතක වුණා.

ටැබ් පැනලය සඳහා ස්ථාන දරණ අන්තර්ගතය. මෙය පැතිකඩ ටැබයට සම්බන්ධයි. ඔබ හොඳම ගෘහ නිර්මාණ ශිල්පය ලබා ඇත. විදේශ ගමන් බලපත්‍ර මුද්දර, ඇය කොස්මොපොලිටන් ය. හොඳයි, නැවුම්, දරුණු, අපි එය අගුලු දමා ගත්තා. කවදාවත් හිතුවෙ නෑ දවසක මට ඔයාව නැති වෙයි කියලා. ඇය ඔබේ හදවත කනවා. ඔබේ හාදුව විශ්වීයයි, සෑම චලනයක්ම මායාවකි. මම කිව්වේ ඒ අය, මම කිව්වේ ඇය වගේ. සුභ පැතුම් ආදරණීයයන් අපි ගමනක් යමු. ජූලි 4 වැනි රාත්‍රිය පමණක් අයිති කරගන්න! නමුත් ඔබ නාස්ති වීමට වඩා කැමතියි.

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>වටා එති.

Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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>

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

ටැබ් පැනලය සඳහා ස්ථාන දරණ අන්තර්ගතය. මේක home tab එකට අදාලයි. ඔයා ඩවුන්ටවුන් බ්ලූස් ගායනා කරනවා දැක්කා. ඔබ කාණුව රවුම් කර බලන්න. ඇයි මට නවතින්න දෙන්නෙ නැත්තෙ? ඔටුන්න පැළඳ සිටින හිස බරයි. ඔව්, අපි දේවදූතයන් අඬන්න, ඉහළ සිට පොළොව මත වර්ෂාපතනය. ප්‍රසංගය ත්‍රිමාණයෙන් බලන්න ඕන, චිත්‍රපටියක්. ඔබට කවදා හෝ දැනෙනවාද, කඩදාසි සිහින් බව දැනේ. එය ඔව් හෝ නැත, සමහර විට නැත.

Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
    </div>
  </div>
  <div class="col-9">
    <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>
</div>

දත්ත ගුණාංග භාවිතා කිරීම

data-toggle="tab"ඔබට සරලව සඳහන් කිරීමෙන් හෝ data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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 හරහා

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

$('#myTab button').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

ඔබට ක්‍රම කිහිපයකින් තනි ටැබ් සක්‍රිය කළ හැක:

$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').tab('show') // Select third 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 ලේඛන බලන්න .

$().tab

ටැබ් මූලද්‍රව්‍යයක් සහ අන්තර්ගත බහාලුමක් සක්‍රිය කරයි. පටිත්තෙහි එක්කෝ තිබිය යුතුය, data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>
  $(function () {
    $('#myTab li:last-child button').tab('show')
  })
</script>

.tab('show')

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

$('#someTab').tab('show')

.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සිදුවීම් ඉවත් නොකෙරේ.

සිදුවීම් වර්ගය	විස්තර
show.bs.tab	මෙම සිදුවීම ටැබ් දර්ශනය මත වෙඩි තැබේ, නමුත් නව ටැබය පෙන්වීමට පෙර. ක්‍රියාකාරී ටැබය සහ පෙර ක්‍රියාකාරී ටැබය (තිබේ නම්) පිළිවෙලින් භාවිතා කරන්න `event.target`සහ ඉලක්ක කරන්න.`event.relatedTarget`
පෙන්නුවා.bs.tab	මෙම සිදුවීම ටැබ් එකක් පෙන්වීමෙන් පසු ටැබ් දර්ශනය මත වෙඩි තබයි. ක්‍රියාකාරී ටැබය සහ පෙර ක්‍රියාකාරී ටැබය (තිබේ නම්) පිළිවෙලින් භාවිතා කරන්න `event.target`සහ ඉලක්ක කරන්න.`event.relatedTarget`
hide.bs.tab	නව පටිත්තක් පෙන්වීමට (සහ ඒ අනුව පෙර සක්‍රිය ටැබය සැඟවීමට) මෙම සිදුවීම ගිනිබත් වේ. පිළිවෙළින් වත්මන් සක්‍රිය ටැබය සහ නව ඉක්මනින් සක්‍රිය පටිත්ත ඉලක්ක කර `event.target`භාවිතා කරන්න .`event.relatedTarget`
සැඟවුණු.bs.tab	නව ටැබයක් පෙන්වීමෙන් පසුව මෙම සිදුවීම ගිනිබත් වේ (එමගින් පෙර සක්‍රිය ටැබය සැඟවී ඇත). පෙර සක්‍රිය ටැබය සහ නව සක්‍රිය ටැබය පිළිවෙලින් භාවිතා කරන්න `event.target`සහ ඉලක්ක කිරීමට.`event.relatedTarget`

$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})