مونو انواع مختلفی از اجزای تب های بوت استرپ را با کمی سفارشی‌سازی متناسب با استانداردهای طراحی خود ارائه می‌دهد. برای اطلاعات بیشتر، لطفاً به مستندات رسمی بوت استرپ مراجعه کنید.

تب های پیشفرض


<ul class="nav nav-tabs mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#nav-tabs-home" role="tab"
      aria-controls="nav-tabs" aria-selected="true">خانه</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="nav-profile-tab" data-toggle="pill" href="#nav-profile" role="tab"
      aria-controls="nav-profile" aria-selected="false">پروفایل</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
      aria-expanded="false">منو کشویی</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">عملیات</a>
      <a class="dropdown-item" href="#">عملیات دیگر</a>
      <a class="dropdown-item" href="#">یه چیز دیگه اینجا</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">لینک جداگانه</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">غیرفعال</a>
  </li>
</ul>
<div class="tab-content mt-5" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-tabs-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>

          

تب دارای آیکون


<ul class="nav nav-tabs mb-3" id="pills-tab2" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#nav-tabs-home2" role="tab"
      aria-controls="nav-tabs" aria-selected="true">
      <i class="mdi mdi-star-outline"></i>
      خانه</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="nav-profile-tab" data-toggle="pill" href="#nav-profile2" role="tab"
      aria-controls="nav-profile" aria-selected="false">
      <i class="mdi mdi-account"></i>
      پروفایل</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
      aria-expanded="false">
      <i class="mdi mdi-checkbox-multiple-blank-outline"></i>
      منو کشویی</a>

    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">عملیات</a>
      <a class="dropdown-item" href="#">عملیات دیگر</a>
      <a class="dropdown-item" href="#">یه چیز دیگه اینجا</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">لینک جداگانه</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">غیرفعال</a>
  </li>
</ul>
<div class="tab-content mt-5" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-tabs-home2" role="tabpanel" aria-labelledby="nav-home-tab">
    ...
  </div>
  <div class="tab-pane fade" id="nav-profile2" role="tabpanel" aria-labelledby="nav-profile-tab">
    ...
  </div>
</div>

          

تب دارای خط زیر


<ul class="nav nav-underline-active-primary mb-3" id="pills-tab2" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#nav-tabs-home2" role="tab"
      aria-controls="nav-tabs" aria-selected="true">خانه</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="nav-profile-tab" data-toggle="pill" href="#nav-profile2" role="tab"
      aria-controls="nav-profile" aria-selected="false">پروفایل</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
      aria-expanded="false">منو کشویی</a>

    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">عملیات</a>
      <a class="dropdown-item" href="#">عملیات دیگر</a>
      <a class="dropdown-item" href="#">یه چیز دیگه اینجا</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">لینک جداگانه</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">غیرفعال</a>
  </li>
</ul>
<div class="tab-content mt-5" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-tabs-home2" role="tabpanel" aria-labelledby="nav-home-tab">
    ...
  </div>
  <div class="tab-pane fade" id="nav-profile2" role="tabpanel" aria-labelledby="nav-profile-tab">
    ...
  </div>
</div>

          

تب‌ تراز شده


<ul class="nav nav-underline-active-primary mb-3 justify-content-between" id="pills-tab12" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#nav-home-underline-primary" role="tab"
      aria-controls="nav-tabs" aria-selected="true">خانه</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="nav-profile-tab" data-toggle="pill" href="#nav-profile-underline-primary" role="tab"
      aria-controls="nav-profile" aria-selected="false">پروفایل</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
      aria-expanded="false">منو کشویی</a>

    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">عملیات</a>
      <a class="dropdown-item" href="#">عملیات دیگر</a>
      <a class="dropdown-item" href="#">یه چیز دیگه اینجا</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">لینک جداگانه</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">غیرفعال</a>
  </li>
</ul>
<div class="tab-content mt-5" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home-underline-primary" role="tabpanel" aria-labelledby="nav-home-tab">
    ...
  </div>
  <div class="tab-pane fade" id="nav-profile-underline-primary" role="tabpanel" aria-labelledby="nav-profile-tab">
    ...
  </div>
</div>

          

تب کپسولی


