جلسه ۱۹ : طراحی منوها در ۴ Bootstrap

• جزئیات
• نوع محتواآموزش تصویری

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره آموزش کاربردی آموزش Bootstrap 4 ، را دنبال می کنند. خب ، آموزشی که ما قصد داریم در این بخش ، در ادامه دوره Bootstrap 4 ، ارائه کنیم. از مهمترین و پرکاربرد ترین ، آموزشهای Bootstrap ، محسوب می شود. موضوع این بخش ، طراحی منوها و کار با Nav در ۴ Bootstrap ، است.

امروزه تقریبا تمام وب سایت های موجود ، از یک یا چندین نوار منو، در قالب وب سایت خود ، استفاده می کنند. این منوها در Bootstrap 4 ، طراحی های بسیار متنوع و جالبی دارد. که هر کدام از آن ها، برای زمینه های مختلف کاربرد دارد. تمام این نوارها ، ویژگی responsive را دارند. و در صفحه نمایش های کوچکتر ، مانند موبایل دچار مشکل نمی شود.

در بخش های قبلی ، موضوعات نسبتا کاربردی  را از جمله کار با عنصر Dropdown  و موضوع کار با ویژگی collapse  ، را ارائه کردیم.

در ادامه با مبحث طراحی منوها و کار با Nav در ۴ Bootstrap ، با ما همراه باشید.

طراحی منوها و کار با Nav در ۴ Bootstrap

طراحی منوها در ۴ Bootstrap

طراحی منوها در ۴ Bootstrap

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

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

مثال:

ترکیب button و خصوصیت داینامیک در tab ها

ترکیب button و خصوصیت داینامیک در tab ها

برای این منظور ،صفت data-toggle را با مقدار  data-toggle="pill" ، تنظیم کنید.

کلام آخر 

خب همانطور که در ابتدای مطلب طراحی منوها و کار با Nav در ۴ Bootstrap ، اشاره شد.  این موضوع از مهمترین و پرکاربرد ترین مباحث در طراحی اغلب سایت ها، محسوب می شود. چرا که کمتر سایتی پیدا می شود که از منو ، استفاده نکرده باشد.