آموزش بوت استرپ

Tabs و Pills در بوت استرپ bootstrap

منوها

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

در HTML، یک منو اغلب در یک لیست غیر ارادی <ul> (و بعد از آن مدلسازی شده) تعریف می شود، مانند این:

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

 

تب ها – tab در بوت استرپ

 

زبانه ها با <ul class = “nav nav-tabs”> ایجاد می شوند:

نکته: همچنین صفحه فعلی با <li class = “active”> را علامت بزنید.

مثال زیر باعث ایجاد صفحات ناوبری می شود:

 

تب ها با منو ناوبری Dropdown Menu

menu 3
زبانهها میتوانند منوهای کشویی را نیز داشته باشند.

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

 

Pills

قرص ها با <ul class = “nav nav-pills”> ایجاد می شوند. همچنین صفحه فعلی با <li class = “active”> را علامت بزنید:

مثال:

 

Vertical Pills – پیل های اعمودی

 

pill ها نیز می توانند به طور عمودی نمایش داده شوند. فقط کلاس .nav-stacked را اضافه کنید.

 

Vertical Pills در یک ردیف

 

مثال زیر، منوی pill عمودی را درون ستون آخر قرار می دهد. بنابراین، در یک صفحه بزرگ، منو به سمت راست نمایش داده می شود. اما در یک صفحه کوچک، محتوا به طور خودکار خود را به یک ستون تک ستون تنظیم می کند:

 

Pills با Dropdown Menu

 

pills همچنین می توانند منوهای کشویی را نگه دارند.

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

 

مثال:

 

pill ها , Tab ها در مرکز

 

برای قرار دادن زبانه ها و قرص ها در مرکز / توجیه، از کلاس “.nav-justified” استفاده کنید.

توجه داشته باشید که در صفحه هایی که کمتر از ۷۶۸ پیکسل هستند، آیتم های لیست مرتب می شوند (محتوا در مرکز باقی خواهد ماند):

 

Toggleable / Dynamic Tabs

برای ایجاد زبانه ها قابل انتقال ، ویژگی مربوط به data-toggle = “tab” را برای هر پیوند اضافه کنید. سپس یک کلاس tab-tab با یک شناسه منحصر به فرد برای هر برگه اضافه کنید و آنها را داخل عنصر <div> با کلاس tab-content قرار دهید.

اگر میخواهید زبانهها هنگام کلیک کردن بر روی آنها محو شوند، از کلاس “.fade به” tab-pane “اضافه کنید:

Toggleable / Dynamic Pills

همان کد برای قرص ها اعمال می شود؛ فقط ویژگی ویژگی data-toggle را به data-toggle = “pill” تغییر دهید:

 

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

بستن