<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab"
      aria-controls="pills-home" aria-selected="true">خانه</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab"
      aria-controls="pills-profile" aria-selected="false">پروفایل</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
      aria-expanded="false">منو کشویی</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">عملیات</a>
      <a class="dropdown-item" href="#">عملیات دیگر</a>
      <a class="dropdown-item" href="#">یه چیز دیگه اینجا</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">لینک جداگانه</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">غیرفعال</a>
  </li>
</ul>
<div class="tab-content mt-5" id="nav-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="nav-profile-tab">
    ...
  </div>
</div>

          

تب کپسولی دارای آیکون


<ul class="nav nav-pills mb-3" id="pills-tab2" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#nav-tabs-home2" role="tab"
      aria-controls="nav-tabs" aria-selected="true">
      <i class="mdi mdi-star-outline"></i>
      خانه</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="nav-profile-tab" data-toggle="pill" href="#nav-profile2" role="tab"
      aria-controls="nav-profile" aria-selected="false">
      <i class="mdi mdi-account"></i>
      پروفایل</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
      aria-expanded="false">
      <i class="mdi mdi-checkbox-multiple-blank-outline"></i>
      منو کشویی</a>

    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">عملیات</a>
      <a class="dropdown-item" href="#">عملیات دیگر</a>
      <a class="dropdown-item" href="#">یه چیز دیگه اینجا</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">لینک جداگانه</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">غیرفعال</a>
  </li>
</ul>
<div class="tab-content mt-5" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-tabs-home2" role="tabpanel" aria-labelledby="nav-home-tab">
    ...
  </div>
  <div class="tab-pane fade" id="nav-profile2" role="tabpanel" aria-labelledby="nav-profile-tab">
    ...
  </div>
</div>

          

تب کپسولی دارای حاشیه


<ul class="nav nav-custom-pills mb-3" id="pills-tab-custom" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home-custom-pill" role="tab"
      aria-controls="pills-home" aria-selected="true">خانه</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile-custom-pill" role="tab"
      aria-controls="pills-profile" aria-selected="false">پروفایل</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
      aria-expanded="false">منو کشویی</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">عملیات</a>
      <a class="dropdown-item" href="#">عملیات دیگر</a>
      <a class="dropdown-item" href="#">یه چیز دیگه اینجا</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">لینک جداگانه</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">غیرفعال</a>
  </li>
</ul>
<div class="tab-content mt-5" id="nav-tabContent">
  <div class="tab-pane fade show active" id="pills-home-custom-pill" role="tabpanel" aria-labelledby="pills-home-tab">
    ...
  </div>
  <div class="tab-pane fade" id="pills-profile-custom-pill" role="tabpanel" aria-labelledby="nav-profile-tab">
    ...
  </div>
</div>

          

تب کپسولی تراز شده


<ul class="nav nav-pills mb-3 justify-content-between" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home-justify-content-between"
      role="tab" aria-controls="pills-home" aria-selected="true">خانه</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile-justify-content-between"
      role="tab" aria-controls="pills-profile" aria-selected="false">پروفایل</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
      aria-expanded="false">منو کشویی</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">عملیات</a>
      <a class="dropdown-item" href="#">عملیات دیگر</a>
      <a class="dropdown-item" href="#">یه چیز دیگه اینجا</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">لینک جداگانه</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">غیرفعال</a>
  </li>
</ul>
<div class="tab-content mt-5" id="nav-tabContent">
  <div class="tab-pane fade show active" id="pills-home-justify-content-between" role="tabpanel"
    aria-labelledby="pills-home-tab">
    وطن، پاره تن من، کوه‌ های سر به فلک کشیده‌ ات آرزوهای دست نیافتنی‌ ام و دشت‌ های بی‌ کرانت، رویاهای زیبای من هستند… بارز وطن سرسخت ترین، دلیرترین و فداکارترین مبارزی است که برای آزادی و استقلال وطن تا آخرین قطره خون خود مبارزه می کند.
  </div>
  <div class="tab-pane fade" id="pills-profile-justify-content-between" role="tabpanel"
    aria-labelledby="nav-profile-tab">
    وطن، پاره تن من، کوه‌ های سر به فلک کشیده‌ ات آرزوهای دست نیافتنی‌ ام و دشت‌ های بی‌ کرانت، رویاهای زیبای من هستند… بارز وطن سرسخت ترین، دلیرترین و فداکارترین مبارزی است که برای آزادی و استقلال وطن تا آخرین قطره خون خود مبارزه می کند.
  </div>
</div>

          

مخاطبین

افزودن مخاطب جدید