تب‌ها و 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) بوت استرپ نمایش دهید (به قسمت پایین توجه کنید).

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

تب ها

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


تب‌ها با کد <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>

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

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


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

مثال زیر یک منوی کرکره‌ای را به “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)

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


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>

پیل های عمودی

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


پیل‌ها را می‌توان بصورت عمودی نیز نماش داد. تنها باید کلاس .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>

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

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


مثال زیر منو پیل‌های عمودی را داخل آخرین ستون قرار می‌دهد؛ بنابراین در یک صفحه نمایش بزرگ، منو در سمت راست نشان داده می‌شود. اما در صفحه نمایش‌های کوچک، محتوا بطور خودکار خودش را با چیدمان تک-ستون (به انگلیسی: 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>

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

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


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

مثال زیر یک منوی کرکره ای را به “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>

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

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


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

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

مثال

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.

 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)

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


برای ایجاد تب‌های قابل تغییر، ویژگی 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 بوت استرپ ما مراجعه کنید.


منابع آموزشی