ناوس

بەڵگەنامە و نموونە بۆ چۆنیەتی بەکارهێنانی پێکهاتەکانی گەشتکردن کە لەخۆدەگرێت لە Bootstrap.

Base nav

گەشتکردن کە لە Bootstrap بەردەستە هاوبەشی مارکاپی گشتی و ستایلەکانە، لە .navپۆلی بنەڕەتییەوە تا باری چالاک و لەکارخراو. پۆلەکانی دەستکاریکەر بگۆڕە بۆ گۆڕینی نێوان هەر ستایلێک.

پێکهاتەی بنەڕەتی .navبە فلیکس بۆکس دروستکراوە و بناغەیەکی بەهێز بۆ دروستکردنی هەموو جۆرە پێکهاتەکانی گەشتیاری دابین دەکات. هەندێک لە سەرپێچی ستایل (بۆ کارکردن لەگەڵ لیستەکان)، هەندێک پادکردنی بەستەر بۆ ناوچەی گەورەتری لێدان، و ستایلکردنی بنەڕەتی لەکارخراو لەخۆدەگرێت.

پێکهاتەی بنەڕەتی هیچ حاڵەتێک .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 وەک سەرەوە بەکاربهێنە ، <ol>ئەگەر ڕیزبەندی شتەکانت گرنگە، یان خۆت بە <nav>توخمێک ڕۆڵ بکە. چونکە .navبەکارهێنانەکان display: flex, بەستەرەکانی nav هەمان ڕەفتار دەکەن کە بابەتە navەکان دەیکەن، بەڵام بەبێ نیشاندانی زیادە.

<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 بگۆڕە بە دەستکاریکەر و سوودمەندیەکان. بەپێی پێویست تێکەڵاو بکە و یەکسان بکە، یان خۆت دروستی بکە.

ڕێکخستنی ئاسۆیی

