مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش Bootstrap 3 را دنبال می کنند. منوها همیشه از مهمترین و اساسی ترین قسمت های تشکیل دهنده ی قالب وب سایت ها بوده اند. امروزه نیز تقریبا در تمام وب سایت های دنیا حداقل از یک منو با طرح های مختلف استفاده شده است. با ظهور ویژگی Responsive و فریم ورک Bootstrap نیز، طرح های متنوع تر و پیچیده تری از منوها ارائه شد. در فریم ورک Bootstrap 3 ، منوهای Tab و Pill دو نمونه از پرکاربردترین منوها در این فریم ورک هستند. برای آشنایی با منوهای Tab و Pill در Bootstrap 3 در ادامه ی این آموزش با ما همراه باشید.
منوهای Tab و Pill در Bootstrap 3
منوها
بیشتر صفحات وب، حداقل از یک نمونه منو، استفاد می کنند.
در html اغلب برای ایجاد یک منو از لیست <ul> استفاده می شود، مانند نمونه کد زیر:
مثال :
| <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> اضافه کنید:
در ادامه ی مبحث، چگونگی ایجاد منوهای کامل تر و پیچیده تری را ارائه کرده ایم.
منوهای tab
منو های tab با افزودن کد <ul class="nav nav-tabs"> ایجاد می شود:
نکته: همچنین می توانید، برای علامتگذاری صفحه جاری در منو، از کلاس <li class="active"> استفاده کنید.
مثال زیر چگونگی ایجاد یک منوی tab از نوع navigation را نشان می دهد:
مثال :
| <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> |
استفاده از منوی dropdown در منوی tab
همچنین می توانید از منوی dropdown در tabها استفاده کنید.
مثال زیر چگونگی افزودن یک dropdown را به سربرگ “Menu 1” در منوی tab را نشان می دهد:
مثال :
| <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> |
منوهای pill در Bootstrap 3
منوهای 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> |
منوی pill عمودی
منوهای pill را می توان با اضافه کردن کلاس .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> |
افزودن منوی pill عمودی در یک خط متن
همانطورکه در نمونه ی فوق مشاهده می کنید یک منوی pill در داخل یک سطر (در صفحه نمایش های بزرگ) در سمت راست قرار می گیرد. اما در صفحه نمایش های کوچکتر منو و ستون های متن، بصورت خودکار همگی در یک ستون تنظیم خواهند شد. کد نمونه فوق بصورت زیر است:
مثال :
| <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> |
افزودن dropdown به منوی pill
همچنین شما می توانید ز منوی dropdown داخل منوی pill استفاده کنید.
برای ایجاد نمونه ی بالا، بصورت زیر، منوی dropdown رابه سربرگ “Menu 1” در pill اضافه کنید:
مثال :
| <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> |
ترازبندی مرکزی منوهای tab و pill
برای اعمال ترازبندی center/justify در منوهای tab و pill از کلاس .nav-justified استفاده کنید.
در صفحه نمایش هایی با عرض کمتر از ۷۶۸px ، آیتم های منوی فوق، همگی در یک ستون چیده می شوند.
مثال:
مثال :
| <!-- 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> |
افزودن محتوا به سربرگ های منوی tab
HOME
آموزش کامل و جامع بوت استرپ ۳ در پی وی لرن
برای ایجاد حالت toggleable به tabهای فوق، صفت data-toggle="tab" را به هر یک از لینک های منوی tab اضافه کنید. سپس کلاس .tab-pane را با یک آی دی یکتا به هر کدام از tabها ، داخل یک عنصر <div> با کلاس .tab-content قرار دهید.
همچنین برای ایجاد افکت محو شدن آهسته، کلاس .fade رابه کلاس .tab-pane اضافه کنید:
مثال:
مثال :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <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> |
ایجاد حالت داینامیک در pill
برای ایجاد حالت داینامیک در همان کد، صفت data-toggle="pill" را اضافه کنید:
مثال :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <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> |
کلام آخر
در این آموزش، ما شما را با یکی از اساسی ترین و کاربردی ترین قسمت های صفحات وب که منوها هستند، آشنا کردیم. و همچنین به حالت های متنوع و پیچیده ای که می توان در منوها ایجاد کرد نیز اشاره کردیم. امیدواریم که مباحث آشنایی با منوهای Tab و Pill در Bootstrap 3 مورد استفاده تمامی عزیزان قرار گرفته باشد.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
