تب‌ها و pill ها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

منو‌ها

اکثر صفحات وب نوعی از منو دارند.

در HTML، منو اغلب بطورت یک لیست نامرتب (و پس از آن استایل بندی شده) است مانند :[۱]

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

اگر می‌خواهید منوی افقی لیست بالا را تولید کنید، کلاس .list-inline را به تگ <ul> اضافه کنید:

<ul class="list-inline">


مشاهدهٔ نتیجه


یا می‌توانید منوی بالا را با تب‌ها و پیل های (Pills) بوت استرپ نمایش دهید (به قسمت پایین توجه کنید).

توجه: برای پی بردن به نحوهٔ قابل تغییر/ پویا کردن تب‌ها و پیل‌ها، به آخرین مثال این صفحه را مراجعه کنید.

تب ها

تب‌ها با کد <ul class="nav nav-tabs"> ایجاد می شوند:

نکته: همچنین صفحهٔ فعلی را با <li class="active"> علامت‌گذاری کنید.

مثال زیر تب جهت یابی (Navigation Tab) را ایجاد می‌کند:

مثال

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>


مشاهدهٔ نتیجه


تب های دارای منوی کرکره ای

تب‌ها می‌توانند دارای منوی کرکره ای هم باشند.

مثال زیر یک منوی کرکره‌ای را به “Menu1” اضافه می‌کند:

مثال

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">Submenu 1-1</a></li>
      <li><a href="#">Submenu 1-2</a></li>
      <li><a href="#">Submenu 1-3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>


مشاهدهٔ نتیجه

پیل ها (Pills)

pillها بوسیلهٔ <ul class="nav nav-pills"> ایجاد می‌شوند. همچنین صفحه جاری را با <li class="active"> مشخص می‌کنند

مثال

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>


مشاهدهٔ نتیجه


پیل های عمودی

پیل‌ها را می‌توان بصورت عمودی نیز نماش داد. تنها باید کلاس .nav-stacked را اضافه کنید:

مثال

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>


مشاهدهٔ نتیجه


پیل های عمودی در یک ردیف

مثال زیر منو پیل‌های عمودی را داخل آخرین ستون قرار می‌دهد؛ بنابراین در یک صفحه نمایش بزرگ، منو در سمت راست نشان داده می‌شود. اما در صفحه نمایش‌های کوچک، محتوا بطور خودکار خودش را با چیدمان تک-ستون (Single-column) تطبیق می‌دهد:

مثال

<div class="col-md-3">
  <ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>


مشاهدهٔ نتیجه


پیل های دارای منوی کرکره ای

پیل‌ها می‌توانند منوی کرکره ای نیز داشته باشند.

مثال زیر یک منوی کرکره ای را به “Menu 1” اضافه می‌کند:

مثال

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">Home</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">Submenu 1-1</a></li>
      <li><a href="#">Submenu 1-2</a></li>
      <li><a href="#">Submenu 1-3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>


مشاهدهٔ نتیجه


پیل ها و تب های وسط چین

برای وسط چین/justify کردن تب‌ها و پیل‌ها، از کلاس .nav-justified استفاده کنید.

توجه داشته باشید که در صفحه نمایش‌های کوچکتر از 768 پیکسل، آیتم‌های لیست بصورت پشته‌ای (Stacked) می‌شوند (محتوا وسط چین باقی می‌ماند):

مثال

<!-- Centered Tabs -->
<ul class="nav nav-tabs nav-justified">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

<!-- Centered Pills -->
<ul class="nav nav-pills nav-justified">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>


مشاهدهٔ نتیجه


تب های پویا / قابل تغییر (Toggleable)

برای ایجاد تب‌های قابل تغییر، ویژگی data-toggle="tab" را به هر لینک اضافه کنید. سپس کلاس .tab-pane را با یک آی دی منحصر بفرد به هر تب اضافه کنید و آنها را درون یک عنصر <div> با کلاس .tab-content قرار دهید.

در صورتیکه بخواهید تب‌ها هنگام کلیک برروی آنها محو و آشکار (Fade in and out) شوند، کلاس .fade را به .tab-pane اضافه کنید:

مثال

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>


مشاهدهٔ نتیجه


پیل های قابل تغییر (Toggleable) / پویا

همان کد مشابه به پیل‌ها اعمال می‌شود، تنها ویژگی data-toggle به data-toggle="pill" تغییر می‌کند:

مثال

<ul class="nav nav-pills">
  <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
  <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>


مشاهدهٔ نتیجه


مرجع کامل جهت یابی بوت استرپ

برای دستیابی به مرجع کامل همهٔ کلاس‌های جهت یابی، به مرجع کامل جهت یابی بوت استرپ ما مراجعه کنید.
برای دستیابی به مرجع کامل همهٔ امکانات تب‌ها، متد‌ها و رویدادها، به مرجع کامل تب JS بوت استرپ ما مراجعه کنید.

منابع آموزشی