Tabs و Pills در بوت استرپ bootstrap
مقالات
منوها
اکثر صفحات وب نوعی منو دارند
در HTML، یک منو اغلب در یک لیست غیر ارادی <ul> (و بعد از آن مدلسازی شده) تعریف می شود، مانند این:
|
1 2 3 4 5 6 |
<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> |
اگر می خواهید یک منوی افقی را از لیست بالا ایجاد کنید، کلاس classlist-inline را به <ul> اضافه کنید:
|
1 |
<ul class="list-inline"> |
تب ها – tab در بوت استرپ
زبانه ها در bootstrap با <ul class = “nav nav-tabs”> ایجاد می شوند:
نکته: همچنین صفحه فعلی با <li class = “active”> را علامت بزنید.
مثال زیر باعث ایجاد صفحات ناوبری می شود:
|
1 2 3 4 5 6 |
<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 Menu
menu 3
زبانهها میتوانند منوهای کشویی را نیز داشته باشند.
مثال زیر یک منوی کشویی را به “menu 1” اضافه می کند:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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
قرص ها با <ul class = “nav nav-pills”> ایجاد می شوند. همچنین صفحه فعلی با <li class = “active”> را علامت بزنید:
مثال:
|
1 2 3 4 5 6 |
<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> |
Vertical Pills – پیل های اعمودی
pill ها نیز می توانند به طور عمودی نمایش داده شوند. فقط کلاس .nav-stacked را اضافه کنید.
|
1 2 3 4 5 6 |
<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> |
Vertical Pills در یک ردیف
مثال زیر، منوی pill عمودی را درون ستون آخر قرار می دهد. بنابراین، در یک صفحه بزرگ، منو به سمت راست نمایش داده می شود. اما در یک صفحه کوچک، محتوا به طور خودکار خود را به یک ستون تک ستون تنظیم می کند:
|
1 2 3 4 5 6 7 8 |
<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> |
Pills با Dropdown Menu
pills همچنین می توانند منوهای کشویی را نگه دارند.
مثال زیر یک منوی کشویی را به “منو 1” اضافه می کند:
مثال:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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> |
pill ها , Tab ها در مرکز
برای قرار دادن زبانه ها و قرص ها در مرکز / توجیه، از کلاس “.nav-justified” استفاده کنید.
توجه داشته باشید که در صفحه هایی که کمتر از 768 پیکسل هستند، آیتم های لیست مرتب می شوند (محتوا در مرکز باقی خواهد ماند):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!-- 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 / Dynamic Tabs
برای ایجاد زبانه ها قابل انتقال ، ویژگی مربوط به data-toggle = “tab” را برای هر پیوند اضافه کنید. سپس یک کلاس tab-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> |
Toggleable / Dynamic Pills
همان کد برای قرص ها اعمال می شود؛ فقط ویژگی ویژگی data-toggle را به 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> |
مطالب زیر را حتما مطالعه کنید
افزونه و کلاس Carousel در بوت استرپ bootstrap
کلاس collapse در بوت استرپ bootstrap
کلاس jumbotron در بوت استرپ
فیلترهای بوت استرپ
افزونه Affix بوت استرپ
دیدگاهتان را بنویسید