ڕێکخستنی ئاسۆیی nav ـەکەت بگۆڕە بە سوودمەندییەکانی 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سوودمەندیەکە کۆبکەرەوە. پێویستە لەسەر هەندێک ڤیوپۆرت کۆیان بکەیتەوە بەڵام هەندێکی تر نا؟ وەشانی وەڵامدەرەوە بەکاربهێنە (بۆ نموونە، .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-items ـەکەت پڕ بکەیتەوە، بەکاربهێنە .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>-based navigation.

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

کارکردن لەگەڵ کۆمپانیاکانی فلیکس

ئەگەر پێویستت بە گۆڕانکارییەکانی nav وەڵامدەرەوەیە، بیر لە بەکارهێنانی زنجیرەیەک لە سوودمەندییەکانی 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 بەکاردەهێنیت بۆ دابینکردنی پەتی گەشتکردن، دڵنیابە کە a زیاد دەکەیت role="navigation"بۆ لۆژیکیترین کۆنتێنەری باوکی <ul>, یان <nav>توخمێک بە دەوری تەواوی گەشتەکەدا بپێچە. ڕۆڵەکە زیاد مەکە بۆ <ul>خۆی، چونکە ئەمە ڕێگری دەکات لەوەی وەک لیستێکی ڕاستەقینە لەلایەن تەکنەلۆژیا یارمەتیدەرەکانەوە ڕابگەیەنرێت.

تێبینی بکە کە پەتی گەشتکردن، تەنانەت ئەگەر بە شێوەیەکی بینراو وەک تاب لەگەڵ .nav-tabsپۆلەکەدا ستایل کرابێت، نابێت ,role="tablist" یان role="tab"تایبەتمەندی role="tabpanel"بدرێت . ئەمانە تەنها بۆ ڕووکارە تابدارە داینامیکیەکان گونجاون، وەک لە نەخشی تابەکانی ڕێنمایی پراکتیزەکانی نووسینی ARIA باسکراوە . بۆ نموونە سەیری هەڵسوکەوتی جاڤاسکڕێپت بکە بۆ ڕووکارە تابدارە داینامیکیەکان لەم بەشەدا.

بەکارهێنانی درۆپداونەکان

زیادکردنی مینیوی دابەزین بە کەمێک HTML زیادە و پێوەکراوەکانی 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>

هەڵسوکەوتی جاڤاسکڕێپت

پێوەکراوەکەی جاڤاسکڕێپتی تاب بەکاربهێنە-بە تاک یان لە ڕێگەی bootstrap.jsپەڕگەی کۆکراوەیەوە لەخۆی بگرە-بۆ درێژکردنەوەی تاب و حەبەکانی گەشتکردنمان بۆ دروستکردنی پەنجەرەی تابکراو لە ناوەڕۆکی ناوخۆیی.

ئەگەر جاڤاسکڕێپتەکەمان لە سەرچاوەوە دروست دەکەیت، پێویستی بەutil.js .

ڕووکارە تابدارە داینامیکیەکان، وەک لە نەخشی تابەکانی ڕێنمایی شێوازەکانی نووسینی ARIA باسکراوە ، پێویستیان بە role="tablist", role="tab", role="tabpanel", و تایبەتمەندی زیادە aria-هەیە بۆ ئەوەی پێکهاتە، کارایی و دۆخی ئێستایان بگەیەننە بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان (وەک خوێنەری شاشە). وەک باشترین پراکتیزە، پێشنیار دەکەین <button>توخمەکان بۆ تابەکان بەکاربهێنرێت، چونکە ئەمانە کۆنتڕۆڵن کە گۆڕانکارییەکی داینامیکی دەستپێدەکەن، نەک ئەو بەستەرانەی کە دەچنە لاپەڕە یان شوێنێکی نوێ.

تێبینی بکە کە پێوەکراوەکەی جاڤاسکڕێپتی تاب پشتگیری لە ڕووکارە تابدارەکان ناکات کە مینیوی دابەزینیان تێدایە، چونکە ئەمانە دەبنە هۆی هەردوو کێشەی بەکارهێنان و دەستڕاگەیشتن. لە ڕوانگەی بەکارهێنانەوە، ئەو ڕاستییەی کە توخمە دەستپێکەری تابەکەی ئێستا پیشان دراوە دەستبەجێ دیار نییە (وەک چۆن لە ناو مینیوی داخراودایە) دەتوانێت ببێتە هۆی سەرلێشێواوی. لە ڕوانگەی دەستڕاگەیشتنەوە، لە ئێستادا هیچ ڕێگەیەکی عەقڵانی نییە بۆ نەخشەکێشانی ئەم جۆرە بنیاتنانە بۆ نەخشێکی ستانداردی WAI ARIA، بەو مانایەی کە ناتوانرێت بە ئاسانی بۆ بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان تێبگەین.

ناوەڕۆکی شوێنگرەوە بۆ پانێڵی تاب. ئەم یەکەیان پەیوەندی بە تابی ماڵەوە هەیە. میل بەرزت دەبات، ئەوەندە بەرز، چونکە ئەو یەک زەردەخەنە نێودەوڵەتییەی هەیە. لە جێگاکەمدا کەسێکی نامۆ هەیە، لێدانێک لە سەرمدا هەیە. ئای نا. لە ژیانێکی تردا وام لێدەکرد بمێنیتەوە. چونکە من، من توانای هەر شتێکم هەیە. خۆگونجاندن بۆ شەڕی تاجکردنم. بەکاردێت بۆ دزینی مەی دایک و باوکت و سەرکەوتن بۆ سەربان. تۆن، تان گونجاو و ئامادە، گێڕانەوەی بۆ سەرەوە هۆکارەکەی gettin' قورس. خۆشەویستی ئەو وەک مادەی هۆشبەر وایە. من پێشبینی دەکەم کە لەبیرم چووە بژاردەیەکم هەیە.

ناوەڕۆکی شوێنگرەوە بۆ پانێڵی تاب. ئەم یەکەیان پەیوەندی بە تابی پرۆفایلەوە هەیە. باشترین تەلارسازیت دەست کەوت. مۆری پاسپۆرت، ئەو کۆسمۆپۆلیتییە. ورد، تازە، توند، ئێمە لەسەر قوفڵ بەدەستمان هێنا. هەرگیز پلانم نەبووە ڕۆژێک بێت تۆ لەدەست بدەم. دڵت دەخوات دەرەوە. ماچەکەت گەردوونییە، هەموو جوڵەیەک سیحرە. مەبەستم ئەوانەیە، مەبەستم وەک ئەوەی ئەو کەسە بێت. سڵاو ئازیزان با گەشتێک بکەین. تەنها خاوەنی شەوەکە وەک ٤ی تەمموز! بەڵام پێت باشە بەفیڕۆ بیت.

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>

هەروەها پێوەکراوەکەی tabs لەگەڵ حەبەکان کاردەکات.

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

وە لەگەڵ حەبی ڕاست.

ناوەڕۆکی شوێنگرەوە بۆ پانێڵی تاب. ئەم یەکەیان پەیوەندی بە تابی ماڵەوە هەیە. تۆم بینی لە ناوەندی شار گۆرانی بلوز دەڵێیتەوە. سەیری بکە کە بە دەوری ئاوەڕۆکەدا دەسوڕێیتەوە. بۆ ناهێڵی لێم بوەستم؟ قورسە ئەو سەرەی کە تاجی لەبەر دەکات. بەڵێ، ئێمە فریشتەکان دەگرین، لە سەرەوە باران دەبارێتە سەر زەوی. دەتەوێت نمایشەکە بە شێوەی 3D ببینیت، فیلمێکە. ئایا هەرگیز هەست دەکەیت، هەست دەکەیت ئەوەندە کاغەز تەنک دەکەیت. بەڵێ یان نەخێرە، نەخێر ڕەنگە.

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>

لە ڕێگەی جاڤاسکڕێپتەوە

تابەکانی تابەکان لە ڕێگەی جاڤاسکڕێپتەوە چالاک بکە (هەر تابێک پێویستە بە تاک چالاک بکرێت):

$('#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 ناهاوسەنگن و دەست بە گواستنەوە دەکەن . هەر کە گواستنەوەکە دەستی پێکرد بەڵام پێش ئەوەی کۆتایی بێت دەگەڕێنەوە لای پەیوەندیکەرەکە . سەرەڕای ئەوە، بانگەوازێکی شێواز لەسەر پێکهاتەیەکی گواستنەوە پشتگوێ دەخرێت .

بۆ زانیاری زیاتر سەیری بەڵگەنامەکانی جاڤاسکڕێپت بکە .

$().tab

توخمێکی تاب و کۆنتێنەری ناوەڕۆک چالاک دەکات. تاب دەبێت data-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-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('نیشاندان')

تابە پێدراوەکە هەڵدەبژێرێت و پەنجەرەی پەیوەندیدارەکەی پیشان دەدات. هەر تابێکی تر کە پێشتر هەڵبژێردرابێت هەڵنەبژێردرابێت و پەنجەرەی پەیوەندیدارەکەی دەشاردرێتەوە. پێش ئەوەی لە ڕاستیدا پەنجەرەی تابەکە پیشان بدرێت (واتە پێش ئەوەی 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`بۆ ئامانجکردنی تابی چالاک و تابی چالاک پێشوو (ئەگەر بەردەست بێت) بە رێککەوت.
شاردنەوەی.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
})