تب‌ها و pill ها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
(تغییرمسیر از Bootstrap:تب ها و pill ها)
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp3-menu.png
موارد آموزشی
۱خانه
۲شروع
۳شبکه‌بندی ساده
۴تایپوگرافی
۵جدول‌ها
۶تصویر‌ها
۷Jumbotron
۸Well‌ها
۹هشدارها
۱۰کلیدها
۱۱گروه‌های کلید
۱۲گلیف آیکون‌ها
۱۳نشان‌ها/برچسب‌ها
۱۴نوار پیشرفت
۱۵صفحه‌بندی
۱۶Pager
۱۷گروه‌های لیست
۱۸پنل‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱تب‌ها/Pillها
۲۲نوار راهبری
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵ورودی‌ها ۲
۲۶سایزدهی ورودی
۲۷Media Objectها
۲۸Carousel
۲۹Modal
۳۰راهنمای ابزار
۳۱Popover
۳۲Scrollspy
۳۳Affix
۳۴فیلترها
شبکه‌بندی
زمینه‌ها
مثال‌ها
مرجع JavaScrpit در بوت‌استرپ ۳
مرجع CSS در بوت‌استرپ ۳

منو‌ها

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

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

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

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

<ul class="list-inline">


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


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

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

تب ها

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

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

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

مثال

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


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


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

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

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

مثال

 1 <ul class="nav nav-tabs">
 2   <li class="active"><a href="#">Home</a></li>
 3   <li class="dropdown">
 4     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
 5     <span class="caret"></span></a>
 6     <ul class="dropdown-menu">
 7       <li><a href="#">Submenu 1-1</a></li>
 8       <li><a href="#">Submenu 1-2</a></li>
 9       <li><a href="#">Submenu 1-3</a></li>
10     </ul>
11   </li>
12   <li><a href="#">Menu 2</a></li>
13   <li><a href="#">Menu 3</a></li>
14 </ul>


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

پیل ها (به انگلیسی: Pills)

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

مثال

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


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


پیل های عمودی

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

مثال

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


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


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

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

مثال

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


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


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

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

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

مثال

 1 <ul class="nav nav-pills nav-stacked">
 2   <li class="active"><a href="#">Home</a></li>
 3   <li class="dropdown">
 4     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
 5     <span class="caret"></span></a>
 6     <ul class="dropdown-menu">
 7       <li><a href="#">Submenu 1-1</a></li>
 8       <li><a href="#">Submenu 1-2</a></li>
 9       <li><a href="#">Submenu 1-3</a></li>
10     </ul>
11   </li>
12   <li><a href="#">Menu 2</a></li>
13   <li><a href="#">Menu 3</a></li>
14 </ul>


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


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

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

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

مثال

 1 <!-- Centered Tabs -->
 2 <ul class="nav nav-tabs nav-justified">
 3   <li class="active"><a href="#">Home</a></li>
 4   <li><a href="#">Menu 1</a></li>
 5   <li><a href="#">Menu 2</a></li>
 6   <li><a href="#">Menu 3</a></li>
 7 </ul>
 8 
 9 <!-- Centered Pills -->
10 <ul class="nav nav-pills nav-justified">
11   <li class="active"><a href="#">Home</a></li>
12   <li><a href="#">Menu 1</a></li>
13   <li><a href="#">Menu 2</a></li>
14   <li><a href="#">Menu 3</a></li>
15 </ul>


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


تب های پویا / قابل تغییر (به انگلیسی: Toggleable)

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

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

مثال

 1 <ul class="nav nav-tabs">
 2   <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
 3   <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
 4   <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
 5 </ul>
 6 
 7 <div class="tab-content">
 8   <div id="home" class="tab-pane fade in active">
 9     <h3>HOME</h3>
10     <p>Some content.</p>
11   </div>
12   <div id="menu1" class="tab-pane fade">
13     <h3>Menu 1</h3>
14     <p>Some content in menu 1.</p>
15   </div>
16   <div id="menu2" class="tab-pane fade">
17     <h3>Menu 2</h3>
18     <p>Some content in menu 2.</p>
19   </div>
20 </div>


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


پیل های قابل تغییر (به انگلیسی: Toggleable) / پویا

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

مثال

 1 <ul class="nav nav-pills">
 2   <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
 3   <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
 4   <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
 5 </ul>
 6 
 7 <div class="tab-content">
 8   <div id="home" class="tab-pane fade in active">
 9     <h3>HOME</h3>
10     <p>Some content.</p>
11   </div>
12   <div id="menu1" class="tab-pane fade">
13     <h3>Menu 1</h3>
14     <p>Some content in menu 1.</p>
15   </div>
16   <div id="menu2" class="tab-pane fade">
17     <h3>Menu 2</h3>
18     <p>Some content in menu 2.</p>
19   </div>
20 </div>


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


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

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


منابع آموزشی